@charset 'utf-8';

@import 'variables';

// Variables
$dark: #333;
$light: #ffc;
$typeface: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* stylelint-disable-line value-keyword-case */ // https://github.com/vicompany/stylelint-config-vi/issues/3

%silent {
	display: inline-block;
}

// Global styling
html {
	box-sizing: border-box;
	overflow-y: scroll;
}

// stylelint-disable selector-max-universal
* {
	&,
	&:before,
	&:after {
		box-sizing: inherit;
	}
}
// stylelint-enable selector-max-universal

body {
	margin: 0;
	padding: 0;

	color: $dark;
	font: 1rem/1.5 $typeface;
}

.btn {
	@extend %silent;
	@include clearfix;

	appearance: none;
	contain: content;

	@include respond-to(medium) {
		padding: 2rem;
	}
}

.display {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap-reverse;
	order: 2;

	overflow: hidden;
}

.grid {
	display: grid;

	grid-column: 1 / 2;
	grid-row: 2 / 3;
	grid-gap: 1rem;

	width: 50%;

	background: #fff;
}

.positioning {
	position: absolute;
	right: 0;
	z-index: 2;

	display: inline-block;

	overflow: hidden;
	width: 5rem;

	@media (--large-viewport) {
		overflow: auto;
	}
}

.text {
	color: #f00;
	text-rendering: optimizeLegibility;
	text-align: center;
	white-space: nowrap;
}

h1, h2, h3 {
	margin: 0 0 1rem;
}

a, h1 {
	color: #356;
}

// Selectors
.selector-1,
.selector-2,
.selector-3[type='text'] {
	position: relative;

	display: block;

	box-sizing: border-box;

	color: $dark;

	background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
}

// Pseudo classes
.selector-1 {
	&:focus {
		border: solid 1px $dark;
	}

	&:hover {
		color: $light;
	}
}

// Pseudo elements
.selector-2 {
	&:before {
		position: absolute;
		left: 0;

		content: '';
	}

	&:after {
		background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=');
		background-color: $light;

		content: '→';
	}
}

// Nesting and chaining selectors
.nav {
	> .btn {
		margin: 0;
	}

	&.is-visible {
		> .btn {
			margin: 2rem 1rem;
		}
	}

	.nav-container & {
		padding: 1rem;
	}
}

.selector-a,
.selector-b:not(:first-child) {
	top: calc(calc(1rem * 2) / 3);

	padding: 0.5rem;
}

// Single line selectors
// Only allow one property and they don't require a newline
.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

// Multi line values
.selector-amaze {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		#fff 25px,
		rgba(255, 255, 255, 1) 50px
	);

	box-shadow: 0 1px 1px $dark,
		0 1px 0 $light,
		2px 2px 1px 1px rgba(0, 0, 0, 0.5) inset;
}

// Animations
// Allow unknown animations because we often use separate files.
.slide {
	animation: fancy-slide 2s linear;
}

// Unspecified
// Unspecified properties are expected after the specified properties
.unspecified {
	display: inline-block;

	pointer-events: none;
	opacity: 0.5;
}

// Media queries
@media (min-width: 35rem) {
	.selector-1 {
		transform-origin: center;
		transform: translate(1, 1) scale(3);
	}
}

@media (min-width: 35rem) and (orientation: landscape) {
	.selector-2 {
		min-height: 0;
	}
}

@media not screen and (color), print and (color) {
	.selector-3 {
		padding: 0.5rem;
	}
}

@mixin breakpoint-sync($breakpoints: $breakpoints) {
	display: block;

	overflow: hidden;
	width: 0;
	height: 0;

	@each $name, $value in $breakpoints {
		@include respond-to($name) {
			content: breakpoints-to-json($name);
		}
	}
}

// CSS fallback duplicate properties
// Allow "consecutive-duplicates-with-different-values"
// http://stylelint.io/user-guide/rules/declaration-block-no-duplicate-properties/
.nav--main {
	position: sticky;
	position: fixed; // For older (mobile) browsers
	top: 0;
	left: 0;
}