@import "../../../../lib/style/base";

$color-size: #{size(150)};

#colors {
	margin: #{$spacing-m} 0;
}

#theme-selector {
	width: 100%;
}

#palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(#{$color-size}, 1fr));
	grid-gap: #{$spacing-m};
	margin: 0 0 #{$spacing-m};
}

.color {
	height: #{$color-size};
	position: relative;

	.text {
		color: inherit;
		position: absolute;
		width: 100%;
		left: #{$spacing-l};
		bottom: #{$spacing-l};
		font-weight: #{$font-weight-bold};
	}

	&.primary-400 {
		background: #{color("primary", 400)};
		color: #{color-contrast("primary", 400)};
	}
	&.primary-500 {
		background: #{color("primary", 500)};
		color: #{color-contrast("primary", 500)};
	}
	&.primary-600 {
		background: #{color("primary", 600)};
		color: #{color-contrast("primary", 600)};
	}

	&.error-400 {
		background: #{color("error", 400)};
		color: #{color-contrast("error", 400)};
	}
	&.error-500 {
		background: #{color("error", 500)};
		color: #{color-contrast("error", 500)};
	}
	&.error-600 {
		background: #{color("error", 600)};
		color: #{color-contrast("error", 600)};
	}

	&.shade-100 {
		background: #{color("shade", 100)};
		color: #{color-contrast("shade", 100)};
	}
	&.shade-200 {
		background: #{color("shade", 200)};
		color: #{color-contrast("shade", 200)};
	}
	&.shade-300 {
		background: #{color("shade", 300)};
		color: #{color-contrast("shade", 300)};
	}
	&.shade-400 {
		background: #{color("shade", 400)};
		color: #{color-contrast("shade", 400)};
	}
	&.shade-500 {
		background: #{color("shade", 500)};
		color: #{color-contrast("shade", 500)};
	}
	&.shade-600 {
		background: #{color("shade", 600)};
		color: #{color-contrast("shade", 600)};
	}
	&.shade-700 {
		background: #{color("shade", 700)};
		color: #{color-contrast("shade", 700)};
	}
	&.shade-800 {
		background: #{color("shade", 800)};
		color: #{color-contrast("shade", 800)};
	}
}

#elevations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(size(200), 1fr));
	grid-gap: size(30);
	margin: 0 0 $spacing-l;
}

.elevation {
	height: size(200);
	background: $background;
	display: flex;
	align-items: center;
	justify-content: center;

	&:nth-child(1) {
		box-shadow: elevation(1);
	}
	&:nth-child(2) {
		box-shadow: elevation(2);
	}
	&:nth-child(3) {
		box-shadow: elevation(3);
	}
	&:nth-child(4) {
		box-shadow: elevation(4);
	}
	&:nth-child(5) {
		box-shadow: elevation(5);
	}
}