/** style rules for the html template's header (navbar). */

.header {
	--rect-border-radius: 0.5rem;
	--rect-height: calc(2rem + var(--rect-border-radius));
	--rect-min-width: calc(var(--rect-height) * 2.5 + var(--rect-border-radius));
	--rect-background-color: light-dark(#ffc000, #00c000);

	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	min-width: 100%;
	max-width: 100%;

	@container mobile (min-width: 0) {
		flex-direction: column !important;
	}

	& > :last-child {
		margin-left: auto;

		@container mobile (min-width: 0) {
			margin-left: unset !important;
		}
	}

	& > * {
		display: inline-block;
		position: relative;
		flex-shrink: 0;
		min-width: var(--rect-min-width);
		width: max-content;
		height: var(--rect-height);
		border: solid 2px;
		border-radius: var(--rect-border-radius);
		color: inherit;
		text-align: center;
		user-select: none;
	}

	& > .button {
		border: none;
		background-color: var(--rect-background-color);
		cursor: pointer;
		text-decoration: none;
	}

	& > light-dark-toggle {
		--slider-margin: 0.25rem;
		--slider-height: calc(var(--rect-height) - 2.0 * var(--slider-margin));

		& > .slider-states {
			position: absolute;
			height: var(--slider-height);
			width: var(--slider-height);
			bottom: var(--slider-margin);
			margin-left: var(--slider-margin);
			background-color: #0000007f;
			transition: 0.4s;
			line-height: var(--slider-height);
			text-align: center;
			font-size: larger;
			border-radius: var(--rect-border-radius);

			& > * {
				display: none;
			}
		}

		& > .text-states {
			position: absolute;
			width: 100%;
			height: 100%;

			& > * {
				display: none;
				height: 100%;
				width: 100%;
				align-content: center;
				text-align: center;
			}
		}

		&:state(light) {
			& > .slider-states {
				transform: translateX(0%);
				margin-left: var(--slider-margin);

				& > *:nth-child(1) {
					display: inline-block;
				}
			}

			& > .text-states > *:nth-child(1) {
				display: block;
			}
		}

		&:state(auto) {
			& > .slider-states {
				transform: translateX(-50%);
				margin-left: calc(50%);

				& > *:nth-child(2) {
					display: inline-block;
				}
			}

			& > .text-states > *:nth-child(2) {
				display: block;
			}
		}

		&:state(dark) {
			& > .slider-states {
				transform: translateX(-100%);
				margin-left: calc(100% - var(--slider-margin));

				& > *:nth-child(3) {
					display: inline-block;
				}
			}

			& > .text-states > *:nth-child(3) {
				display: block;
			}
		}
	}
}