@forward 'aria_labels';

$high: var(--color-high);
$low: var(--color-low);
$high-trans: var(--color-high-trans);
$low-trans: var(--color-low-trans);
$mid: var(--color-mid);
$mid-trans: var(--color-mid-trans);
$alert: var(--color-alert);
$alert-trans: var(--color-alert-trans);
$font: var(--nier-font);
$selector-img: var(--selector-img);
$high-mid: var(--color-high-mid);
$selector-img-invert: var(--selector-img-invert);
$nier-border: var(--nier-border);

@mixin boxify($color, $drop-color, $drop) {
	background: $color;
	border-radius: 0;
	box-shadow: $drop $drop 0 $drop-color;

	&:hover {
		box-shadow: $drop $drop 0 $drop-color;
	}
}

@mixin remask($url, $color) {
	mask: url($url);
	background: $color !important;
}

@mixin buttonify($base-bg, $base-text, $hover-bg, $hover-text) {
	border-radius: 0;
	border-color: transparent;
	background-color: $base-bg;
	color: $base-text;
	transition: all 0.1s;

	&:hover,
	&:active {
		border-color: transparent;
		background-color: $hover-bg;
		color: $hover-text ;
	}
}

@mixin titlify($left-offset, $up-offset) {
	letter-spacing: 1px;
	text-shadow: $left-offset $up-offset 0 $mid;
	padding-right: 3px;
	padding-bottom: 3px;
}

@keyframes staticBackground {
	0% {
		background-color: $low;
		opacity: 1;
	}

	100% {
		background-color: $low;
		opacity: 0.75;
	}
}

@keyframes pulsingBackground {
	0% {
		background-color: $low;
	}

	20% {
		background-color: $low;
		opacity: 100%;
	}

	50% {
		background-color: $low;
		opacity: 65%;
	}

	80% {
		background-color: $low;
		opacity: 100%;
	}

	100% {
		background-color: $low;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes shift {
	0% {
		transform: translate(-15%, -50%);
	}

	50% {
		transform: translate(5%, -50%);
	}

	100% {
		transform: translate(-15%, -50%);
	}
}

@keyframes y-spin {
	0% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(360deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}