@layer Setup {
	html {
		&,
		& * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		&,
		& body {
			min-height: 100svh;
			scrollbar-width: thin;
			scrollbar-gutter: stable;
		}
	}
}

@layer Reset {
	a {
		display: block;
		text-decoration: none;
		padding: 10px;
		border-radius: 10px;
		box-sizing: content-box;

		&:focus-visible,
		&:focus-within {
			outline: var(--outline-basis);
			outline-offset: var(--outline-off--);
		}
	}

	mark {
		color: inherit;
		background: none;
	}
}

@layer Typography {
	html {
		font: var(--type-base-body---fonts);
		letter-spacing: var(--type-base-body---space);

		& h1,
		& .h1 {
			font: var(--type-base-h1-----fonts);
			letter-spacing: var(--type-base-h1-----space);
		}

		& h2,
		& .h2 {
			font: var(--type-base-h2-----fonts);
			letter-spacing: var(--type-base-h2-----space);
		}

		& h3,
		& .h3 {
			font: var(--type-base-h3-----fonts);
			letter-spacing: var(--type-base-h3-----space);
		}

		& h4,
		& .h4 {
			font: var(--type-base-h4-----fonts);
			letter-spacing: var(--type-base-h4-----space);
		}

		& h5,
		& .h5 {
			font: var(--type-base-h5-----fonts);
			letter-spacing: var(--type-base-h5-----space);
		}

		& h6,
		& .h6 {
			font: var(--type-base-h6-----fonts);
			letter-spacing: var(--type-base-h6-----space);
		}

		& p,
		& .body {
			font: var(--type-base-body---fonts);
			letter-spacing: var(--type-base-body---space);
		}

		& mark.tag {
			font: var(--type-base-tag----fonts);
			letter-spacing: var(--type-base-tag----space);
		}
	}
}

@layer Base {
	html {
		color-scheme: var(--theme-mode);
		color: light-dark(var(--color-black----), var(--color-white----));
		background-color: light-dark(var(--color-white----), var(--color-black----));

		& * {
			outline: var(--outline-basis);
			outline-offset: var(--outline-off--);
			outline-color: var(--color-trans----);
			transition: var(--trans-out-all---);

			&::selection {
				color: light-dark(var(--color-white----), var(--color-white----));
				background-color: var(--color-purple---);
				/* text-decoration */
				/* text-shadow */
			}

			&:focus-visible {
				outline-color: var(--outline-color);
			}
		}

		& body {
			&:has(kit-popup.open) {
				overflow-y: hidden;
			}
		}

		& i {
			&[has~="icon"] {
				display: grid;
				place-items: center;
				transition: var(--trans-opacity---);

				&,
				& > * {
					margin: 0;
					padding: 0;
				}

				& > * {
					display: block;
				}
			}
		}

		& input,
		& button {
			position: relative;
			display: block;
			margin: 0;
			border: none;
			border-radius: 10px;
			padding-block: 15px;
			padding-inline: var(--size-10-30);
			color: light-dark(var(--color-white----), var(--color-black----));
			background-color: light-dark(var(--color-black----), var(--color-white----));
			transition: var(--trans-opacity---), var(--trans-out-all---);

			&[disabled] {
				cursor: not-allowed;
				opacity: var(--static-disable-opacity);
			}

			&:not(:focus-visible) {
				outline-color: light-dark(var(--color-white----), var(--color-black----));
				outline-offset: calc(var(--outline-off--) * -1);
			}
		}

		& button {
			cursor: pointer;
			padding-block: 10px;
			padding-inline: var(--size-10-20);

			&:hover {
				opacity: var(--static-hover-opacity--);
			}
		}
	}
}

@layer Component {
	kit-menu,
	kit-popup,
	kit-notice,
	kit-screen,
	kit-module,
	kit-wrapper,
	kit-storage,
	kit-template,
	kit-overflow {
		display: block;
		box-sizing: border-box;

		kit-storage,
		kit-template,
		&[is="hidden"] {
			display: none;
			visibility: hidden;
			pointer-events: none;
			position: absolute;
			inset: -100vh auto auto -100vw;
			text-indent: -100vw;
			z-index: -1;
		}

		&[is~="fullscreen"] {
			min-height: 100svh;
		}
	}

	kit-overflow,
	kit-popup {
		position: fixed;
		inset: var(--static-screen-padding-);
		pointer-events: none;

		& > * {
			pointer-events: all;
		}
	}

	kit-menu {
		& button.logo {
			all: unset;
			display: grid;
			place-items: center;
			cursor: pointer;
			border-radius: var(--static-border-radius--);
			margin-inline-end: var(--size-5-10);
			overflow: hidden;
		}
	}

	kit-popup {
		inset: 0;
		isolation: isolate;
		z-index: var(--strata-hades--modal--);

		display: grid;
		place-items: center;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		& > * {
			position: relative;
			z-index: var(--strata-baldur-base---);
		}

		& > :only-child {
			position: relative;
			width: 100%;
			height: 100%;
			max-width: 720px;
			max-height: 100svh;
			color: inherit;
			border: 2px solid currentColor;
			border-radius: var(--size-10-20);
			padding: var(--wrapper-padding);
			background-color: light-dark(var(--color-white----), var(--color-black----));

			& kit-button[action="exit"] {
				position: absolute;
				inset-block-start: 0;
				inset-inline-end: 0;
				display: grid;
				place-items: center;
				padding: 10px;
				box-sizing: content-box;
				border-radius: 100%;
				cursor: pointer;

				& > svg {
					width: 40px;
					height: auto;
					aspect-ratio: 1 / 1;
				}
			}
		}

		&::before {
			content: "";
			display: block;
			position: absolute;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.75);
			z-index: var(--strata-atlas--back---);
		}

		&:has(> :only-child) {
			--screen-padding: var(--size-20-30);

			padding: var(--screen-padding);
		}

		&.open {
			visibility: visible;
			pointer-events: all;
		}
	}

	kit-notice {
		--message-border-color: rgba(255, 255, 255, 0.25);

		display: flex;
		align-items: center;
		justify-content: space-between;

		opacity: 0;
		scale: 0.5;
		padding: 0;
		min-height: 45px;
		color: var(--color-white----);
		background-color: var(--color-blue-----);
		transition: var(--trans-opacity---), var(--trans-scale-----);
		transform-origin: center right;

		&.visible {
			opacity: 1;
			scale: 1;
		}

		&.error {
			background-color: var(--color-red------);
		}

		&.info {
			background-color: var(--color-blue-----);
		}

		&.log {
			background-color: var(--color-iron-----);
		}

		&.warn {
			background-color: var(--color-yellow---);
		}

		&.log,
		&.warn {
			--message-border-color: rgba(0, 0, 0, 0.25);
			color: var(--color-black----);
		}

		&.timed {
			--progress: 100%;

			position: relative;

			&::after {
				content: "";
				display: block;
				position: absolute;
				inset-block-end: 0;
				inset-inline-start: 0;
				width: var(--progress);
				height: 2px;
				background-color: currentColor;
				pointer-events: none;
			}
		}

		& .message {
			padding-inline: 10px;

			&:has(~ button.close) {
				border-inline-end: 1px solid var(--message-border-color);
			}
		}

		& button.close {
			box-sizing: content-box;
			cursor: pointer;

			display: grid;
			grid-template-areas: "box";
			color: inherit;
			outline: none;
			border: none;
			padding: 10px;
			background-color: transparent;

			& svg {
				display: block;
				grid-area: box;
			}
		}

		&:has(button.close:active) {
			scale: var(--static-active-scale---);
		}
	}

	kit-screen {
		padding-block: var(--size-30-60);
		padding-inline: var(--size-30-60);

		display: grid;
		row-gap: var(--size-5-10);
		grid-template-areas: "menu" "box" "footer";
		grid-template-rows: max-content 1fr max-content;

		& > * {
			padding-block: var(--size-10-20);
			padding-inline: var(--size-10-20);
			border-radius: var(--static-border-radius--);
			background-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
		}

		& > *:not(kit-menu, footer) {
			grid-area: box;
			opacity: 0;
			pointer-events: none;
			transition: var(--trans-opacity---);

			&.active {
				opacity: 1;
				pointer-events: revert;
			}
		}

		& kit-menu:first-of-type {
			grid-area: menu;

			padding-inline: var(--size-10-20);
			overflow-x: auto;
			scrollbar-width: thin;
			scrollbar-gutter: stable;

			& > nav {
				display: grid;
				column-gap: var(--size-5-10);
				grid-auto-flow: column;
				grid-auto-columns: max-content;
				align-items: center;
				justify-items: start;
				align-content: start;
				justify-content: start;
			}
		}

		& footer:first-of-type {
			grid-area: footer;
		}
	}

	kit-wrapper {
		display: block;

		&[is~="list"] {
			display: grid;
			align-items: center;
			justify-content: start;
			grid-auto-rows: max-content;

			&[is~="list-stretch"] {
				grid-auto-rows: 1fr;
				align-items: stretch;
				justify-content: stretch;
			}
		}
	}

	[container~="kit-notice"] {
		display: grid;
		row-gap: 10px;
		place-content: end;
		align-items: center;
		justify-items: end;
		grid-auto-rows: max-content;
		z-index: var(--strata-indra--tooltip);
	}
}

@layer Modules {
	.debug {
		display: grid;
		grid-auto-rows: max-content;
		row-gap: var(--size-10-20);
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		padding: 10px;
		overflow-y: scroll;
		scrollbar-width: thin;
		scrollbar-gutter: stable;
		background-color: light-dark(var(--color-black----), var(--color-white----));

		& pre {
			margin: 0;
			padding-block: 10px;
			padding-inline-start: var(--size-5-10);
			border-inline-start: 8px solid var(--color-pending--);
			overflow: scroll;
			scrollbar-width: thin;
			scrollbar-gutter: stable;
			width: 33.33lvw;
			height: calc(calc(100svh / 3) - var(--size-10-20));

			font-size: 12px;
			font-weight: 600;
			color: light-dark(var(--color-black----), var(--color-white----));
			background-color: light-dark(var(--color-white----), var(--color-black----));
		}
	}

	.dashboard-overview,
	.listing-passeios,
	.listing-clientes {
		display: grid;
		gap: var(--size-20-30);
		grid-template-rows: max-content 1fr;

		& header {
			display: grid;
			align-items: center;
			justify-content: start;
			column-gap: var(--size-10-20);
			width: max-content;
			max-width: 100%;
			grid-template-areas:
				"refresh title"
				"error loading";

			& button.refresh {
				grid-area: refresh;
				display: grid;
				place-items: center;
				width: 100%;
				max-width: max-content;
				height: auto;
				max-height: 100%;
				aspect-ratio: 1 / 1;
				outline: none;
				border-radius: 100%;
				margin-block-start: 5px;
				padding: 5px;

				& svg {
					display: block;
				}
			}

			& .title {
				grid-area: title;
			}

			& i.loading {
				grid-area: loading;
				opacity: 0;
				max-width: 100%;
				justify-content: end;
			}
		}

		& section.body {
			display: grid;
			grid-template-rows: max-content 1fr;
			row-gap: var(--size-10-20);

			& .error-container {
				display: none;
				align-items: center;
				justify-content: start;
				column-gap: var(--size-5-10);

				& i.error {
					justify-content: start;
				}

				& .message {
					/*  */
				}
			}

			& .passeios-container {
				--columns: 1;

				opacity: 1;
				display: grid;
				grid-template-columns: repeat(var(--columns), 1fr);
				grid-auto-rows: max-content;
				align-items: stretch;
				justify-content: start;
				column-gap: var(--size-20-30);
				row-gap: var(--size-20-40);
				transition: var(--trans-opacity---);

				& article.passeio {
					cursor: pointer;
					position: relative;
					display: grid;
					grid-template-rows: 1fr max-content;
					row-gap: var(--size-10-20);
					color: light-dark(var(--color-white----), var(--color-black----));
					background-color: light-dark(var(--color-black----), var(--color-white----));
					padding: var(--size-10-20);
					border-radius: var(--size-10-20);
					box-shadow: var(--client-shadow-base);
					transition: var(--trans-scale-----);

					& a {
						position: absolute;
						inset: 0;
						border-radius: inherit;
						outline-width: 4px;

						&:not(:focus-visible) {
							outline-offset: -6px;
							outline-color: light-dark(var(--color-white----), var(--color-black----));
						}
					}

					& footer {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: space-between;
						column-gap: var(--size-5-10);
						isolation: isolate;

						& mark {
							box-sizing: content-box;
							padding-inline: var(--size-5-10);
							z-index: var(--strata-baldur-base---);
							background-color: light-dark(var(--color-black----), var(--color-white----));

							&:first-child {
								padding-inline-start: 0;
							}

							&:last-child {
								padding-inline-end: 0;
							}
						}

						&::before {
							content: "";
							display: block;
							position: absolute;
							height: 2px;
							inset-block: 50%;
							inset-inline: 5px;
							translate: 0 -50%;
							z-index: var(--strata-atlas--back---);
							background-color: light-dark(var(--color-white----), var(--color-black----));
						}
					}

					&:hover,
					&:focus-within {
						outline: none;
						scale: var(--static-hover-scale----);
					}
				}

				@media (min-width: 1280px) {
					& {
						--columns: 6;
					}
				}

				@media (min-width: 640px) and (max-width: 1280px) {
					& {
						--columns: 3;
					}
				}
			}
		}

		& footer {
		}

		&.htmx-request {
			& i.loading {
				opacity: 1;
			}

			& section.body {
				opacity: 0;
				pointer-events: none;
			}
		}

		&.has-error {
			& section.body {
				& .error-container {
					display: flex;
				}
			}
		}
	}
}

@layer Specific {
	#edit__passeio {
		& .content {
			--wrapper-padding: var(--size-20-30);
		}

		& form {
			display: grid;
			row-gap: var(--size-10-20);

			& header {
				display: grid;
			}

			& .input-container {
				display: grid;
				row-gap: var(--size-10-20);

				& .input-group {
					display: grid;
					grid-template-columns: repeat(var(--columns), 1fr);
					place-content: stretch;
					place-items: stretch;
					gap: var(--size-10-20);

					@media (min-width: 480px) {
						&:has(> :last-child:nth-child(2)) {
							--columns: 2;
						}

						&:has(> :last-child:nth-child(3)) {
							--columns: 3;
						}

						&:has(> :last-child:nth-child(4)) {
							--columns: 4;
						}

						&:has(> :last-child:nth-child(5)) {
							--columns: 5;
						}
					}

					@media (min-width: 320px) and (max-width: 480px) {
						& {
							--columns: 1;
						}
					}
				}
			}

			& footer {
				display: grid;
				justify-items: end;

				& button[type="submit"] {
					display: grid;
					place-items: center;
					grid-template-areas: "box";

					& .label,
					& .spinner {
						grid-area: box;
						transition: var(--trans-opacity---);
					}

					& .label {
						opacity: 1;
					}

					& .spinner {
						opacity: 0;
					}
				}
			}

			&.htmx-request {
				& footer {
					& button[type="submit"] {
						& .label {
							opacity: 0;
						}

						& .spinner {
							opacity: 1;
						}
					}
				}
			}
		}
	}
}