:root {
	--font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

	--05: 0.03125rem;
	--2: 0.125rem;
	--3: 0.1875rem;
	--4: 0.25rem;
	--6: 0.375rem;
	--8: 0.75rem;
	--12: 0.5rem;
	--16: 1rem;
	--18: 1.125rem;
	--20: 1.25rem;
	--24: 1.5rem;
	--32: 2rem;
}

* {
	box-sizing: border-box;
	touch-action: manipulation;
}

.action-button {
	display: flex;
	align-items: center;
	gap: var(--6);
	width: fit-content;
	padding: 0.375em 0.750em;
	font-family: var(--font);
	font-size: var(--16);
	font-weight: 500;
	border: none;
	border-radius: 0.375em;
	color: var(--btn);
	background-color: var(--btn-bg);
	&:hover {
		background-color: var(--btn-bg-hover);
	}
	&[disabled] {
		pointer-events: none;
		opacity: 0.5;
		color: var(--btn-disabled);
		background-color: var(--btn-disabled-bg);
	}
	& > svg {
		flex-shrink: 0;
		width: var(--20);
		height: var(--20);
		fill: currentColor;
	}
	& > span {
		@media (max-width: 550px) {
			display: none;
		}
	}
}

.tab-button {
	padding: 0.625em 1.25em calc(0.625em - var(--3));
	font-family: var(--font);
	font-size: var(--16);
	font-weight: 400;
	letter-spacing: var(--05);
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-bottom: var(--3) solid transparent;
	background-color: transparent;
	color: var(--tab-btn);
	&.active {
		color: var(--tab-btn-active);
		border-color: currentColor;
	}
	&:not(.active) {
		cursor: pointer;
		&:hover {
			background-color: var(--tab-btn-inactive-bg);
			border-color: var(--tab-btn-inactive-border);
		}
	}
}

.hint {
	display: flex;
	align-items: center;
	gap: var(--24);
	width: fit-content;
	padding: var(--8) var(--16);
	border-radius: var(--4);
	font-family: var(--font);
	font-size: var(--16);
	color: var(--hint);
	background-color: var(--hint-bg);
	& .mobile {
		display: none;
		:root.mobile & {
			display: inline;
			& + b {
				display: none;
			}
		}
	}
	& > b {
		text-wrap: nowrap;
		text-decoration: underline;
		cursor: pointer;
	}
}

button,
input,
select,
nav {
	outline: none;
}

.hidden {
	display: none !important;
	& + hr {
		display: none !important;
	}
}