@use "@styles/var";
@use "@styles/color";
@use "sass:color" as sass-color;

/* Variables transferred to JS */

:root {
	--space: #{color.$space};
	--horizon: #{color.$horizon};
	--track-main: #{color.$main-track};
	--track-off-track: #{color.$off-track};
	--track-hitchhiking: #{color.$hitchhiking};
	--track-width: 4px;
	--button-width: 36px;
	--trans-quick: #{var.$trans-quick};
	--trans-slow: #{var.$trans-slow};
	--zoom-scale: #{var.$zoom-scale};
}

/* Animations */

@-webkit-keyframes fadeIn {
	from { opacity: 0.3; }
}
@-moz-keyframes fadeIn {
	from { opacity: 0.3; }
}
@-ms-keyframes fadeIn {
	from { opacity: 0.3; }
}
@-o-keyframes fadeIn {
	from { opacity: 0.3; }
}
@keyframes fadeIn {
	from { opacity: 0.3; }
}

@mixin animate($anim) {
	-webkit-animation: $anim;
	-moz-animation: $anim;
	-ms-animation: $anim;
	-o-animation: $anim;
	animation: $anim;
}

.flicker {
	@include animate(fadeIn var.$trans-slow infinite alternate);
}

@mixin no-text-overflow() {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

@keyframes spin {
	0% {
		transform: scale(1);
	}
	1.25% {
		transform: scale(var.$zoom-scale);
	}
	2.5% {
		transform: scale(1);
		transform:rotate(0deg);
	}
	5% {
		transform:rotate(360deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

/* Common objects */

@mixin font() {
	font:
		400
		14px/normal
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		sans-serif;
}

@mixin topo-bg($gradient, $direction, $color, $pos1:0, $pos2:100%) {
	@if $gradient != linear and $gradient != radial {
		@error 'topo-bg gradient must be linear or radial.';
	}

	background: 
		#{$gradient}-gradient(
			$direction,
			$color $pos1,
			sass-color.adjust($color, $alpha: -0.3) $pos2
		),
		url(../images/logo_bg.webp)
		85% 85% / 100%;
}

*:focus {
	outline: 0px none transparent;
}

[title]:not(a):not(.clickable) {
	cursor: default;
}

.clickable {
	cursor: pointer;
}

textarea:focus, input:focus {
	outline: 1px solid color.$default-bg;
}

body, textarea, input, button, a.button, select {
	@include font();
	margin: 0;
	color: color.$default;
}

textarea {
	resize: none;
}

a.button {
	text-decoration: none;
	display: inline-block;
}

button, a.button {
	@extend .clickable;
	font-weight: bold;
	color: color.$default;
	background: color.$default-bg;

	&:hover {
		color: color.$default-inv;
		background: color.$default-inv-bg;
	}
}

input, textarea, button, a.button {
	border: none;
	padding: var.$elem-spacing var.$block-spacing;
	border-radius: var.$block-radius;
}

h1 {
	font-size: 2em;
	font-weight: bold;
	margin: var.$block-spacing 0 var.$elem-spacing;
}

h2 {
	font-size: 1.2em;
	font-weight: bold;
	margin: var.$block-spacing 0 var.$elem-spacing;
}

.track {
	.line {
		width: 1.5rem;
		height: var(--track-width);
		display: inline-block;
		border-radius: var.$block-radius;
		vertical-align: center;
	}

	.desc {
		margin-left: var.$elem-spacing;
	}
}

/* Feedback */

.feedback {
	p {
		margin: 0 0 var.$block-spacing 0;
		&.error {
			color: color.$error;
		}
		&.warning {
			color: color.$warning;
		}
		&.success {
			color: color.$success;
		}
	}
}
