.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out !important;}
.satus-section--card:hover, .satus-select:hover, .satus-switch:hover,  .satus-switch__content:hover  {transition: background-color 0.08s ease-out !important;}

*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear !important;}  
*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear !important;}

.satus-button--general, .satus-button--appearance, .satus-button--player {
	margin-left: 9px !important;
	margin-right: -18px !important;
	max-width: 272px !important;
}
div:not([home-style="list"]) .satus-button--themes, div:not([home-style="list"]) .satus-button--playlist,div:not([home-style="list"])  .satus-button--channel, div:not([home-style="list"]) .satus-button--shortcuts {
	transform: scale(0.91);
	margin-top: -10px !important;
	margin-left: -5px !important;
	margin-right: -28px !important;
}
div:not([home-style="list"]) .satus-button--blocklist, div:not([home-style="list"]) .satus-button--analyzer {
	transform: scale(0.78);
	margin-top: -22px !important;
	margin-left: 110px !important;
	margin-right: -150px !important;
}

div[home-style="list"] .satus-button--themes, div[home-style="list"] .satus-button--playlist,div[home-style="list"]  .satus-button--channel, div[home-style="list"] .satus-button--shortcuts {
	transform: scale(0.92);
	margin-bottom: -17px !important;
	margin-left:3px !important;
	max-width: 197px !important;
	margin-top:2px !important;
}
div[home-style="list"] .satus-button--blocklist, div[home-style="list"] .satus-button--analyzer {
	transform: scale(0.75);
	margin-left: 165px !important;
	max-width: 141px !important;
	margin-top: -72px !important;
}
div[home-style="list"] .satus-button--analyzer {margin-top: -16px !important;}


/*--------------------------------------------------------------
# SCROLLBAR
--------------------------------------------------------------*/
:where([class^='satus'])::-webkit-scrollbar {width: 5px;}
:where([class^='satus']):hover {scrollbar-width: 9px;}
:where([class^='satus'])::-webkit-scrollbar:hover {width: 9px;}  
:where([class^='satus'])::-webkit-scrollbar-thumb {background: rgba(var(--satus-light), .2);}
:where([class^='satus'])::-webkit-scrollbar-thumb:hover {background: rgba(var(--satus-light), .4);}
/*--------------------------------------------------------------
# ANIMATIONS
--------------------------------------------------------------*/
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeInLeft{from{opacity:0.4;transform:translateX(-2%)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0.3;transform:translateX(2%)}to{opacity:1;transform:translateX(0)}}

@keyframes fadeOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4%)}}
@keyframes fadeOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4%)}}
@keyframes zoomIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes zoomOut{from{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}
/*--------------------------------------------------------------
>>> THEMES
--------------------------------------------------------------*/
.satus-base {
	--satus-light: 0, 20, 82;
	--satus-primary: #ff4148; 
	--satus-alert-background--error: #501616;
	--satus-alert-border--error: 1px solid #6f1f1f;
	--satus-alert-foreground--error: #d77070;
	--satus-alert-background--success: rgb(246, 180, 101, .32);
	--satus-alert-border--success: 1px solid rgb(246, 180, 101, .6);
	--satus-alert-foreground--success: rgb(184, 115, 30);
	--satus-base-background: #F4F3F2;
	--satus-base-foreground: #565e76;
	--satus-checkbox-background: #f3f4f6;
	--satus-checkbox-border: #dcdfe5;
	--satus-checkbox-foreground: rgb(255, 255, 255, .96);
	--satus-divider: rgba(var(--satus-light), .1);
	--satus-header-background: #fff;
	--satus-header-foreground: inherit;
	--satus-header-shadow: 0 1px 0 #dcdee5;
	--satus-layers-background: var(--satus-base-background);
	--satus-layers-foreground: inherit;
	--satus-section-background: #FEfEfE;
	--satus-section-border: #dcdee5;
	--satus-section-foreground:  inherit;
	--satus-sidebar-background: #fff;
	--satus-sidebar-foreground: inherit;
	--satus-sidebar-shadow: #dcdee5;
	--satus-modal-foreground: inherit;
	--satus-modal-background: #fff;
	--satus-modal-shadow: 0 1px 4px #7d86a1;
	--satus-tabs-background: rgba(var(--satus-light), .04);
	--satus-tabs-foreground: #fff;
	--satus-text-field-background: #edf0f2;
	--satus-text-field-border: #dcdee5;
	--satus-text-field-color: #7d8ba1;
	--satus-text-field-selection: rgb(149, 166, 178, .35);
	--satus-text-field-cursor: #fa0;
	--satus-switch-track: #d0d3d9;
	--satus-switch-track--checked: var(--satus-primary);
	--satus-switch-thumb: #fff;
	--satus-input-text-background: #e8e8e3;
	--satus-input-text-border: #d6d6cd;
	--satus-input-text-text: #848471;
	--satus-shortcut-key-text: #000;
}

.satus-base[theme=dark] {
	--satus-light: 255, 255, 255;
	--satus-primary: #3691bf;
	--satus-alert-background--error: #501616;
	--satus-alert-border--error: 1px solid #6f1f1f;
	--satus-alert-foreground--error: #d77070;
	--satus-alert-background--success: #143648;
	--satus-alert-border--success: 1px solid #1d4f67;
	--satus-alert-foreground--success: #50a4ce;
	--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;
}
/*--------------------------------------------------------------
>>> NORMALIZE
--------------------------------------------------------------*/
:where([class^='satus']) {box-sizing: border-box;}
:where([class^='satus'])[hidden]:not([hidden='false']) {display: none;}
:where([class^='satus'])[transparent] {opacity:0;}
/*--------------------------------------------------------------
>>> MODAL
----------------------------------------------------------------
# Container
# Scrim
# Surface
# Variants
	# Vertical menu
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# CONTAINER
--------------------------------------------------------------*/
.satus-modal {
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
	cursor: default;
}

/*--------------------------------------------------------------
# SCRIM
--------------------------------------------------------------*/
.satus-modal__scrim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: fadeIn 150ms linear forwards;
	opacity: 0;
	background: rgba(0, 0, 0, .16);
	backdrop-filter: blur(8px);
}

.satus-modal--closing .satus-modal__scrim {
	animation: fadeOut 70ms linear forwards;
}

/*--------------------------------------------------------------
# SURFACE
--------------------------------------------------------------*/
.satus-modal__surface {
	display: flex;
	overflow-y: auto;
	flex-direction: column;
	box-sizing: border-box;
	width: 95%;
	min-width: 240px;
	max-width: 560px;
	max-height: 80%;
	margin: 8px;
	padding: 12px 16px;
	transform: scale(.8);
	animation: zoomIn 150ms linear forwards;
	animation-delay: 20ms;
	opacity: 0;
	color: var(--satus-modal-foreground);
	border-radius: 3px;
	background-color: var(--satus-modal-background);
	box-shadow: var(--satus-modal-shadow);
}

.satus-modal--closing .satus-modal__surface {
	animation: zoomOut 70ms linear forwards;
}

.satus-modal__content {
	margin: 6px 0 12px;
}

.satus-section--actions {
	justify-content: flex-end;
}
.satus-section--actions > *:not(:first-child) {
	margin-left: 8px;
}

/*--------------------------------------------------------------
# VARIANTS
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# VERTICAL MENU
--------------------------------------------------------------*/

.satus-modal--vertical-menu .satus-modal__surface {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	min-width: 180px;
	max-width: 180px;
	margin: 0;
	padding: 8px 0;
	transform-origin: right top;
}

.satus-modal--vertical-menu .satus-modal__surface>[class^='satus']:where(:not(.satus-divider)) {
	height: 36px;
	padding: 0 16px;
	border-radius: 0;
}

.satus-modal--vertical-menu .satus-modal__surface>.satus-span {
	font-size: 13px;
	font-weight: 500;
	margin: 6px 0;
	padding: 0 12px;
	height: auto;
}

.satus-modal--vertical-menu .satus-modal__surface>.satus-tabs {
	margin: 0 12px;
	border-radius: 3px;
	height: 26px;
	padding: 0;
}

.satus-modal--vertical-menu .satus-select svg,
.satus-modal--vertical-menu .satus-button svg {
	margin: 0 14px 0 0;
	opacity: .64;
	flex: 0 0 18px;
}

.satus-modal--vertical-menu .satus-button .satus-span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.satus-modal--vertical-menu .satus-switch:hover {
	cursor: pointer;
	background-color: rgba(var(--satus-light), .06);
}

.satus-modal--vertical-menu .satus-switch:focus {
	background-color: rgba(var(--satus-light), .08);
}
/*--------------------------------------------------------------
>>> GRID
--------------------------------------------------------------*/

.satus-grid {
	display: flex;
	align-items: stretch;
	height: 100%;
	padding: 8px;
}
/*--------------------------------------------------------------
>>> TEXT FIELD
----------------------------------------------------------------
# Parts
    # Container
    # Input
    # 
# Syntax highlighting
    # Regular expression
--------------------------------------------------------------*/

.satus-text-field {
	display: flex;

	min-width: 240px;
	height: 36px;

	color: var(--satus-text-field-foreground, inherit);
	border: 1px solid var(--satus-text-field-border);
	border-radius: 4px;
	background: var(--satus-text-field-background);

	align-items: center;
	justify-content: space-between;
}

.satus-text-field__container {
	position: relative;

	overflow: hidden;

	height: 100%;

	flex: 1;
}

.satus-text-field[line-numbers=false] .satus-text-field__container {
	margin-left: 8px;
}

.satus-text-field__textarea,
.satus-text-field__input {
	font: inherit;

	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;

	overflow: auto;

	width: 100%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 12px;

	white-space: pre;
	color: inherit;
	border: none;
	border-radius: 4px;
	outline: none;
	overflow-wrap: normal;
/* 
As our Syntax markup isnt read for <textarea>, is it?
	opacity: 0;
	max-width: none;
	max-height: none;
	appearance: none;  */
}
.satus-text-field__input
{	opacity: 0;
	max-width: none;
	max-height: none;
	appearance: none; }

.satus-text-field__display {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;

	width: 100%;
	height: 100%;
}

.satus-text-field__line-numbers {
	padding: 0 12px 0 0;
    z-index: 10;
	opacity: .5;
}

.satus-text-field__line-numbers>span {
	font-size: inherit;

	display: block;

	width: 100%;

	text-align: right;
}

.satus-text-field__pre {
	font: inherit;

	display: flex;

	margin: 0;
}

.satus-text-field__hidden-value {
	font: inherit;

	position: absolute;

	overflow: auto;

	white-space: pre;
	pointer-events: none;

	opacity: 0;

	overflow-wrap: normal;
}

.satus-text-field__selection {
	position: absolute;
	top: 0;
	left: 0;

	display: none;

	width: 0;
	height: 22px;
	margin: 6px -1px; 

	border: 1px solid var(--satus-text-field-selection);
	border-radius: 3px;
	background: var(--satus-text-field-selection);
}

.satus-text-field__cursor {
	position: absolute;
	top: 0;
	left: 0;

	display: none;

	width: 2px;
	height: 22px;
	margin: -3px 0 0;

	animation: blink 1s step-end 8;

	background: var(--satus-text-field-cursor);
}

.satus-text-field__textarea:focus+.satus-text-field__display>.satus-text-field__cursor,
.satus-text-field__textarea:focus+.satus-text-field__display>.satus-text-field__selection:not([disabled]),
.satus-text-field__input:focus+.satus-text-field__display>.satus-text-field__cursor,
.satus-text-field__input:focus+.satus-text-field__display>.satus-text-field__selection:not([disabled]) {
	display: block;
}

@keyframes blink {

	from,
	to {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/*--------------------------------------------------------------
# MULTILINE: FALSE
--------------------------------------------------------------*/
.satus-text-field[multiline=false] .satus-text-field__pre {
	align-items: center;
}

.satus-text-field[multiline=false] .satus-text-field__cursor {
	top: calc(50% - 9px);
}

/*--------------------------------------------------------------
# SYNTAX HIGHLIGHTING
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# REGULAR EXPRESSION
--------------------------------------------------------------*/

.satus-text-field__pre>.group {
	color: #47ff47;
	background-color: rgb(71, 255, 71, .16);
}

.satus-text-field__pre>.character-class {
	color: #ffc247;
	background-color: rgb(255, 170, 0, .16);
}

.satus-text-field__pre>.quantifier {
	color: #47c2ff;
	background-color: rgb(71, 194, 255, .16);
}

.satus-text-field__pre>.anchor {
	color: #47c2ff;
	background-color: rgb(71, 194, 255, .16);
}

.satus-text-field__pre>.metasequence {
	color: #47ff47;
	background-color: rgb(71, 255, 71, .16);
}

.satus-text-field__pre>.text {
	color: #c4c4d4;
	background-color: rgb(196, 196, 212, .16);
}
/*--------------------------------------------------------------
>>> CHART
--------------------------------------------------------------*/

.satus-chart {
	font-size: 90%;

	position: relative;

	height: 128px;
	margin: 4px 12px;

	color: rgba(var(--satus-light), .32);
	border: 1px dashed rgba(var(--satus-light), .2);
	border-top: unset;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.satus-chart__labels {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;

	width: 100%;
	height: 100%;

	justify-content: space-between;
	align-items: stretch;
}

.satus-chart__section {
	padding: 4px;

	flex: 1;
}

.satus-chart__section:not(:last-child) {
	border-right: 1px dashed rgba(var(--satus-light), .2);
}


.satus-chart__bars {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;

	width: 100%;
	height: 100%;

	justify-content: space-between;
	align-items: stretch;
}

.satus-chart__bar {
	display: flex;
	flex-direction: column;

	margin: 0 1px;

	flex: 1;
	align-items: center;
	justify-content: flex-end;
}

.satus-chart__piece {
	width: 100%;
}

.satus-chart__piece:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
/*--------------------------------------------------------------
>>> SELECT
--------------------------------------------------------------*/

.satus-select {
	position: relative;

	display: flex;

	cursor: pointer;

	align-items: center;
	justify-content: space-between;
}

.satus-select:hover {
	background-color: var(--satus-hover);
}

.satus-select__content {
	display: flex;

	flex: 1;
	overflow: hidden;

	align-items: center;
}

.satus-select svg {
	width: 20px;
	height: 18px;
	margin: 0 14px 0 0;

	opacity: .64;
}

.satus-select__content .satus-span {
	overflow: hidden;

	text-overflow: ellipsis;
}

.satus-select__value {
	display: block;
	overflow: hidden;

	flex: 1;
	margin-left: 8px;

	text-align: right;
	text-overflow: ellipsis;

	opacity: .64;
}

.satus-select select {
	font: inherit;

	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	margin: 0;
	padding: inherit;

	cursor: inherit;

	opacity: 0;
	border: none;
	outline: none;

	appearance: none;
}

.satus-select:hover {
	cursor: pointer;

	background-color: rgba(var(--satus-light), .06);
}

.satus-select:focus {
	background-color: rgba(var(--satus-light), .08);
}

.satus-select select::-webkit-scrollbar {
	width: 4px;
}

.satus-select select::-webkit-scrollbar:hover {
	width: 8px;
}

.satus-select select::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .2);
}

.satus-select select::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .3);
}

.satus-select option {
	color: var(--satus-select-text);
	background: var(--satus-select-background);
}
/*--------------------------------------------------------------
>>> DIVIDER
--------------------------------------------------------------*/

.satus-divider {
	height: 1px;
	margin: 16px 0 12px;
	background: var(--satus-divider);
}
/*--------------------------------------------------------------
>>> SECTION
----------------------------------------------------------------
# Variants
	# Align start
	# Align end
	# Card
# Media
--------------------------------------------------------------*/

.satus-section {
	display: flex;

	flex-wrap: wrap;
}


/*--------------------------------------------------------------
# ALIGN START
--------------------------------------------------------------*/

.satus-section--align-start {
	align-items: center;
}

.satus-section--align-start>*:not(:last-child) {
	margin-right: 8px;
}


/*--------------------------------------------------------------
# ALIGN END
--------------------------------------------------------------*/

.satus-section--align-end {
	align-items: center;
	justify-content: flex-end;
	display: flex;
	flex-wrap: nowrap;
	gap: .5px;
	max-width: 180px;
}

.satus-section--align-end>*:not(:first-child) {
	margin-left: 6px;
}


/*--------------------------------------------------------------
# CARD
--------------------------------------------------------------*/

.satus-section--card {
	flex-direction: column;

	max-width: 900px;
	margin: 12px;
	padding: 8px 0;

	border: 1px solid var(--satus-section-border);
	border-radius: 3px;
	background: var(--satus-section-background);
	color: var(--satus-section-foreground);
}

.satus-section--transparent-card {
	max-width: 900px;
	margin: 8px 12px;
}

.satus-section--card[data-title],
.satus-section--transparent-card[data-title]
{
	position: relative;

	margin-top: 32px;
}

.satus-section--card[data-title]::before,
.satus-section--transparent-card::before
{
	position: absolute;
	top: -8px;
	left: 0;

	content: attr(data-title);
	transform: translateY(-100%);
}


.satus-section--transparent-card > [class^='satus'] {
	width: 100%;
}

.satus-section--card>[class^='satus']:not(.satus-list):not(.satus-section) {
	display: flex;

	min-height: 48px;
	padding: 8px 12px;

	transition: background-color .18s cubic-bezier(.25, .8, .5, 1);
	text-align: left;

	border-radius: 0;

	align-items: center;
}

.satus-section--card>[class^='satus']:not(.satus-list):not(.satus-section):not(.satus-chart) {
	width: 100%;
}

.satus-section--card>[class^='satus']:not(.satus-chart):not(.satus-list):not(.satus-span):hover {
	background-color: rgba(var(--satus-light), .06);
}

.satus-section--card>.satus-button {
	justify-content: flex-start;
}

.satus-section--card>.satus-button>svg,
.satus-section--card>.satus-select>svg {
	width: 20px;
	margin: 0 14px 0 0;

	color: var(--satus-primary);
}

.satus-section--card>.satus-span {
	display: flex;

	align-items: center;
}

.satus-section--transparent {
    background: unset;
    border: unset;
    padding: 0;
    border-radius: unset;
}


/*--------------------------------------------------------------
# MEDIA
--------------------------------------------------------------*/

@media (min-width: 901px) {
	.satus-section--card,
	.satus-section--transparent-card {
		margin-left: auto;
		margin-right: auto;
	}
}
/*--------------------------------------------------------------
>>> BASE
--------------------------------------------------------------*/

.satus-base {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	color: var(--satus-base-foreground);
	background: var(--satus-base-background);
}
/*--------------------------------------------------------------
>>> ALERT
----------------------------------------------------------------
# Media
--------------------------------------------------------------*/

.satus-alert {
	display: flex;

	max-width: 900px;
	min-height: 48px;
	margin: 12px;
	padding: 8px 12px;

	border-radius: 3px;

	align-items: center;
}

.satus-alert--error {
	color: var(--satus-alert-foreground--error);
	border: var(--satus-alert-border--error);
	background: var(--satus-alert-background--error);
}

.satus-alert--success {
	color: var(--satus-alert-foreground--success);
	border: var(--satus-alert-border--success);
	background: var(--satus-alert-background--success);
}


/*--------------------------------------------------------------
# MEDIA
--------------------------------------------------------------*/

@media (min-width: 901px) {
	.satus-alert {
		margin-right: auto;
		margin-left: auto;
	}
}
/*--------------------------------------------------------------
>>> INPUT
--------------------------------------------------------------*/

.satus-input[type=text],
.satus-input[type=password] {
	font: inherit;
	font-size: 16px;

	box-sizing: border-box;
	width: 100%;
	height: 26px;
	margin: 0;
	margin: 8px 0;
	padding: 0 8px;

	color: var(--satus-input-text-foreground, inherit);
	border: none;
	border: 1px solid var(--satus-input-text-border);
	border-radius: 4px;
	outline: none;
	background: none;
	background-color: var(--satus-input-text-background);

	appearance: none;
}

.satus-input--error[type=text],
.satus-input--error[type=password] {
	outline: 2px solid rgba(255, 0, 0, .32);
}
/*--------------------------------------------------------------
>>> MAIN
--------------------------------------------------------------*/

.satus-main {
	display: flex;
										  
	flex: 1
}
/*--------------------------------------------------------------
>>> SIDEBAR
--------------------------------------------------------------*/

.satus-sidebar {
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 56px;
    padding: 12px 0;
    color: var(--satus-sidebar-foreground);
    background: var(--satus-sidebar-background);
    box-shadow: 1px 0 0 var(--satus-sidebar-shadow)
}
/*--------------------------------------------------------------
>>> LAYERS
--------------------------------------------------------------*/

.satus-layers {
	position: relative;

	overflow: hidden;

	flex: 1;
}

.satus-layers__layer {
	position: absolute;
	top: 0;
	left: 0;

	overflow: auto;

	width: 100%;
	height: 100%;

	color: var(--satus-layers-foreground);
	background: var(--satus-layers-background);
}
/*--------------------------------------------------------------
>>> LIST
--------------------------------------------------------------*/

.satus-list {
	margin: 0;

	list-style: none;
}

.satus-list__item {
	display: flex;

	min-height: 48px;
	padding: 0 16px;

	align-items: center;
	justify-content: space-between;
}

.satus-list__item>*:not(:first-child) {
	margin-left: 8px;
}

.satus-list__item>*:last-child {
	font-size: 92%;

	text-align: right;

	opacity: .64;
}
/*--------------------------------------------------------------
>>> COLOR PICKER:
----------------------------------------------------------------
# Button
# Modal
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# BUTTON
--------------------------------------------------------------*/

.satus-color-picker {
    font-size: inherit;

    position: relative;

    display: flex;

    box-sizing: border-box;
    margin: 0;

    cursor: pointer;

    color: inherit;
    border: none;
    outline: none;
    background-color: var(--satus-theme-button);

    justify-content: space-between;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    -webkit-appearance: none;
}

.satus-color-picker__value {
    width: 22px;
    height: 22px;

    border: 2px solid rgba(0, 0, 0, .16);
    border-radius: 50%;
}


/*--------------------------------------------------------------
# MODAL
--------------------------------------------------------------*/

.satus-modal--color-picker .satus-modal__surface {
    padding: 8px;
}

.satus-color-picker__palette {
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 256px;
    margin: 0 0 4px;

    border-radius: 5px;
    background-color: #f00;
}

.satus-color-picker__palette:before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';

    background-image: linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, transparent);
}

.satus-color-picker__cursor {
    position: absolute;

    width: 5px;
    height: 5px;

    transform: translate(-50%, -50%);
    pointer-events: none;

    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000;
}

.satus-modal--color-picker .satus-modal__surface .satus-section--color {
    margin: 8px 4px;

    align-items: center;
}

.satus-color-picker__color {
    width: 32px;
    height: 32px;
    margin: 0 16px 0 0;

    border: 2px solid rgba(0, 0, 0, .16);
    border-radius: 50%;
    background: #f00;
}

.satus-slider.satus-color-picker__hue {
    padding: 0;

    flex: 1;
}

.satus-color-picker__hue .satus-slider__track-container {
    height: 16px;
    margin: 0;

    border-radius: 4px;
    background-image: linear-gradient(90deg, #f00, #ff2a00, #f50, #ff7f00, #fa0, #ffd400, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff, #00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
}

.satus-color-picker__hue .satus-slider__track-container::before {
    display: none;
}

.satus-color-picker__hue .satus-slider__track {
    background: transparent;
}

.satus-color-picker__hue .satus-slider__track::after {
    width: 16px;
    height: 16px;

    background: #fff;
    box-shadow: 0 0 4px rgb(0, 0, 0, .64);
}
/*--------------------------------------------------------------
>>> SPAN
--------------------------------------------------------------*/

.satus-span--title {
	font-weight: 500;
	overflow: hidden;

	white-space: nowrap;
	text-overflow: ellipsis;

	flex: 1;
}
/*--------------------------------------------------------------
>>> BUTTON
----------------------------------------------------------------
# Base
# Basic
# Icon
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# BASE
--------------------------------------------------------------*/

.satus-button {
	font: inherit;

	position: relative;

	display: inline-flex;
	overflow: hidden;

	height: 36px;
	padding: 8px;

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

	color: inherit;
	border: none;
	border-radius: 6px;
	outline: none;
	background: transparent;

	appearance: none;
	align-items: center;
}

.satus-button:hover {
	cursor: pointer;

	background-color: rgba(var(--satus-light), .06);
}

.satus-button:focus {
	background-color: rgba(var(--satus-light), .08);
}

.satus-button svg {
	width: 100%;
	max-width: 24px;
	height: 100%;
	max-height: 24px;
}


/*--------------------------------------------------------------
# BASIC
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# ICON
--------------------------------------------------------------*/

.satus-button--icon {
	width: 40px;
	height: 40px;

	border-radius: 50%;
}

.satus-button--icon svg {
	width: 24px;
	height: 24px;
}
/*--------------------------------------------------------------
>>> HEADER
--------------------------------------------------------------*/

.satus-header {
	z-index: 1;

	display: flex;

	height: 56px;
	padding: 0 12px;

	color: var(--satus-header-foreground);
	background: var(--satus-header-background);
	box-shadow: var(--satus-header-shadow);

	justify-content: space-between;
	align-items: center;
}
/*--------------------------------------------------------------
>>> RADIO
--------------------------------------------------------------*/

.satus-radio {
	position: relative;
	display: flex;
}

.satus-radio__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	z-index: 9;
}

.satus-radio__content {
	flex: 1;
	padding: 0 12px;
}

.satus-radio__i {
	width: 16px;
	height: 16px;
	border: 1px solid rgba(var(--satus-light),.64);
	border-radius: 50%;
	transition: 200ms;
}

.satus-radio__input + .satus-radio__i::before {
	width: 8px;
	height: 8px;
	margin: 3px;
	border-radius: 50%;
	background: var(--satus-primary);
	content: '';
	display: block;
	transform: scale(0);
	transition: 200ms;
}

.satus-radio__input:checked + .satus-radio__i {
	border-color: var(--satus-primary);
}

.satus-radio__input:checked + .satus-radio__i::before {
	background: var(--satus-primary);
	transform: scale(1);
}
/*--------------------------------------------------------------
>>> SLIDER
--------------------------------------------------------------*/

.satus-slider {
	display: flex;

	flex-wrap: wrap;
}

.satus-slider__content {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.satus-slider__input[type='text'] {
	appearance: none;
	background: transparent;
	border: 1px solid var(--satus-input-text-border);
	border-radius: 2px;
	color: inherit;
	font: inherit;
	padding: 0;
	margin: 0;
	outline: none;
	width: 64px;
	text-align: right;
}

.satus-slider__track-container {
	position: relative;

	width: 100%;
	height: 20px;
	margin: 10px 0 -2px;
}

.satus-slider__track-container::before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;

	width: 100%;
	height: 2px;

	content: '';

	opacity: .24;
	background: var(--satus-primary);
}

.satus-slider__input[type='range'] {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	margin: 0;

	opacity: 0;
}

.satus-slider__track {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;

	width: 0;
	height: 2px;

	background: var(--satus-primary);
	pointer-events: none;
}

.satus-slider__track::before {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	display: block;
	width: 16px;
	height: 16px;
	content: '';
	transition: width 200ms, height 200ms, opacity 200ms;
	opacity: 0;
	border-radius: 50%;
	background: var(--satus-primary);
}


.satus-slider__input:focus + .satus-slider__track::before {
	width: 24px;
	height: 24px;
	opacity: .16;
}

.satus-slider__input:active + .satus-slider__track::before {
	width: 26px;
	height: 26px;
	opacity: .16;
}

.satus-slider__track::after {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);

	width: 10px;
	height: 10px;

	content: '';

	border-radius: 50%;
	background: var(--satus-primary);
	pointer-events: none;
	transition: width 200ms, height 200ms, opacity 200ms;
}

.satus-slider__input:active + .satus-slider__track::after {
	width: 12px;
	height: 12px;
}

.satus-slider--row {
	flex-wrap: nowrap;
	justify-content: space-between;
}

.satus-slider--row .satus-slider__track-container {
	margin: 0 0 -2px 12px;
	max-width: 50%;
}
/*--------------------------------------------------------------
>>> TABS
--------------------------------------------------------------*/

.satus-tabs {
	position: relative;

	display: flex;

	border: 2px solid var(--satus-tabs-background);
	border-radius: 4px;
	background: var(--satus-tabs-background);
}

.satus-tabs::before {
	position: absolute;
	top: 0;
	left: calc(calc(100% / var(--satus-tabs-count)) * var(--satus-tabs-current));

	width: calc(100% / var(--satus-tabs-count));
	height: 100%;

	content: '';
	transition: left .25s;

	border-radius: 3px;
	background: var(--satus-tabs-foreground);
}

.satus-tabs__button {
	font: inherit;

	position: relative;
	z-index: 1;

	overflow: hidden;

	margin: 0;
	padding: 0 8px;

	text-overflow: ellipsis;

	color: inherit;
	border: none;
	border-radius: 3px;
	outline: none;
	background: transparent;

	flex: 1;
	appearance: none;
}
/*--------------------------------------------------------------
>>> SHORTCUT:
----------------------------------------------------------------
# 
--------------------------------------------------------------*/

.satus-shortcut__value {
	font-size: 11px;

	display: flex;

	margin-left: 16px;

	text-transform: uppercase;

	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

.satus-shortcut__actions {
	display: flex;

	justify-content: flex-end;
}

.satus-shortcut__actions .satus-button {
	height: 32px;
	margin: 8px 4px 0;

	border-radius: 8px;
	background: rgba(0, 0, 0, .15);
}

.satus-shortcut__actions .satus-button:hover {
	background: rgba(0, 0, 0, .25);
}

.satus-shortcut__primary {
	display: flex;

	height: 64px;
	margin: 0 0 12px;
	padding: 16px;

	border-radius: 3px;
	background: rgba(0, 0, 0, .16);

	align-items: center;
}

.satus-shortcut__key {
	display: flex;

	min-width: 32px;
	height: 32px;
	padding: 4px 8px;

				   
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15), inset 0 -3px 0 rgba(0, 0, 0, .1);

	align-items: center;
	justify-content: center;
}

.satus-shortcut__primary>.satus-shortcut__key,
.satus-shortcut__value>.satus-shortcut__key {
	font-size: 12px;
	color: var(--satus-shortcut-key-text);
	min-width: 24px;
	height: 24px;
}

.satus-shortcut__plus {
	position: relative;

	width: 12px;
	height: 12px;
	margin: 8px;
}

.satus-shortcut__plus::before {
	position: absolute;
	top: 0;
	left: 5px;

	width: 2px;
	height: 12px;

	content: '';

	background-color: #aaa;
}

.satus-shortcut__plus::after {
	position: absolute;
	top: 5px;
	left: 0;

	width: 12px;
	height: 2px;

	content: '';

	background-color: #aaa;
}

.satus-shortcut__mouse {
	position: relative;

	display: flex;

	width: 28px;
	height: 36px;

	border-radius: 50%;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15), inset 0 -3px 0 rgba(0, 0, 0, .1);
}

.satus-shortcut__value>.satus-shortcut__mouse {
	width: 22px;
	height: 28px;
}

.satus-shortcut__mouse>div {
	position: absolute;
	top: 0;
	left: calc(50% - 1px);

	width: 2px;
	height: 11px;

	border-radius: 2px;
	background: #ccc;
}

.satus-shortcut__mouse::before {
	position: absolute;
	top: -16%;
	right: 14%;

	width: 2px;
	height: 60%;

	content: '';

	background: #f96754;
}

.satus-shortcut__mouse.false::before {
	top: -6%;
}

.satus-shortcut__mouse.false::after {
	position: absolute;
	top: -20%;
	right: calc(14% - 4px);

	width: 0;
	height: 0;

	content: '';

	border-right: 5px solid transparent;
	border-bottom: 8px solid #f96754;
	border-left: 5px solid transparent;
}

.satus-shortcut__mouse.true::after {
	position: absolute;
	top: 40%;
	right: calc(14% - 4px);

	width: 0;
	height: 0;

	content: '';

	border-top: 8px solid #f96754;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
}

.satus-shortcut__mouse.click::before {
	position: absolute;
	top: 0;
	left: -1px;

	width: 10px;
	height: 10px;

	content: '';

	border-radius: 50%;
	background: #f96754;
}

.satus-shortcut__mouse.middle::before {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;

	width: 10px;
	height: 10px;

	content: '';
	transform: translateX(-50%);

	border-radius: 50%;
	background: #f96754;
}

.satus-shortcut__mouse.context::before {
	position: absolute;
	top: 0;
	left: 15px;

	width: 10px;
	height: 10px;

	content: '';

	border-radius: 50%;
	background: #f96754;
}

.satus-section_shortcut {
	width: 100%;
	margin: 8px 0 0;

	justify-content: flex-end;
}

.satus-button_shortcut {
	font-weight: 500;

	overflow: hidden;

	height: 28px;
	min-height: 28px;
	margin-right: 2px;
	padding: 4px 8px;

	text-transform: uppercase;

	color: #f96754;
	border-radius: 4px;
}
/*--------------------------------------------------------------
>>> CHECKBOX
--------------------------------------------------------------*/

.satus-checkbox {
	position: relative;

	display: flex;

	cursor: pointer;

	align-items: center;
}

.satus-checkbox__input {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	opacity: 0;
	border: none;

	appearance: none;
	z-index: 1;
}

.satus-checkbox__checkmark {
	position: relative;

	display: flex;

	width: 16px;
	min-width: 16px;
	height: 16px;
	min-height: 16px;
	margin: 0 12px 0 0;

	content: '';

	border: 1px solid var(--satus-checkbox-border);
	border-radius: 3px;
	background: var(--satus-checkbox-background);
}

.satus-checkbox[data-value=true] .satus-checkbox__checkmark {
	border-color: var(--satus-primary);
	background: var(--satus-primary);
}

.satus-checkbox[data-value=true] .satus-checkbox__checkmark::before {
	position: absolute;
	top: 3px;
	left: 2px;

	width: 8px;
	height: 4px;

	content: '';
	transform: rotate(-45deg);

	border: 2px solid var(--satus-checkbox-foreground);
	border-top: none;
	border-right: none;
}
/*--------------------------------------------------------------
>>> SWITCH
----------------------------------------------------------------
# Container
# Track
# Thumb
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# CONTAINER
--------------------------------------------------------------*/

.satus-switch {
	font: inherit;

	display: flex;

	transition: background-color 75ms;

	color: inherit;
	border: none;
	outline: none;
	background-color: transparent;

	justify-content: space-between;
	align-items: center;
}

.satus-switch:hover {
	cursor: pointer;
}

.satus-switch__content {
	display: flex;

	align-items: center;
}

.satus-switch__content>svg {
	width: 20px;
	height: 18px;
	margin: 0 14px 0 0;

	opacity: .64;
}

.satus-switch, .satus-select, .satus-button, .satus-Buttons, .satus-label { 
/*no blinking cursor when focused:*/
	caret-color: transparent; 
}

/*--------------------------------------------------------------
# TRACK
--------------------------------------------------------------*/

.satus-switch>i {
	width: 32px;
	height: 18px;

	transition: background-color 150ms;

	border-radius: 18px;
	background-color: var(--satus-switch-track);

	flex: 0 0 32px;
}

.satus-section--card .satus-switch>i {
	margin-left: 16px;
}

.satus-switch[data-value='true']>i {
	background-color: var(--satus-switch-track--checked);
}


/*--------------------------------------------------------------
# THUMB
--------------------------------------------------------------*/

.satus-switch>i::before {
	display: block;

	width: 14px;
	height: 14px;
	margin: 2px;

	content: '';
	transition: transform 150ms cubic-bezier(.4, 0, .2, 1);

	border-radius: 50%;
	background-color: var(--satus-switch-thumb);

	will-change: transform;
}

.satus-switch[data-value='true']>i::before {
	transform: translateX(14px);
}
/*--------------------------------------------------------------
>>> CONTEXT MENU
--------------------------------------------------------------*/

.satus-modal--contextmenu .satus-modal__scrim {
	visibility: visible;

	transform: none;
	animation: none;

	opacity: 1;
	background: none;

	backdrop-filter: none;
}

.satus-modal--contextmenu .satus-modal__surface {
	position: absolute;

	visibility: visible;

	min-width: 200px;
	max-width: 200px;
	margin: 0;
	padding: 4px 0;

	transform: none;
	animation: none;

	opacity: 1;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(var(--satus-light), .1);
}

.satus-modal--contextmenu .satus-modal__surface>* {
	display: flex;

	height: 32px;
	padding: 0 16px;

	align-items: center;
}

.satus-modal--contextmenu .satus-modal__surface .satus-button svg {
	width: 20px;
	height: 18px;
	margin: 0 14px 0 0;

	opacity: .75;

	fill: none;
	stroke: var(--satus-primary);
	flex: 0 0 20px;
}

.satus-modal--contextmenu .satus-modal__surface .satus-button .satus-span {
	overflow: hidden;

	white-space: nowrap;
	text-overflow: ellipsis;
}
/*--------------------------------------------------------------
>>> SORTABLE
--------------------------------------------------------------*/

.satus-sortable__chosen {
	color: var(--satus-sortable-text) !important;
	background-color: var(--satus-sortable-background) !important;
}

.satus-sortable__ghost {
	position: fixed !important;
	z-index: 999 !important;
	top: 0 !important;
	left: 0 !important;

	pointer-events: none !important;

	opacity: .8 !important;
	box-shadow: 0 1px 3px rgb(0, 0, 0, .2), 0 4px 8px rgb(0, 0, 0, .1), inset 0 0 0 1px rgb(0, 0, 0, .16) !important;

	will-change: transform !important;
}


