@use "app/style/variables";
@use "app/style/mixins";

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	--main-bg-color: #2b424f;
	--main-bg-color-lt: #2e4856;
	--main-bg-color-dk: #253c46;
	--main-text-color: #47b00a;
	--main-text-color-hover: #358808;
	--main-text-color-lt: #51ca0a;
	--main-text-color-dk: #358808;
	--main-content-text-color: #000;
	--main-content-text-color-muted: #272727;
	--main-content-link-color: #2e4856;
	--main-content-link-hover-color: #22353f;
	--dialog-headline-color: #2e8c02;
	--dialog-text-color: #000;
	--dialog-background-color: #f5f1e4;
	--dialog-border-color: #0d1417;
	--dialog-border-color-hover: #2e4856;
	--dialog-border-color-selected: yellow;
	--card-layout-color-border-selected: #000;
	--card-layout-color-border: #afafaf;
	--card-layout-color-bg: #2b424f;
	--card-layout-color-bg-hover: #1e2e37;
	--card-layout-color: #fff;
	--card-text-color-bg: #1e2e37;
	--card-text-color-bg-hover: #1e2e37;
	--card-text-color: #fff;
	--input-text-color: #000;
	--input-background-color: #ddd;
	--input-background-color-hover: #fff;
	--input-border-color: #8f8f8f;
	--text-fail-color: #cc919f;
	--text-disabled-color: #8d8d8d;
	--text-highlight-color: #8ec271;
	--close-color: #7c7c7c;
	--close-color-hover: #3a3a3a;
	--tile-color: #FFF9E5;
	--tile-color-border: #4b4b4b;
	--tile-color-dark: #000;
	--tile-color-border-dark: #4b4b4b;
	--preview-overlay-background: rgb(24 24 24 / 80%);
	--preview-overlay-text: #fff;
	--preview-overlay-text-shadow: #000;
	--gesture-indicator: #42a5f5;
	--overlay-popup-shadow: 5px 5px 5px 0px rgb(0 0 0 / 75%);

	width: 100%;
	background-color: var(--main-bg-color);

	@include mixins.full-height;
}

@media (prefers-color-scheme: dark) {
	html {
		--dialog-headline-color: #47b00a;
		--dialog-background-color: #1b1b1b;
		--dialog-border-color: #2f444d;
		--card-layout-color-border: #353535;
		--main-content-text-color: #ddd;
		--main-content-text-color-muted: #959494;
		--input-text-color: #ddd;
		--input-background-color: #000;
		--input-background-color-hover: #151515;
		--input-border-color: #353535;
		--main-content-link-color: #5685a8;
		--main-content-link-hover-color: #3e617a;
		--close-color: #ececec;
		--close-color-hover: #bdbdbd;
		--overlay-popup-shadow: 5px 5px 5px 0px rgb(0 0 0 / 75%);
	}
}

body {
	font-family: variables.$text-font;
	background-color: var(--main-bg-color);
	padding: 0;
	margin: 0;
	width: 100%;
	font-size: variables.$base-font-size;
	line-height: variables.$base-line-height;

	@include mixins.full-height;
}

button, select {
	border: 1px solid #afafaf;
	font-family: variables.$text-font;
	font-size: inherit;
}

input[type="radio"] {
	font-size: inherit;
	width: 0.9em;
	height: 0.9em;
	vertical-align: middle;
}

a {
	color: var(--main-content-link-color);

	&:hover {
		color: var(--main-content-link-hover-color);
	}
}

p {
	margin: 0;
	padding: 0;
}

.hidden {
	display: none;
}

.link {
	cursor: pointer;
}

.overlay {
	height: 100svh;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: rgb(0 0 0 / 20%);
	max-height: 100%;
	font-size: variables.$base-font-size * 0.9;

	button, select {
		background-color: var(--input-background-color);
		border-color: var(--input-border-color);
		color: var(--input-text-color);
		text-overflow: ellipsis;
		padding: 8px 12px;
		font-size: 0.9em;
		cursor: pointer;

		&:hover, &:active {
			background-color: var(--input-background-color-hover);
		}
	}

	@include mixins.respond-to(medium-up) {
		font-size: variables.$base-font-size * 1.1;
	}

	@include mixins.respond-to(large-up) {
		font-size: variables.$base-font-size * 1.2;
	}

	@include mixins.respond-to(huge-up) {
		font-size: variables.$base-font-size * 1.2;
	}

	@include mixins.respond-to(jumbo-up) {
		font-size: variables.$base-font-size * 2;
	}

	@include mixins.respond-to-height(small-down) {
		font-size: variables.$base-font-size * 0.9;
	}

	.overlay-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-height: 98%;
		max-width: 98%;
		margin-left: auto;
		margin-right: auto;
		border: 1px solid var(--dialog-border-color);
		background-color: var(--dialog-background-color);
		line-height: 1.2em;
		padding: 1.5em 2em;
		display: flex;
		flex-direction: column;
		border-radius: 12px;
		box-shadow: var(--overlay-popup-shadow);

		.icon-logo {
			color: red;
		}

		@include mixins.respond-to(jumbo-up) {
			border-radius: 30px;
		}

		@include mixins.respond-to(huge-up) {
			max-height: 80%;
			max-width: 80%;
		}

		@include mixins.respond-to(large-down) {
			padding: 1.3em;
		}

		@include mixins.respond-to(small-down) {
			padding: 1.5em 1em;
		}

		@include mixins.respond-to(pico-down) {
			padding: 1.5em 0.5em 1.5em 1em;
		}
	}

	.close {
		right: 8px;
		top: 8px;
		position: absolute;
		color: var(--close-color);
		cursor: pointer;
		padding: 3px;
		border-radius: 6px;

		i {
			font-size: 1.2em;
		}

		&:hover {
			color: var(--close-color-hover)
		}
	}

	&.overlay-info {
		z-index: 10010;

		.overlay-popup {
			width: 90%;
			height: 90%;
		}
	}

	&.overlay-settings {
		z-index: 10010;

		.overlay-popup {
			width: 90%;
			max-height: 90%;
			max-width: 1400px;
		}
	}

	&.overlay-newgame {
		z-index: 10010;

		.overlay-popup {
			width: 98%;
			height: 98%;
			overflow: hidden;

			@include mixins.respond-to-height(small-down) {
				padding: 10px;
			}
		}
	}

	&.overlay-message {
		.overlay-message-message {
			padding: 2em;
		}

		.overlay-popup {
			cursor: pointer;
			font-weight: 600;
			text-align: center;
			color: var(--dialog-headline-color);
			padding: 0;
			user-select: none;
			pointer-events: none;
		}
	}

	&.overlay-help {
		z-index: 10010;

		.overlay-popup {
			max-height: 90%;
			width: 90%;
			max-width: 1200px;
		}
	}
}

%clearfix:after {
	display: block;
	clear: both;
	content: '';
}
