@import './animations.css';

* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	background-color: var(--bg-normal);
	color: var(--fg-normal);
	accent-color: var(--fg-normal);
	overflow-y: scroll;
}

a {
	text-decoration: none;
	color: inherit;
}

form {
	div:has(label ~ input),
	div:has(label ~ textarea),
	div:has(label ~ select) {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
}

input,
button,
select,
textarea {
	border: var(--border-accent);
	background-color: var(--bg-normal);
	font: inherit;
	color: inherit;
	accent-color: inherit;
}

input,
button,
select {
	border-radius: 0.5em;
	padding: 0.4em 0.75em;
}

button {
	cursor: pointer;

	&:hover {
		background-color: hsl(var(--hue) 15 calc(var(--bg-light) + (var(--light-step) * 2)));
	}
}

button:where(.reset) {
	border-radius: unset;
	border: none;
	background-color: unset;
	padding: unset;

	&:hover {
		background-color: unset;
	}
}

input,
textarea {
	outline: none;
}

label.checkbox {
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
	border: var(--border-accent);
	border-radius: 0.5em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

input[type='checkbox'] {
	display: none;
}

select,
::picker(select) {
	appearance: base-select;
}

::picker(select) {
	border: var(--border-accent);
	padding: 1em;
	border-radius: 0.5em;
	background-color: var(--bg-menu);
}

option {
	padding: 0.25em 0;
	border-radius: 0.5em;
}

option:hover {
	background-color: var(--bg-alt);
}

code,
pre {
	background-color: var(--bg-menu);
	padding: 1em;
	border-radius: 0.5em;
}

details {
	& > summary {
		list-style: none;
		cursor: pointer;

		&::-webkit-details-marker {
			display: none;
		}

		&::before {
			content: '';
			display: inline-block;
			width: 1em;
			height: 1em;
			background-color: currentColor;
			mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/></svg>");
			mask-size: contain;
			mask-repeat: no-repeat;
			mask-position: center;
			margin-right: 0.5em;
			vertical-align: -0.125em;
		}
	}

	&:open > summary::before {
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/></svg>");
	}
}

dialog {
	border-radius: 1em;
	background: var(--bg-menu);
	border: 1px solid #8888;
	padding: 1em;
	max-width: calc(100% - 2em);
	word-wrap: normal;

	form {
		max-width: 100%;
	}
}

dialog:modal::backdrop {
	background: #0003;
}

dialog form {
	display: contents;
}

progress {
	appearance: none;
	height: 0.5em;
	border-radius: 0.5em;
	overflow: hidden;
	background-color: var(--bg-normal);
	border: var(--border-accent);
}

progress::-webkit-progress-bar {
	background-color: transparent;
}

progress::-webkit-progress-value {
	background-color: hsl(0 0 var(--fg-light));
}

progress::-moz-progress-bar {
	background-color: hsl(0 0 var(--fg-light));
}

::selection,
::target-text {
	background-color: var(--bg-accent);
}

:is(p, span, i).error {
	color: var(--fg-error);
}

input.error {
	border: var(--border-error);
}

div.error {
	padding: 1em;
	border-radius: 0.5em;
	background-color: var(--bg-error);
	border: var(--border-error);
}

div.warning {
	padding: 1em;
	border-radius: 0.5em;
	background-color: var(--bg-warning);
	border: var(--border-warning);
}

div.success {
	padding: 1em;
	border-radius: 0.5em;
	background-color: var(--bg-success);
	border: var(--border-success);
}

.subtle {
	opacity: 69%;
	font-size: 0.9em;
}

.flex-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 1em;
	overflow-y: scroll;
}

.danger {
	border: var(--border-error);
	background-color: hsl(0 20 calc(var(--bg-light) + var(--light-step)));
	color: hsl(0 33 var(--fg-light));
	--fill: hsl(0 33 var(--fg-light));
	accent-color: hsl(0 33 var(--fg-light));
}

.danger:hover {
	background-color: hsl(0 20 calc(var(--bg-light) + (var(--light-step) * 3)));
}

:disabled,
.disabled {
	cursor: not-allowed;
	color: var(--fg-disabled);
	accent-color: var(--fg-disabled);
	border: var(--border-disabled);
}

:popover-open {
	border: 1px solid hsl(var(--hue) 10 calc(var(--fg-light) - var(--light-step)));
	background-color: hsl(from var(--bg-menu) h s l / 95%);
	border-radius: 0.5em;
	padding: 0.25em;
	margin: 0;
	inset: auto;
	display: flex;
	flex-direction: column;
	gap: 0.1em;

	.menu-item {
		display: inline-flex;
		align-items: center;
		padding: 0.5em 0.75em;
		gap: 1em;
		border-radius: 0.5em;
		user-select: none;

		&:hover {
			background-color: var(--bg-strong);
			cursor: pointer;
		}
	}
}

.icon-text {
	display: inline-flex;
	align-items: center;
	gap: 1em;
}

a:has(button, div) {
	display: contents;
}

.version {
	font-family: monospace;
	font-size: 0.9em;
	color: #aaa;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	.version {
		margin-left: 1em;
	}
}

.version::before {
	content: 'v';
	color: #888;
}

.inline-button {
	display: inline-flex;
	width: fit-content;

	@media (width < 700px) {
		width: 80%;
		align-self: center;
		display: flex;
		justify-content: center;
	}
}

.inline-button-container {
	margin-top: 2em;
	display: flex;
	gap: 1em;

	@media (width < 700px) {
		flex-direction: column;
		align-items: center;
	}
}

#toasts {
	position: absolute;
	right: 1em;
	top: 1em;
	width: 0;
	height: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 1em;
	text-align: right;
	align-items: end;
	z-index: 25;
}

div.toast {
	width: max-content;
	padding: 0.4em 0.8em;
	border-radius: 0.5em;

	&:hover {
		animation-play-state: paused;
	}

	&.plain,
	&.info {
		border: var(--border-accent);
		background-color: var(--bg-accent);
	}
}

@media (width >= 700px) {
	.mobile-only {
		display: none;
	}
}

@media (width < 700px) {
	.mobile-hide {
		display: none !important;
	}

	.mobile-button {
		border-radius: 0.5em;
		border: var(--border-accent);
		background-color: var(--bg-normal);
		padding: 0.5em 1em;
		cursor: pointer;
	}

	.mobile-subtle {
		opacity: 69%;
		font-size: 0.9em;
	}

	.mobile-button:hover {
		background-color: var(--bg-accent);
	}

	.mobile-float-left {
		position: fixed;
		bottom: 1em;
		left: 1em;
		z-index: 4;
		font-size: 1.25em;
	}

	.mobile-float-right {
		position: fixed;
		bottom: 1em;
		right: 1em;
		z-index: 4;
		font-size: 1.25em;
	}
}