@font-face {
	font-family: EurostileBold;
	src: url("../external/fonts/eurostilefree/EurostileBold.ttf");
}

:root {
	--background-green: rgb(165, 226, 69);
	--focus-start: rgba(63, 87, 27, 1);
	--focus-end: rgba(63, 87, 27, 0.5);

	--corner-thickness: 0.2rem;
	--corner-color: #0000 25%, white 0;

	--disabled-thickness: 0.25rem;
	--disabled-color: #0000 90deg, red 0;
}

* {
	font-family: EurostileBold;
	text-shadow: 0px 1px, 1px 0px, 1px 1px;
	letter-spacing: 1px;
	/*font-weight: bold;*/
}

.main-header {
	padding-block: 0px;
	background-color: var(--background-green);
	margin-top: 1rem;
}

.main-title {
	color: black;
	margin-left: 1rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.save-info {
	color: white;
	border-bottom: 6px dashed var(--background-green);
	margin-bottom: 1rem;
	max-height: 25%;
}

/*https://codepen.io/alvarotrigo/pen/yLxxxJZ*/

@keyframes save-info-background-animation {
	0% {
		background-position: initial;
	}

	100% {
		background-position: 100px 0px;
	}
}

.save-info-background {
	overflow: auto;
	background: repeating-linear-gradient(-45deg,
			var(--focus-start),
			var(--focus-start) 5%,
			var(--focus-end) 5%,
			var(--focus-end) 10%);
	background-size: 100px 100px;
	animation: save-info-background-animation 2.5s linear infinite;
	height: 100%;
	padding: 0em 1em 0em 1em;
}

@keyframes focus-animation {
	0% {
		background-color: var(--focus-start);
	}

	25% {
		background-color: var(--focus-start);
	}

	75% {
		background-color: var(--focus-end);
	}

	100% {
		background-color: var(--focus-end);
	}
}

.button-icon {
	background-color: transparent;
	border: 0px;
	border-radius: 0%;
	padding: 0.25rem;
	height: fit-content;
	position: relative;
	box-shadow: none;
}

.options-list {
	color: white;
	background-color: black;
	border: 0px;
	border-radius: 0%;
	box-shadow: none;
	margin: 0px 0px 0px 0px;
}

/*https://css-tip.com/corner-only-border/*/

@keyframes corner-animation {
	0% {
		background:
			conic-gradient(from 90deg at top var(--corner-thickness) left var(--corner-thickness), var(--corner-color)) 5% 5%,
			conic-gradient(from 180deg at top var(--corner-thickness) right var(--corner-thickness), var(--corner-color)) 95% 5%,
			conic-gradient(from 0deg at bottom var(--corner-thickness) left var(--corner-thickness), var(--corner-color)) 5% 95%,
			conic-gradient(from -90deg at bottom var(--corner-thickness) right var(--corner-thickness), var(--corner-color)) 95% 95%;
		background-size: 20% 20%;
		background-repeat: no-repeat;
	}

	100% {
		background:
			conic-gradient(from 90deg at top var(--corner-thickness) left var(--corner-thickness), var(--corner-color)) 0 0,
			conic-gradient(from 180deg at top var(--corner-thickness) right var(--corner-thickness), var(--corner-color)) 100% 0,
			conic-gradient(from 0deg at bottom var(--corner-thickness) left var(--corner-thickness), var(--corner-color)) 0 100%,
			conic-gradient(from -90deg at bottom var(--corner-thickness) right var(--corner-thickness), var(--corner-color)) 100% 100%;
		background-size: 20% 20%;
		background-repeat: no-repeat;
	}
}

.disabled-button::after {
	left: 0;
	top: 0;
	content: "";
	transform: rotate(45deg);
	position: absolute;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	background:
		conic-gradient(from 90deg at var(--disabled-thickness) var(--disabled-thickness),
			var(--disabled-color)) calc(100% + var(--disabled-thickness)/2) calc(100% + var(--disabled-thickness)/2) / calc(50% + var(--disabled-thickness)) calc(50% + var(--disabled-thickness));
}

.button-icon::before {
	content: "";
	height: 120%;
	width: 120%;
	display: block;
	top: -10%;
	left: -10%;
	position: absolute;
}

.button-icon:hover::before,
.button-icon:focus::before {
	animation: corner-animation 0.5s linear 0s infinite alternate-reverse none;
}

/* Replaces default PicoCSS tooltip */

[data-tooltip]::before {
	background: black;
	color: white;
	outline: 4px dashed var(--background-green);
	border-bottom: none;
	border-radius: 0%;
}

[data-tooltip]::after {
	display: none;
}

[data-tooltip]:not(a, button, input) {
	border-bottom: 4px dashed var(--background-green);
}

.data-item:hover,
.data-header:hover,
.data-header:focus,
.data-item:has(.data-input:focus) {
	background-color: transparent;
	animation: focus-animation 0.75s linear 0s infinite alternate-reverse none;
	box-shadow: none;
	outline: none !important;
}

.save-data {
	color: white;
	height: 100%;
	overflow: auto;
	scrollbar-color: var(--background-green) black;
}

.save-data::-webkit-scrollbar {
	width: 0.5rem;
	background-color: black;
}

.save-data::-webkit-scrollbar-thumb {
	background-color: var(--background-green);
}

.data-list {
	list-style: none;
	padding: 0px;
	color: var(--background-green);
}

.data-header {
	padding-left: 1rem;
	padding-right: 1rem !important;
	color: var(--background-green) !important;
}

.data-item {
	align-items: center;
	display: grid;
	padding-left: 1rem;
	grid-auto-flow: column;
}

.data-content {
	vertical-align: middle;
}

.data-input {
	color: white;
	padding: 0px !important;
	margin: 0px !important;
	padding-right: 1rem !important;
	text-align: center;
	border: none;
	outline: none;
	width: 15rem !important;
	justify-self: right;
	box-shadow: none;
	background-color: transparent;
}

.data-content::before {
	content: "";
	background-color: var(--background-green);
	display: inline-block;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	width: 1rem;
	height: 1rem;
}

.data-item:hover>.data-content::before,
.data-item:has(.data-input:focus) .data-content::before {
	background: radial-gradient(ellipse at center, black 0%, black 47%, black 47%, var(--background-green) 47%, var(--background-green) 48%);
}

.data-item:hover>.data-content,
.data-item:has(.data-input:focus) .data-content {
	color: white;
}

.icon {
	width: 64px;
	height: 64px;
}