/* Remove default */

input,
button,
select {
	all: unset;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}

/* Global style */

:root {
	/* Colors */
	--color-light-0: #e2dbdb;
	--color-dark-0: #0a0909;
	--color-dark-1: #1a1818;
	--color-dark-2: #333030;
	--color-red-0: #d64747;

	/* SVG images */
	--svg-load: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-dasharray='16' stroke-dashoffset='16' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.2s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='1.5s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
	--svg-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14'/%3E%3C/svg%3E");
	--svg-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z'/%3E%3C/svg%3E");
	--svg-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
	--svg-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m8 10.207l3.854-3.853l-.707-.708L8 8.793L4.854 5.646l-.708.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
	--svg-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m8 5.293l3.854 3.853l-.707.708L8 6.707L4.854 9.854l-.708-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
	--svg-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z'/%3E%3C/svg%3E");
	--svg-star-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.1 21.5L2.4 1.7L1.1 3l5.8 5.8l-4.9.4L7.5 14l-1.6 7l6.2-3.7l6.2 3.7l-.3-1.2l2.9 2.9zm-6.3-3.8L12 15.4l-3.8 2.3l1-4.3l-3.3-2.9l2.5-.2zM11.2 8L10 6.8L12 2l2.8 6.6l7.2.6l-5.1 4.4l-1.1-1.1l2.4-2l-4.4-.4l-1.7-4z'/%3E%3C/svg%3E");
	--svg-star-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03z'/%3E%3C/svg%3E");
	--svg-star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E");
	--svg-star-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M32 64a8 8 0 0 1 8-8h176a8 8 0 0 1 0 16H40a8 8 0 0 1-8-8m8 72h56a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m72 48H40a8 8 0 0 0 0 16h72a8 8 0 0 0 0-16m125.09-40.22l-22.52 18.59l6.86 27.71a8 8 0 0 1-11.82 8.81L184 183.82l-25.61 15.07a8 8 0 0 1-11.82-8.81l6.85-27.71l-22.51-18.59a8 8 0 0 1 4.47-14.14l29.84-2.31l11.43-26.5a8 8 0 0 1 14.7 0l11.43 26.5l29.84 2.31a8 8 0 0 1 4.47 14.14m-25.47.28l-14.89-1.15a8 8 0 0 1-6.73-4.8l-6-13.92l-6 13.92a8 8 0 0 1-6.73 4.8l-14.89 1.15l11.11 9.18a8 8 0 0 1 2.68 8.09l-3.5 14.12l13.27-7.81a8 8 0 0 1 8.12 0l13.27 7.81l-3.5-14.12a8 8 0 0 1 2.68-8.09Z'/%3E%3C/svg%3E");
}

* {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 100;
	color: var(--color-light-0);
}

/* Generic style */

::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--color-light-0), transparent 50%);
	border-radius: 1em;
}

::-webkit-scrollbar,
::-webkit-scrollbar-corner {
	background: transparent;
	width: 0.2em;
}

input {
	width: 100%;

	/* Fix autocomplete horride color */
	&:-webkit-autofill,
	&:-webkit-autofill:focus {
		transition-delay: calc(infinity * 1s);
	}
}

@keyframes click {
	20% {
		transform: scale(0.95);
	}
	50% {
		transform: scale(1.01);
	}
}

:valid button:active {
	animation: click 0.4s ease-in-out;
}

button,
select {
	cursor: pointer;
	display: inline-flex;
	white-space: pre;
	align-items: center;
	gap: 0.5em;
	user-select: none;

	&::after {
		content: "";
		width: 1em;
		height: 1em;
		background-color: currentColor;
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}
}

form:invalid [type="submit"] {
	opacity: 0.2;
}

input,
select,
button,
.box {
	padding: 0.4em 0.8em;
	border-radius: 0.5em;
}

input,
select,
.box {
	background: var(--color-dark-0);
}

::placeholder,
:invalid {
	color: color-mix(in srgb, var(--color-light-0), transparent 60%);
}

:disabled {
	opacity: 0.5;
}

select {
	border: none;
	outline: none;

	&:-moz-focusring,
	&::-moz-focus-inner {
		color: transparent !important;
		text-shadow: 0 0 0 #000 !important;
		background-image: none !important;
		border: 0;
	}
}

[aria-label] {
	display: flex;
	position: relative;
	padding-top: 1.6rem;

	&::before {
		position: absolute;
		content: attr(aria-label);
		font-size: 0.8rem;
		opacity: 0.5;
		top: 0.2rem;
	}

	& > *:is(input, select) {
		flex: 1;
	}
}

a {
	text-underline-offset: 0.2em;
}

select {
	background-image: var(--svg-down);
	background-position: calc(100% - 0.5em) 0.75em;
	background-repeat: no-repeat;
	background-blend-mode: lighten;

	&:focus {
		background-image: var(--svg-up);
	}
}

/* Specific style */

body {
	display: flex;
	height: 100vh;
	max-height: 100vh;
	background: var(--color-dark-0);
}

main {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr minmax(20em, 0.25fr);
}

canvas {
	width: 100%;
	height: 100%;
}

nav {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	justify-content: space-between;
	padding: 1em;
	box-sizing: border-box;
	width: 100%;
	background: var(--color-dark-1);

	& > * {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}
}

form {
	& > * {
		display: flex;
		gap: 0.5em;
	}

	button:not(:empty) {
		color: var(--color-dark-0);
		background: var(--color-light-0);
		width: fit-content;

		&[type="submit"]::after {
			mask-image: var(--svg-search);
		}

		&[name="add-option"] {
			color: var(--color-light-0);
			background-color: var(--color-dark-2);

			&::after {
				mask-image: var(--svg-add);
			}
		}
	}

	[name="url"] ~ button {
		background: var(--color-dark-2);

		&[name="toggle-bookmark"] {
			&::after {
				mask-image: var(--svg-star-outline);
			}

			&.bookmarked::after {
				mask-image: var(--svg-star-fill);
			}
		}

		&[name="open-bookmark"]::after {
			mask-image: var(--svg-star-list);
		}
	}

	[name="options"] {
		&,
		& > ul {
			display: flex;
			flex-direction: column;
			gap: 0.4em;
		}

		ul:empty {
			display: none;
		}

		button:active {
			animation: click 0.4s ease-in-out;
		}

		li {
			--border: 1px solid var(--color-dark-2);

			display: grid;
			grid-template-areas: "n t" "v v";
			grid-template-columns: 1fr;
			border: var(--border);
			background: var(--color-dark-0);
			border-radius: 0.5em;
			overflow: hidden;

			* {
				border-radius: 0;
			}

			:nth-child(1),
			:nth-child(2) {
				border-bottom: var(--border);
			}

			:nth-child(2) {
				border-left: var(--border);
			}

			:last-child {
				grid-area: v;
			}

			button::after {
				mask-image: var(--svg-trash);
				color: var(--color-red-0);
			}

			&:first-child button {
				display: none;
			}
		}
	}

	[name="satellites"] {
		&,
		& > ul {
			display: flex;
		}

		& > ul {
			flex-direction: column;
			overflow-y: scroll;
			max-height: 16rem;
			flex: 1;
			gap: 0.3em;
		}

		/* Don't show till the prompt is used */
		&:not([data-total-items]) {
			display: none;
		}

		&:not(:empty)::before {
			content: attr(data-total-items) " satellite(s) found";
		}
	}

	&.loading {
		--svg-search: var(--svg-load);
	}
}

dialog {
	--border: 1px solid var(--color-dark-2);
	--padx: 1rem;
	--spacex: 0.5rem;
	--spacey: 0.4rem;

	margin: auto;
	border: var(--border);
	background-color: color-mix(in srgb, var(--color-dark-1), transparent 5%);
	padding: 0.5rem 0;
	border-radius: 0.5rem;
	max-width: 80%;
	display: flex;
	gap: 1em;
	visibility: hidden;

	&:modal {
		visibility: visible;
	}

	button {
		padding: 0;
	}

	form {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
		padding: 0 var(--padx);

		button::after {
			mask-image: var(--svg-close);
		}
	}

	ul {
		display: flex;
		flex-direction: column;
		border-radius: 0.5rem;
		padding: 0 var(--spacex);
		gap: calc(var(--spacey) * 2);

		&:empty::before {
			content: "No bookmarks found";
			padding: calc(var(--padx) - var(--spacex));
		}

		button {
			background: none;

			&::after {
				mask-image: var(--svg-star-dashed);
				color: var(--color-red-0);
			}
		}

		li {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;
			padding: calc(var(--padx) - var(--spacex));
			gap: 1rem;
			cursor: pointer;
			position: relative;
			border-radius: 0.4rem;

			&:not(:first-child)::before {
				position: absolute;
				bottom: calc(100% + var(--spacey) - 1px);
				left: 0;
				content: "";
				width: 100%;
				border-top: var(--border);
			}

			&:hover {
				background-color: color-mix(in srgb, var(--color-dark-2), transparent 50%);
			}
		}
	}

	&::backdrop {
		backdrop-filter: blur(1em) brightness(0.75);
	}
}