/* Variables */
:root {
	--dark: #333;
	--light: #ffc;
	--typeface: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* stylelint-disable-line value-keyword-case */
}

/* Custom media */
@custom-media --large-viewport (min-width: 768px);

/* 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: var(--dark);
	font: 1rem/1.5 var(--typeface);
}

.btn {
	appearance: none;
	contain: content;

	@media (--large-viewport) {
		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;
}

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

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

	display: block;

	box-sizing: border-box;

	color: var(--dark);

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

/* Pseudo classes */
.selector-1 {
	&:focus {
		border: solid 1px var(--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: '→';
	}
}

/* Logical combinations */
section {
	&:matches(h1, h1, h3) {
		margin: 0 0 1rem;
	}

	& a:has(> img) {
		display: block;
	}

	&:not(.contact) {
		padding: 1rem;
	}
}

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

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

	@nest .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 var(--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 (--large-viewport) {
	.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;
	}
}

/* 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;
}