@import './reset.css';
@import './xe-icons-embedded.css';
@import './xe-icons-extensions.css';
@import './xe-vertical-menu-item.css';
@import './xe-panel-tab.css';
@import './animations.css';
@import '../font/Lato.css';

a,a:hover,a:active,a:focus {
	color: var(--xe-fg);
}
a:hover { color: var(--xe-fg-select); }

html { color-scheme: dark; }
@media (prefers-color-scheme: light) {
	html { color-scheme: light; }
}

html,
:host {
	font-family: Lato, sans-serif;
	box-sizing: border-box;
	color: var(--xe-fg);
	font-size: 14px;
	position: relative;
}
* {
	box-sizing: border-box;
}

::selection {
	background: var(--xe-bg-select);
	color: var(--xe-fg-select);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--xe-bg-1);
}
::-webkit-scrollbar-thumb {
	background: var(--xe-bg-2);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--xe-bg-3);
}
::-webkit-scrollbar-thumb:hover:active {
	background: var(--xe-bg-4);
}
::-webkit-scrollbar-corner {
	background: var(--xe-bg-2);
}

*:focus {
	outline: none;
}

h3 {
	text-align: center;
	margin: .5em;
}

hr {
	border: none;
	border-bottom: 1px solid var(--xe-fg);
	opacity: .3;
	margin: .5em 0;
}

.input,
input,
select,
textarea {
	color: var(--xe-fg);
	background: var(--xe-bg-1);
	overflow: hidden;
	padding: .5em;
	border: none;
}
input[type=number]::-webkit-inner-spin-button {
	margin: -.5em;
}

.input:focus, input:not([type="range"]):focus, select:focus, textarea:focus,
.button:focus, button:focus,
[tabindex]:not([tabindex="-1"]):focus {
	border: none;
	outline: 1px solid var(--xe-fg-accent);
	outline-offset: -1px;
}
.input:focus, input:not([type="range"]):focus, select:focus, textarea:focus,
.button:focus, button:focus {
	background: var(--xe-bg-2);
}

button[disabled],
.disabled {
	opacity: var(--xe-opacity-disabled);
}

a.button {
	text-decoration: none;
	cursor: default;
}
.button,
button {
	text-align: center;
	color: var(--xe-fg);
	background: var(--xe-bg-1);
	padding: .3em 1em;
	border: none;
}
.button.floating,
button.floating {
	background: transparent;
	border: none;
}
.button:not([disabled]):hover,
button:not([disabled]):hover,
xe-toggle:hover,
.active {
	filter: brightness(1.2);
}
button[selected] {
	background: var(--xe-fg-accent);
}

xe-toggle:not([disabled]):active,
select:not([disabled]):active {
	background: var(--xe-bg-2);
}
button:not([disabled]):active {
	background: var(--xe-bg);
}


button[class*="button-"]:hover,
.button[class*="button-"]:hover {
	filter: brightness(1.1);
}
button[class*="button-"]:active,
.button[class*="button-"]:active {
	filter: brightness(.8);
}
.button-info,
.button-info:hover {
	background: var(--xe-bg-info)!important;
	color: var(--xe-fg-info);
}
.button-info:focus {
	outline: 1px solid var(--xe-fg-info);
}
.button-success,
.button-success:hover {
	background: var(--xe-bg-success)!important;
	color: var(--xe-fg-success);
}
.button-success:focus {
	outline: 1px solid var(--xe-fg-success);
}
.button-warning,
.button-warning:hover {
	background: var(--xe-bg-warning)!important;
	color: var(--xe-fg-warning);
}
.button-warning:focus {
	outline: 1px solid var(--xe-fg-warning);
}
.button-error,
.button-error:hover {
	background: var(--xe-bg-error)!important;
	color: var(--xe-fg-error);
}
.button-error:focus {
	outline: 1px solid var(--xe-fg-error);
}

.button-contrast {
	filter: brightness(1.25);
}
@media (prefers-color-scheme: light) {
	.button-contrast {
		filter: brightness(.75);
	}
}

xe-toggle {
	text-align: center;
	cursor: pointer;
	display: inline-block;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: var(--xe-bg-1);
	border-radius: 100em;
	height: 1em;
	width: 1em;
	box-shadow: 0 0 .5em rgba(0,0,0,.5);
	margin-top:-.25em;
}
input[type="range"]:focus::-webkit-slider-thumb {
	border: 1px solid var(--xe-fg-accent);
}
input[type="range"]:active::-webkit-slider-thumb {
	background: var(--xe-bg-2);
}
input[type="range"]:hover::-webkit-slider-thumb {
	height: 1.2em;
	width: 1.2em;
	margin-top:-.4em;
}
input[type="range"] {
	background: transparent;
	width: 100%;
	-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
	background: rgba(0,0,0,.5);
	background-size: contain;
	width: 100%;
	height: .5em;
	border-radius: 1px;
}

.flexgroup {
	display: flex;
	flex-direction: row;
}

.flexgroup > * {
	flex: 1 1 auto;
	width: 100%;
}

[hidden],.hidden {
	display: none!important;
}

.bold {
	font-weight: bold;
}