@use "@styles/var";
@use "@styles/color";

/* 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 0.5s infinite alternate);
}

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

@keyframes spin {
	0% {
		transform: scale(1);
	}
	1.25% {
		transform: scale(1.2);
	}
	2.5% {
		transform: scale(1);
		transform:rotate(0deg);
	}
	5% {
		transform:rotate(360deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

/* Common objects */

@mixin font() {
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		sans-serif;
}

*: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 {
	@include font();
	font-size: 14px;
	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;
}

/* Feedback */

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