@import 'variables';
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
	.btn-close {
		filter: var(--bs-btn-close-white-filter);
	}
}

div.progress {
	height: 33px;

	> div.progress-bar {
		@for $i from 1 through 20 {
			&.w-#{$i} {
				width: #{$i*5%} !important;
			}
		}

		&.w-0, &.w-1, &.w-2, &.w-3, &.w-4, &.w-5, &.w-6 {
			@extend .bg-danger;
		}

		&.w-7, &.w-8, &.w-9, &.w-10, &.w-11, &.w-12, &.w-13 {
			@extend .bg-warning;
		}

		&.w-14, &.w-15, &.w-16, &.w-17, &.w-18, &.w-19, &.w-20 {
			@extend .bg-success
		}
	}
}

.debug {
	border: 1px dashed red;
}

.text-small {
	font-size: 75%;
}

@media screen and (max-width: 1024px) {
	div.letters.show {
		& > embed {
			height: 400px;
		}
	}
}

@media screen and (min-width: 1024px) {
	div.letters.show {
		& > form {
			max-width: 40%;
		}
	}
}