/*
 * SPDX-FileCopyrightText: 2022 Libor Polčák
 * SPDX-FileCopyrightText: 2021-2022 Ana Isabel Carvalho
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

:root {
	--text-color: #333333; /* Very dark grey */
	--color-background: white;
	--color-background-input: white;
	--light-logo: #f5ab8d; /* Logo light red */
	--light-logo-contrast: #333333; /* Very dark grey */
	--dark-logo: #e76f51; /* Logo dark red */
	--dark-logo-contrast: white;
	--help-icon-color: white;
	--help-icon-background: blue;
	--title-color: var(--dark-logo);
	--good-news: green; /* Combine with background color */
	--separator-color: grey; /* Combine with background color */
	--button-color-background: var(--dark-logo);
	--button-color-foreground: white;
	--button-active-color-foreground: white;
	--button-active-color-background: var(--dark-logo);
	--button-active-color-border: black;
	--button-disabled-color-background: #888;
	--button-disabled-color-foreground: lightgray;
	--button-hover-color-background: var(--light-logo);
	--button-hover-color-foreground: black;
	--button-level-color-background: lightgray;
	--button-level-color-foreground: black;
	--tlev-color: var(--dark-logo);
	--menu-color: blue;
	--menu-background: white;
	--attention-color: var(--dark-logo-contrast);
	--attention-background: var(--dark-logo);
	--slider-color-background: white;
	--slider-color-foreground: black;
	--slider-on-color-background: var(--light-logo);
	--slider-off-color-background: gray;
	--slider-secondary-text-on-color: white;
	--slider-secondary-text-off-color: black;
	--slider-on-hover-color-background: var(--dark-logo);
	--slider-on-hover-color-foreground: white;
	--slider-off-hover-color-background: rgb(69, 69, 69);
	--slider-off-hover-color-foreground: white;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--text-color: #e8e6e3; /* Almost white */
		--color-background: #333333; /* Very very dark grey */
		--color-background-input: var(--color-background);
		--help-icon-color: blue;
		--help-icon-background: white;
		--title-color: var(--light-logo);
		--good-news: lightgreen;
		--separator-color: lightgrey;
		--menu-color: lightblue;
		--menu-background: var(--color-background);
		--attention-color: var(--light-logo-contrast);
		--attention-background: var(--light-logo);
		--button-active-color-border: white;
	}

.level {
	background-color: var(--button-level-color-background);
	color: var(--button-level-color-foreground);
}

.level:hover {
	background-color: var(--button-hover-color-background);
	color: var(--button-hover-color-foreground);
}

.level.active {
	background-color: var(--button-active-color-background);
	color: var(--button-active-color-foreground);
}
}

body {
	color: var(--text-color);
	background-color: var(--color-background);
}

input[type=text], select, textarea {
	color: var(--text-color);
	background-color: var(--color-background-input);
}

button, .js-toggle {
	background: var(--button-color-background);
	border-radius: 5px;
	box-shadow: var(--button-color-background)s 0 10px 20px -10px;
	cursor: pointer;
	font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
	width: fit-content;
	padding: 5px;
	margin: 2px 2px 2px 2px;
	outline: 0 solid transparent;
	border: 0 none;
	color: var(--button-color-foreground);
	font-weight: bold;
}

button:disabled {
	background-color: var(--button-disabled-color-background);
	color: var(--button-disabled-color-foreground);
	visibility: hidden;
}

button:hover:disabled {
	cursor: not-allowed;
}

button:hover:not(:disabled) {
	cursor: pointer;
	background-color: var(--button-hover-color-background);
	color: var(--button-hover-color-foreground);
}

#levels-list button {
	margin: 0.5ex;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--title-color);
}

.level {
	font-weight: bold;
	border-radius: 0.5ex;
	background-color: var(--button-level-color-background);
	color: var(--button-level-color-foreground);
}

.level:hover {
	cursor: pointer;
	background-color: var(--button-hover-color-background);
	color: var(--button-hover-color-foreground);
}

.active {
	background-color: var(--button-active-color-background);
    color: var(--button-active-color-foreground);
	border: 2px solid var(--button-active-color-border);
}

.help {
	margin-left: 0.5em;
	background-color: var(--help-icon-background);
	color: var(--help-icon-color);
	border-radius: 10px;
	font-weight: bold;
}

.hidden_descr {
	display: none !important;
}

.explainer {
	grid-column-start: 1;
	grid-column-end: -1;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--separator-color);
}

a:link, a:visited {
	color: var(--title-color);
}

a:hover, a:active {
	color: var(--text-color);
}

/******************************************************************************
 * Slider
 */
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 30px;
	margin-left: 3px;
	background: var(--slider-off-color-background);
	border-radius: 100px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* ON/OFF slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--slider-off-color-background);
	transition: 0.4s;
	-webkit-transition: 0.4s;
	color: var(--slider-color-foreground);
	font-size: 14px;
	font-weight: bold;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-radius: 100px;
}

.slider:before {
	position: absolute;
	content: "OFF";
	height: 70%;
	width: 40%;
	left: 5%;
	background-color: var(--slider-color-background);
	display: grid;
	align-content: center;
	justify-content: center;
	transition: 0.4s;
	border-radius: 10px;
}

.switch:hover .slider {
	background-color: var(--slider-off-hover-color-background);
}

.switch:hover .slider span:nth-child(2) { /* ON text (inactive when OFF) */
	color: var(--slider-off-hover-color-foreground);
}

.switch:hover input:checked + .slider {
	background-color: var(--slider-on-hover-color-background);
}

.switch:hover input:checked + .slider span:nth-child(1) { /* OFF text (inactive when ON) */
	color: var(--slider-on-hover-color-foreground);
}


.switch input:checked + .slider {
	background-color: var(--slider-on-color-background);
	color: var(--slider-secondary-text-off-color);
}

.slider span:nth-child(2) {
	color: var(--slider-secondary-text-on-color);
}

.switch input:checked + .slider:before {
	content: "ON";
	left: 55%;
	color: var(--slider-color-foreground);
}

.flex {
	display: flex;
}

.flex.align-items-center {
	align-items: center;
}

.flex.justify-content-between {
	justify-content: space-between;
}

.text-large {
	font-size: large;
}

.alert{
	background-color: var(--attention-background);
	color: var(--attention-color);
	font-weight: bold;
}

.alert a, .alert a:visited {
	color: var(--help-icon-color);
}

:root.mv3 .mv2 {
	display: none !important;
}

:root.mv2 .mv3 {
	display: none !important;
}

#mv3-devmode-required {
	border: 2px solid red;
}

:root.devmode #mv3-devmode-required {
	display: none;
}
