/*--------------------------------------------------------------
>>> STYLES
--------------------------------------------------------------*/

.satus-base {
	--satus-light: 255, 255, 255;
    --satus-primary: #3691bf;
    --satus-base-background: #151528;
    --satus-base-foreground: #fafafa;
    --satus-header-background: #313172;
    --satus-header-shadow: transparent;
    --satus-section-background: #232343;
    --satus-section-border: #232343;
    --satus-modal-background: #313172;
    --satus-modal-shadow: 0 1px 4px #22222f;
    --satus-switch-track: #52527a;
}

.satus-alert--success {
	overflow: hidden;

	padding: 0;
}

.satus-alert--success>.satus-switch {
	width: 100%;
	height: 48px;
	padding: 8px 12px;

	transition: background-color .3s cubic-bezier(.25, .8, .5, 1);

	--satus-switch-track: hsl(var(--satus-alert-hue-success), 56%, 34%);
	--satus-switch-track--checked: hsl(var(--satus-alert-hue-success), 56%, 48%);
	--satus-switch-thumb: rgba(255, 255, 255, .88);
}

.satus-alert--success>.satus-switch:hover {
	background-color: rgba(var(--satus-light), .04);
}

body[tab] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

body[tab] .satus-base {
    width: 100%;
    height: 100%;
}

body[tab] .satus-alert {
	display: none;
}

.satus-text-field--css-editor {
	height: 100%;
	padding: 12px 0;
}

.satus-modal--vertical-menu .satus-modal__surface {
	max-width: 200px;
}