/* Check Boxes */

.check-box StBoxLayout {
	spacing: .8em;
}

.check-box StBin {
	width: 24px;
	height: 24px;
	background-image: url("checkbox-off.svg");
}

.check-box:focus StBin {
	background-image: url("checkbox-off-focused.svg");
}

.check-box:checked StBin {
	background-image: url("checkbox.svg");
}

.check-box:focus:checked StBin {
	background-image: url("checkbox-focused.svg");
}


/* Toggles */

/* .toggle-switch handle styled in ..46, 47.. */

.toggle-switch {
	/* size same as svg */
	height: 18px;
	width: 33px;
	background-color: ACCENT-DISABLED_HOVER;
	border-radius: 99px;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
}

.toggle-switch:checked {
	background-color: BUTTON-COLOR;
}

/* Do Not Distrub toggle */

.dnd-button {
	border-radius: 10px;
}

.dnd-button .toggle-switch {
	/* size same as svg */
	width: 40px;
	height: 22px;
	border-radius: 9px;
	background-color: ACCENT-DISABLED-COLOR;
	transition-duration: 100ms;
}

.dnd-button:hover .toggle-switch {
	background-color: ACCENT-DISABLED_HOVER;
}

.dnd-button .toggle-switch:checked {
	background-color: BUTTON-COLOR;
}

.dnd-button:hover .toggle-switch:checked {
	background-color: BUTTON_HOVER;
}

.dnd-button:focus {
	border-color: transparent;
}

.dnd-button:focus .toggle-switch {
	box-shadow: inset 0 0 0 1px ACCENT-SECONDARY-COLOR !important;
}


/* Buttons */

.button {
	color: TEXT-PRIMARY-COLOR;
	background-color: ACCENT-DISABLED-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
	transition-duration: 100ms;
}

.button:insensitive {
	box-shadow: none;
	color: TEXT-SECONDARY-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.button:hover,
.button:active {
	background-color: ACCENT-DISABLED_HOVER;
}

.button:focus {
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}

/* clear button */
.message-list-clear-button {
	padding: 0 20px;
	border-radius: 9px;
}

.message-list-clear-button:insensitive {
	background-color: SECTION-COLOR;
}

/* Sliders */

.slider, 
.level {
	-barlevel-background-color: ACCENT-DISABLED-COLOR;
	-barlevel-color: TEXT-PRIMARY-COLOR;
	color: TEXT-PRIMARY-COLOR; /* slider handle color (47+) */
	-barlevel-active-background-color: BUTTON-COLOR;
	-barlevel-height: 10px;
	-barlevel-border-width: 0px; /* up to 46 */
	-slider-handle-radius: 7px;
	/* overfill */
	-barlevel-overdrive-color: #c01c28;
	-barlevel-overdrive-separator-width: 2px;
}

.level {
	-barlevel-active-background-color: TEXT-PRIMARY-COLOR;
	-barlevel-height: 8px;
}


/* Scroll bar */

StScrollBar {
	padding: 0;
}

StScrollView StScrollBar {
	min-width: 8px;
	min-height: 8px;
}

.message-list StScrollView StScrollBar,
.message-view StScrollView StScrollBar {
	min-width: 3px;
	min-height: 3px;
}


StScrollBar StBin#trough {
	border-radius: 0;
	background-color: transparent;
}

StScrollBar StButton#vhandle,
StScrollBar StButton#hhandle {
	border-radius: 8px;
	background-color: SCROLLBAR-COLOR;
	border: 3px solid transparent;
	transition-duration: 100ms;
}

.message-list StScrollBar StButton#vhandle,
.message-view StScrollBar StButton#hhandle {
	border-radius: 0;
	border: 0px solid transparent
}

StScrollBar StButton#vhandle:hover,
StScrollBar StButton#hhandle:hover {
	background-color: SCROLLBAR_HOVER;
}

StScrollBar StButton#vhandle:active,
StScrollBar StButton#hhandle:active {
	background-color: SCROLLBAR_ACTIVE;
}