/*--------------------------------------------------------------
>>> THEMES:
----------------------------------------------------------------
# Default
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# DEFAULT
--------------------------------------------------------------*/

.satus-base {
	--satus-bubble-foreground: rgba(255, 255, 255, .75);
	--satus-bubble-background: linear-gradient(135deg, #ff4766, #f50029);
	--satus-bubble-shadow-raised: 0 2px 1px 1px #d60024, 0 4px 4px rgb(82, 0, 14, .32);
	--satus-bubble-shadow-unelevated: 0 1px 1px 0 #d60024, 0 1px 2px rgb(82, 0, 14, .32);
	--it-appearance-shadow-color: #dfdfdf;
}

.satus-base[theme='dark'] {
	--satus-light: 255, 255, 255;
	--satus-base-background: #131316;
	--satus-base-foreground: #e0e0e0;
	--satus-header-background: #26262c;
	--satus-header-text: #e0e0e0;
	--satus-header-shadow: 0 1px 0 #000;
	--satus-layers-background: #131316;
	--satus-layers-text: #e0e0e0;
	--satus-section-background: #1c1d21;
	--satus-section-border: #212121;
	--satus-switch-track: #e1e4ea;
	--satus-modal-background: #2a2b32;
	--satus-modal-foreground: #e0e0e0;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-tabs-background: #1c1d21;
	--satus-tabs-foreground: #33343d;
	--satus-text-field-background: #1e1e1e;
	--satus-text-field-foreground: #e0e0e0;
}

.satus-base[theme='night'] {
	--satus-bubble-foreground: rgba(255, 255, 255, .75);
	--satus-bubble-background: linear-gradient(135deg, #3a48b4, #5663c8);
	--satus-bubble-shadow-raised: 0 2px 1px 1px #2f3b92, 0 4px 4px rgb(82, 0, 14, .32);
	--satus-bubble-shadow-unelevated: 0 1px 1px 0 #2f3b92, 0 1px 2px rgb(82, 0, 14, .32);
	--it-appearance-shadow-color: #dfdfdf;
	--satus-light: 255, 255, 255;
	--satus-primary: #f5f5f5;
	--satus-base-background: #191f4d;
	--satus-base-foreground: #f5f5f5;
	--satus-header-background: #3a48b4;
	--satus-header-text: #f5f5f5;
	--satus-header-shadow: 0 1px 0 #000;
	--satus-layers-background: #191f4d;
	--satus-layers-text: #f5f5f5;
	--satus-section-background: #28327b;
	--satus-section-border: #2f3b92;
	--satus-switch-track: #e1e4ea;
	--satus-modal-background: #3a48b4;
	--satus-modal-foreground: #f5f5f5;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-text-field-background: #3a48b4;
	--satus-text-field-foreground: #f5f5f5;
	--satus-text-field-border: #5d6acb;
}

.satus-base[theme='dawn'] {
	--satus-bubble-foreground: rgba(255, 255, 255, .75);
	--satus-bubble-background: linear-gradient(145deg, #ed5a97 46%, #ffa77a);
	--satus-bubble-shadow-raised: 0 2px 1px 1px #de357c, 0 4px 4px rgb(82, 0, 14, .32);
	--satus-bubble-shadow-unelevated: 0 1px 1px 0 #de357c, 0 1px 2px rgb(82, 0, 14, .32);
	--it-appearance-shadow-color: #dfdfdf;
	--satus-light: 255, 255, 255;
	--satus-primary: #f5f5f5;
	--satus-base-background: linear-gradient(345deg, #ffa77a, #de357c 70%);
	--satus-base-foreground: #f5f5f5;
	--satus-header-background: #e45892;
	--satus-header-text: #fff;
	--satus-header-shadow: 0 2px 2px #db2470;
	--satus-layers-background: linear-gradient(345deg, #ffa77a, #de357c 70%);
	--satus-layers-text: #f5f5f5;
	--satus-section-background: rgb(221, 75, 136, .6);
	--satus-section-border: rgb(224, 92, 147, .8);
	--satus-switch-track: rgb(255, 255, 255, .24);
	--satus-modal-background: #e45892;
	--satus-modal-foreground: #fff;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-text-field-background: #ed74a9;
	--satus-text-field-foreground: #f5f5f5;
	--satus-text-field-border: #e53883;
}

.satus-base[theme='sunset'] {
	--satus-bubble-foreground: rgba(255, 255, 255, .75);
	--satus-bubble-background: linear-gradient(145deg, #ef4d5a 46%, #fa7965);
	--satus-bubble-shadow-raised: 0 2px 1px 1px #e14749, 0 4px 4px rgb(82, 0, 14, .32);
	--satus-bubble-shadow-unelevated: 0 1px 1px 0 #e14749, 0 1px 2px rgb(82, 0, 14, .32);
	--it-appearance-shadow-color: #dfdfdf;
	--satus-light: 255, 255, 255;
	--satus-primary: #f5f5f5;
	--satus-base-background: linear-gradient(345deg, #a96165, #2f3364 70%);
	--satus-base-foreground: #f5f5f5;
	--satus-header-background: #313668;
	--satus-header-text: #fff;
	--satus-header-shadow: 0 2px 2px #262a54;
	--satus-layers-background: linear-gradient(345deg, #a96165, #2f3364 70%);
	--satus-layers-text: #f5f5f5;
	--satus-section-background: rgb(62, 67, 121, .6);
	--satus-section-border: #313668;
	--satus-switch-track: rgb(255, 255, 255, .24);
	--satus-modal-background: #313668;
	--satus-modal-foreground: #fff;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-text-field-background: #313668;
	--satus-text-field-foreground: #f5f5f5;
	--satus-text-field-border: #313668;
}

.satus-base[theme='desert'] {
	--satus-bubble-foreground: rgba(255, 255, 255, .75);
	--satus-bubble-background: linear-gradient(145deg, #7ea5f1 46%, #5a8bed);
	--satus-bubble-shadow-raised: 0 2px 1px 1px #3571e9, 0 4px 4px rgb(82, 0, 14, .32);
	--satus-bubble-shadow-unelevated: 0 1px 1px 0 #3571e9, 0 1px 2px rgb(82, 0, 14, .32);
	--it-appearance-shadow-color: #dfdfdf;
	--satus-light: 0, 0, 0;
	--satus-primary: #73a1fc;
	--satus-base-background: #fde49b;
	--satus-base-foreground: #444;
	--satus-header-background: #73a1fc;
	--satus-header-foreground: #fff;
	--satus-header-shadow: 0 2px 2px #5288f4;
	--satus-layers-background: #fde49b;
	--satus-layers-text: #242424;
	--satus-section-background: #fcda73;
	--satus-section-foreground: #444;
	--satus-section-border: #fcd55f;
	--satus-switch-track: rgb(255, 255, 255, .24);
	--satus-modal-background: #73a1fc;
	--satus-modal-foreground: #fff;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-text-field-background: #73a1fc;
	--satus-text-field-foreground: #f5f5f5;
	--satus-text-field-border: #73a1fc;
}

.satus-base[theme='plain'] {
	--satus-bubble-foreground: rgba(255, 255, 255, .75);
	--satus-bubble-background: linear-gradient(145deg, #4c946b 46%, #4c946b);
	--satus-bubble-shadow-raised: 0 2px 1px 1px #4c946b, 0 4px 4px rgb(82, 0, 14, .32);
	--satus-bubble-shadow-unelevated: 0 1px 1px 0 #4c946b, 0 1px 2px rgb(82, 0, 14, .32);
	--it-appearance-shadow-color: #dfdfdf;
	--satus-light: 0, 0, 0;
	--satus-primary: #fff;
	--satus-base-background: #8db9a0;
	--satus-base-foreground: #fff;
	--satus-header-background: #57a87a;
	--satus-header-foreground: #fff;
	--satus-header-shadow: 0 2px 2px #4c946b;
	--satus-layers-background: #8db9a0;
	--satus-layers-text: #242424;
	--satus-section-background: #4c946b;
	--satus-section-foreground: #fff;
	--satus-section-border: #458762;
	--satus-switch-track: rgb(255, 255, 255, .24);
	--satus-modal-background: #57a87a;
	--satus-modal-foreground: #fff;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-text-field-background: ##57a87a;
	--satus-text-field-foreground: #f5f5f5;
	--satus-text-field-border: #4c946b;
}

.satus-base[theme='black'] {
	--it-appearance-shadow-color: #333;
	--satus-light: 255, 255, 255;
	--satus-base-background: #000;
	--satus-base-foreground: #e0e0e0;
	--satus-header-background: #111;
	--satus-header-text: #e0e0e0;
	--satus-header-shadow: 0 1px 0 #222;
	--satus-layers-background: #000;
	--satus-layers-text: #b8b8b8;
	--satus-section-background: #131316;
	--satus-section-border: #26272c;
	--satus-switch-track: #292929;
	--satus-modal-background: #1d1e20;
	--satus-modal-foreground: #e0e0e0;
	--satus-modal-shadow: 0 1px 5px 3px rgba(0, 0, 0, .24);
	--satus-tabs-background: #1c1d21;
	--satus-tabs-foreground: #33343d;
	--satus-text-field-background: #1e1e1e;
	--satus-text-field-border: #333;
	--satus-text-field-foreground: #e0e0e0;
}


.satus-label[class$='-theme'] {
	display: flex;

	height: 80px;
	margin: 0 0 12px 0;
	padding: 8px 16px;

	cursor: pointer;

	color: #fff;
	border: 1px solid rgba(var(--satus-light), .1);
	border-radius: 8px;
	text-shadow: 0 1px 3px #000;

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

.satus-label--custom-theme {
	background: linear-gradient(to left, #e52d27, #b31217);
}

.satus-label--default-theme {
	background: #f0f0f0;
}

.satus-label--dark-theme {
	position: relative;

	overflow: hidden;

	background: linear-gradient(#0d1216, #353d46) !important;
}

.satus-label--dark-theme::before {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	content: '';
	animation-name: satus-label--dark-theme;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	pointer-events: none;

	background: radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%), radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2), transparent 60%) !important;
	background-repeat: no-repeat !important;
	background-position: -10px 40px, 200px 0, -30px -20px, 130px 30px !important;
	background-size: 50px 50px, 50px 50px, 100px 100px, 75px 75px !important;

	filter: blur(8px);
}

@keyframes satus-label--dark-theme {
	0% {
		background-position: -10px 40px, 200px 0, -30px -20px, 130px 30px;
	}

	50% {
		background-position: 20px 20px, 230px -20px, 0 -40px, 160px 10px;
	}

	100% {
		background-position: -10px 40px, 200px 0, -30px -20px, 130px 30px;
	}
}

.satus-label--night-theme {
	position: relative;

	overflow: hidden;

	animation-name: satus-label--night-theme;
	animation-duration: .75s;
	animation-iteration-count: infinite;

	background-image: radial-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .8) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .6) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%), linear-gradient(#3a48b4, #61a7f5) !important;
	background-repeat: no-repeat !important;
	background-position: 75% 80%, 35% 65%, 30% 10%, 50% 40%, 10% 80%, 90% 10%, 0 0 !important;
	background-size: 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, auto !important;
}

@keyframes satus-label--night-theme {
	0% {
		background-image: radial-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .8) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .6) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%), linear-gradient(#3a48b4, #61a7f5);
	}

	25% {
		background-image: radial-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .45) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .7) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .7) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .3) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .6) 50%, transparent 50%), linear-gradient(#3a48b4, #61a7f5);
	}

	50% {
		background-image: radial-gradient(rgba(255, 255, 255, .3) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .9) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .8) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .7) 50%, transparent 50%), linear-gradient(#3a48b4, #61a7f5);
	}

	75% {
		background-image: radial-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .45) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .7) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .7) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .3) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .6) 50%, transparent 50%), linear-gradient(#3a48b4, #61a7f5);
	}

	100% {
		background-image: radial-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .8) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .6) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%), radial-gradient(rgba(255, 255, 255, .5) 50%, transparent 50%), linear-gradient(#3a48b4, #61a7f5);
	}
}

.satus-label--dawn-theme {
	position: relative;

	overflow: hidden;

	background: linear-gradient(#ed74a9, #ffba99) !important;
}

.satus-slabel-dawn-theme::before {
	position: absolute;
	right: 1rem;
	bottom: -5rem;

	width: 10rem;
	height: 10rem;

	content: '';
	animation-name: satus-label--dawn-theme;
	animation-duration: .75s;
	animation-iteration-count: infinite;
	pointer-events: none;

	border-radius: 50%;
	background: radial-gradient(rgba(255, 255, 231, .85) 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%) !important;
}

@keyframes satus-label--dawn-theme {
	0% {
		background: radial-gradient(rgba(255, 255, 231, .85) 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%);
	}

	50% {
		background: radial-gradient(rgba(255, 255, 231, .85) 20%, rgba(255, 255, 231, .30) 20%, rgba(255, 255, 231, .30) 35%, rgba(255, 255, 231, .20) 35%, rgba(255, 255, 231, .20) 55%, rgba(255, 255, 231, .10) 55%, rgba(255, 255, 231, .10) 75%, transparent 75%);
	}

	100% {
		background: radial-gradient(rgba(255, 255, 231, .85) 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%);
	}
}

.satus-label--sunset-theme {
	position: relative;

	overflow: hidden;

	background: linear-gradient(#2f3364, #a96165) !important;
}

.satus-label--sunset-theme::before {
	position: absolute;
	top: -1rem;
	left: 50%;

	overflow: hidden;

	width: 8rem;
	height: 8rem;

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

	border-radius: 50%;
	background: linear-gradient(#fa7965, #f56264, transparent) !important;
}

.satus-label--desert-theme {
	position: relative;

	overflow: hidden;

	background-image: radial-gradient(#ffe498 50%, transparent 50%), linear-gradient(#9dc2ee, #f5fdff) !important;
	background-repeat: no-repeat !important;
	background-position: -120px 36px, 0 !important;
	background-size: 240%, 100% !important;
}

.satus-label--desert-theme::before {
	position: absolute;
	top: -100%;
	left: 40%;

	width: 10rem;
	height: 10rem;

	content: '';
	animation-name: satus-label--desert-theme;
	animation-duration: .75s;
	animation-delay: .5s;
	animation-iteration-count: infinite;
	pointer-events: none;

	border-radius: 50%;
	background: radial-gradient(#fefefe 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%) !important;
}

@keyframes satus-label--desert-theme {
	0% {
		background: radial-gradient(#fefefe 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%);
	}

	50% {
		background: radial-gradient(#fefefe 20%, rgba(255, 255, 231, .30) 20%, rgba(255, 255, 231, .30) 35%, rgba(255, 255, 231, .20) 35%, rgba(255, 255, 231, .20) 55%, rgba(255, 255, 231, .10) 55%, rgba(255, 255, 231, .1) 75%, transparent 75%);
	}

	100% {
		background: radial-gradient(#fefefe 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%);
	}
}

.satus-label--plain-theme {
	position: relative;

	overflow: hidden;

	background-image: radial-gradient(#dea975 50%, transparent 50%), radial-gradient(#e8b887 50%, transparent 50%), radial-gradient(#f1cc9f 50%, transparent 50%), radial-gradient(#f3ddb8 50%, transparent 50%), linear-gradient(#abceb8, #e7ede1) !important;
	background-repeat: no-repeat !important;
	background-position: -50px 50px, -370px 40px, 0 36px, -360px 26px, 0 !important;
	background-size: 240%, 240%, 240%, 240%, 100% !important;
}

.satus-label--plain-theme::before {
	position: absolute;
	top: -70%;
	left: 10%;

	width: 7rem;
	height: 7rem;

	content: '';
	animation-name: satus-label--plain-theme;
	animation-duration: .75s;
	animation-delay: .2s;
	animation-iteration-count: infinite;
	pointer-events: none;

	border-radius: 50%;
	background: radial-gradient(#fff 20%, rgba(255, 255, 231, .25) 20%, rgba(255, 255, 231, .25) 35%, rgba(255, 255, 231, .15) 35%, rgba(255, 255, 231, .15) 55%, rgba(255, 255, 231, .05) 55%, rgba(255, 255, 231, .05) 75%, transparent 75%) !important;
}

.satus-label--black-theme {
	background: #000 !important;
}

.satus-radio__content {
	display: none;
}