@use "sass:color";

.demo__intro {
	@extend .sec_main_center;
	@extend .sec_main_status;
}

.demo__status {
	@extend .sec_main_status;
	position: relative;
	min-height: 50vh;
	border-color: $foxtrot_color;

	h1:first-of-type {
		margin-top: 0;
		font-weight: bold;
	}

	@media (max-height: 512px) {
		.pos_abs {
			position: static !important;
		}
	}
}

.demo__header {
	padding: $space_double;

	nav {

		ul {
			margin: 0;
		}
	}
}

.header_fancy {
	background-color: color.adjust($bravo_color, $alpha: -0.4);

	nav {

		a {
			background-color: color.adjust($alpha_color, $alpha: -0.4);
			color: $alpha_color;

			&:active,
			&:focus,
			&:hover {
				background-color: rgba($color_brightest, 0.2);
				color: $color_brightest;
			}
		}
	}
}

.header_fix {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-color: color.adjust($charlie_color, $alpha: -0.4);

	nav {

		a {

			&:active,
			&:focus,
			&:hover {
				background-color: rgba($color_brightest, 0.2);
				color: $color_brightest;
			}
		}
	}
}

.demo__footer {
	width: 100%;
	// height: 128px;
	padding: $space_double 0;
	background-color: $color_dark;
	color: $color_bright;

	nav {

		a {
			color: $color_brightest;
		}
	}
}

.demo__sprite_down {
	@include sprite($down);
	// width: 32px;
	// height: 32px;
	// background-image: url(../art/sprites.png);
	// background-position: -32px 0;
}

.demo__sprite_up {
	@include sprite($up);
	// width: 32px;
	// height: 64px;
	// background-image: url(../art/sprites.png);
	// background-position: 0 0;
}

.demo__sprite_meta {
	@include sprite($meta);
	// width: 32px;
	// height: 32px;
	// background-image: url(../art/sprites.png);
	// background-position: -32px 32px;
}

.demo__avatar {

	img {
		opacity: 1;
		width: 128px;
		height: auto;
		min-width: 128px;
		min-height: 128px;
		border-radius: 50%;
		background-color: $delta_color;
	}
}

.demo__flag {
	height: 40vh;
}

.demo__credits {
	margin: $space_small 0 $space_basic 0;
}

.demo__button_32 {
	width: 32px;
	height: 32px;
}



.demo__queries > p {
  padding: $padding_basic;
}

.query_phoneUp {
  @include forPhoneUp {background-color: rgba($color_text_basic, 0.2)};
}

.query_phoneOnly {
  @include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); }
}

.query_tabletPortaitOnly {
  @include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); }
}

.query_tabletPortraitUp {
  @include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); }
}

.query_tabletLandscapeOnly {
  @include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); }
}

.query_tabletLandscapeUp {
  @include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); }
}

.query_desktopOnly {
  @include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); }
}

.query_desktopUp {
  @include forDesktopUp { background-color: rgba($color_text_basic, 0.2); }
}

.query_bigDesktopUp {
  @include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); }
}

.demo__query_example {
	@include goingLarge($screen_tiny) {background-color: $alpha_color; }
	@include goingLarge($screen_small) {background-color: $bravo_color; }
	@include goingLarge($screen_medium) {background-color: $charlie_color; }
	@include goingLarge($screen_large) {background-color: $delta_color; }
	@include goingLarge($screen_huge) {background-color: $echo_color; }
	@include goingLarge($screen_gigantic) {background-color: $foxtrot_color; }
	margin-bottom: $space_small;
	padding: $space_small;
	text-align: center;

	&:after {
		@extend code;
		@include goingLarge($screen_tiny) {
			& { content: '768px'; }
		}
		@include goingLarge($screen_small) {
			& { content: '1024px'; }
		}
		@include goingLarge($screen_medium) {
			& { content: '1280px'; }
		}
		@include goingLarge($screen_huge) {
			& { content: '1680px'; }
		}
		@include goingLarge($screen_gigantic) {
			& { content: '1920px'; }
		}
		content: '< 768px';
		padding: $padding_basic;
		border-radius: $radius_basic;
		color: $color_brightest;
		background-color: rgba($color_front_basic, 0.2);
	}
}

// Tables
.demo__td_no_bl {
	border-left: none;
}

.demo__td_no_br {
	border-right: none;
}

.demo__td_pr {
	padding-right: $space_double;
}

.demo__td_pl {
	padding-left: $space_double;
}

// Index
// -----------------------------------------------------------------------------
.wrap {
	display: flex;
	// height: 100%;
	align-items: center;
  justify-content: center;
}

.hello {
	flex: 0 1 auto;
	width: 80%;

	ul {
		padding: 1em 5em;
		background-color: $color_darker;
	}
}