@layer x_layer {
	body > x-layers {
		--x-layers-stack-gap: 45px;
		--x-layers-bottom-gap: 10px;
		--x-layers-animation-velocity: 300ms;
		--x-layers-animation-timing-function: ease-in-out;
		--x-layers-scale-gap: 0.05;

		& > container {
			width: 100vw;
			height: 100vh;

			position: fixed;
			inset: 0;
			z-index: var(--z-layers);

			&.removing {
				& > cover {
					animation: x_layer_cover_fade_out var(--x-layers-animation-velocity) var(--x-layers-animation-timing-function) forwards;
				}

				& > layer {
					animation: x_layer_fade_out var(--x-layers-animation-velocity) var(--x-layers-animation-timing-function) forwards;
				}
			}

			& > cover {
				pointer-events: none;

				background-color: rgba(0, 0, 0, 0.4);
				opacity: 0;
				backdrop-filter: blur(1px);

				position: fixed;
				inset: 0;

				animation: x_layer_cover_fade_in var(--x-layers-animation-velocity) var(--x-layers-animation-timing-function) forwards;
			}

			& > layer {
				opacity: 0;

				width: 95%;
				height: 90%;

				position: fixed;
				left: 50%;
				top: 100%;
				transform: translate(-50%, 0%) scale(1);

				transition:
					transform var(--x-layers-animation-velocity) var(--x-layers-animation-timing-function),
					opacity var(--x-layers-animation-velocity) var(--x-layers-animation-timing-function);

				will-change: transform, opacity;
			}

			&:nth-last-child(1) {
				&.adding {
					& > layer {
						animation: x_layer_fade_in var(--x-layers-animation-velocity) var(--x-layers-animation-timing-function) forwards;
					}
				}

				& > layer {
					opacity: 1;
					transform: translate(-50%, calc(-100% - var(--x-layers-bottom-gap))) scale(1);
				}
			}

			&:nth-last-child(2) {
				& > layer {
					opacity: 1;
					transform: translate(-50%, calc(-100% - var(--x-layers-bottom-gap) - var(--x-layers-stack-gap))) scale(calc(1 - var(--x-layers-scale-gap)));
				}
			}

			&:nth-last-child(3) {
				& > layer {
					opacity: 1;
					transform: translate(-50%, calc(-100% - var(--x-layers-bottom-gap) - var(--x-layers-stack-gap) * 2 )) scale(calc(1 - var(--x-layers-scale-gap) * 2));
				}
			}

			&:nth-last-child(n+4) {
				& > layer {
					opacity: 0;
					transform: translate(-50%, calc(-100% - var(--x-layers-bottom-gap) - var(--x-layers-stack-gap) * 3 )) scale(calc(1 - var(--x-layers-scale-gap) * 3));
				}
			}
		}
	}

	@layer x_layers_keyframes {
		@keyframes x_layer_cover_fade_in {
			from { opacity: 0; }
			to { opacity: 1; }
		}

		@keyframes x_layer_cover_fade_out {
			from { opacity: 1; }
			to { opacity: 0; }
		}

		@keyframes x_layer_fade_in {
			from {
				opacity: 0;
				transform: translate(-50%, 0%) scale(1);
			}

			to {
				opacity: 1;
				transform: translate(-50%, calc(-100% - 10px)) scale(1);
			}
		}

		@keyframes x_layer_fade_out {
			from {
				opacity: 1;
				transform: translate(-50%, calc(-100% - 10px)) scale(1);
			}

			to {
				opacity: 0;
				transform: translate(-50%, 0%) scale(1);
			}
		}
	}
}

x-link{
	cursor: pointer;
	&:not([class]){
		color: var(--color-text-secondary);
		&:hover{ color: var(--color-text-error); }
	}
}

@layer x_marquee {
	x-marquee {
		--x-marquee-gap: var(--gap);
		--x-marquee-animation-duration: 20s;
		--x-marquee-animation-direction: forwards;

		width: 100%;
		overflow: hidden;
		position: relative;

		mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent 100%);

		&.x-marquee-animation-direction-reverse { --x-marquee-animation-direction: reverse; }

		& > div {
			width: max-content;
			display: flex;
			padding-left: var(--x-marquee-gap);
			gap: var(--x-marquee-gap);
			animation: x_marquee_animation var(--x-marquee-animation-duration) linear infinite var(--x-marquee-animation-direction);
		}

		&::after {
			content: "";
			position: absolute;
			inset: 0;

			backdrop-filter: blur(2px);
			mask-image: linear-gradient(to right, black 0%, black 5%, transparent 20%, transparent 80%, black 95%, black 100%);
		}
	}

	@keyframes x_marquee_animation { to { transform: translateX(-50%); } }
}

@layer x_modal {
	body > modal{
		pointer-events: none;

		opacity: 0;

		background-color: var(--color-main-tint-2);

		min-width: 40px;
		border: 2px solid transparent;
		border-radius: var(--radius);
		box-shadow: var(--shadow);

		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.8);
		z-index: var(--z-modal);

		transition: var(--transition-velocity) ease-in-out;
		transition-property: transform, opacity, border;

		&.show{
			pointer-events: all;
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}

		& > x-svg{
			position: fixed;
			top: 5px;
			right: 5px;
		}

		& > main{
			width: auto;
			max-width: 90dvw;

			height: auto;
			max-height: 90dvh;

			overflow: hidden;
			overflow-y: scroll;

			padding: var(--padding);
			padding-top: 2rem;

			@media (width <= 600px){
				width: 90dvw;
			}
		}
	}
}

x-select{
	& > button{
		width: 100%;
		margin-bottom: calc(var(--padding) * 2);
	}

	& > main{
		background-color: var(--color-main-tint-1);
		width: 100%;
		padding: var(--padding);
		border-radius: var(--radius);

		display: none;
		flex-direction: column;
		gap: calc(var(--gap) / 2);

		&.show{
			display: flex;
		}

		& > section{
			background-color: var(--color-main-tint-2);
			padding: var(--padding);
			border-radius: var(--radius);

			&#optionsSelected{
				display: none;
				flex-wrap: wrap;
				flex-direction: row;
				gap: calc(var(--gap) / 2);

				&.show{
					display: flex;
				}

				& > div{
					cursor: pointer;
					display: none;
					background-color: var(--color-main-tint-3);
					width: auto;
					height: auto;
					padding: var(--padding);
					border-radius: var(--radius);
					transition: var(--transition-velocity) ease-in-out background-color;

					&:hover{
						user-select: none;
						background-color: var(--color-main-tint-4);
					}
				}
			}

			&#search{
			}

			&#optionsToSelect{
				max-height: 250px;
				overflow: scroll;

				display: flex;
				flex-direction: column;
				gap: calc(var(--gap) / 2);

				&.hide{
				display: none;
				}

				& > div{
					cursor: pointer;
					background-color: var(--color-main-tint-3);
					width: auto;
					height: auto;
					padding: var(--padding);
					border-radius: var(--radius);
					transition: var(--transition-velocity) ease-in-out background-color;

					&:hover{
						user-select: none;
						background-color: var(--color-main-tint-4);
					}
				}
			}
		}
	}
}

x-share {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

@layer x_toast {
	body > toasts{
		height: auto;
		max-height: 100vh;
		width: 400px;
		padding: var(--padding);
		padding-bottom: calc(var(--padding) * 4);

		overflow-x: hidden;
		overflow-y: scroll;

		display: flex;
		flex-direction: column-reverse;
		gap: var(--gap);

		position: fixed;
		top: 0px;
		right: 0px;
		z-index: var(--z-toasts);

		&:empty{
			padding: 0px;
		}
	}

	@media (width <= 600px) {
		body > toasts{
			width: 100vw;
			gap: 5px;
		}
	}
}

x-tooltip {
	position: absolute;
	top: anchor(bottom);
	left: anchor(center);
	z-index: var(--z-tooltip);
	transform: translate(-50%, var(--padding)) scale(0.5);

	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: var(--transition-velocity);
	transition-property: opacity, transform;
	will-change: opacity, transform;

	background-color: var(--color-hsla-0-0-100-0-1);
	color: var(--color-text-primary);
	border-radius: var(--radius);
	border: 1px solid var(--color-main-tint-2);
	box-shadow: var(--shadow);
	backdrop-filter: blur(var(--blur));

	display: grid;
	place-items: center;

	&.show {
		pointer-events: all;
		opacity: 1;
		transform: translate(-50%, var(--padding)) scale(1);
	}
}

x-urgent{
	& > dialog{
		pointer-events: none;

		opacity: 0;

		background-color: var(--color-main-tint-4);

		min-width: 40px;
		border: 0px;
		border-radius: var(--radius);
		box-shadow: var(--shadow);

		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.8);

		transition: var(--transition-velocity) ease-in-out;
		transition-property: transform, opacity;

		&::backdrop{
			/* No access to css variables inside ::backdrop */
			transition: 200ms ease-in-out;
			transition-property: opacity;

			opacity: 0;
			background-color: rgba(0, 0, 0, 0.6);
			backdrop-filter: blur(10px);
		}

		&[opening]{
			pointer-events: all;

			opacity: 1;
			transform: translate(-50%, -50%) scale(1);

			&::backdrop{
				opacity: 1;
			}
		}

		& > button{
			width: 30px;
			height: 30px;

			padding: 2px;

			position: fixed;
			top: 5px;
			right: 5px;
		}

		& > main{
			width: auto;
			max-width: 80vw;

			height: auto;
			max-height: 80vh;

			overflow: hidden;
			overflow-y: scroll;

			padding: var(--padding);
			padding-top: 40px;

			display: grid;
			place-items: center;

			@media (width <= 600px){
				max-width: 90dvw;
				max-height: 90dvh;
			}
		}
	}

	& > trigger{
		cursor: pointer;

		&:empty{
			pointer-events: none;
		}
	}
}

@layer XR {
	[XR-editable] {
		cursor: pointer;
		outline: 1px solid transparent;
		transition: outline-color var(--transition-velocity) ease-in-out;

		&:hover { outline-color: var(--color-text-secondary); }

		&:focus, &:focus-visible, &:active { outline-color: var(--color-text-primary); }

		&::before{
			pointer-events: none;
			content: attr(XR-placeholder);
			color: hsla(var(--color-main-hue), 10%, var(--color-main-lightness), 0.5);
		}
		&:not(:empty)::before { display: none; }

		&[XR-state] {
			&[XR-state="editing"] { outline-color: var(--color-text-primary); }

			&[XR-state="in_progress"] {
				animation: XR_editable_pulse 1s infinite;
				pointer-events: none;
			}

			&[XR-state="success"] { outline-color: var(--color-success); }
			&[XR-state="info"] { outline-color: var(--color-info); }
			&[XR-state="warning"] { outline-color: var(--color-warning); }
			&[XR-state="important"] { outline-color: var(--color-important); }
			&[XR-state="error"] { outline-color: var(--color-error); }
			&[XR-state="urgent"] { outline-color: var(--color-urgent); }
		}
	}

	@keyframes XR_editable_pulse {
		0%, 100% { outline-color: var(--color-warning); }
		50% { outline-color: transparent; }
	}
}