/* ! Slider */

.slider {
	--trackheight: 26px;
	--areacolor: #ffe2e2;
	--bgr: linear-gradient(90deg, white 20%, var(--areacolor) 20%, var(--areacolor) 60%, white 60%);
	--bgr: none;
	
	position: relative;
	width: calc(100% - 2 * var(--tile-overshoot));
	height: calc(var(--trackheight) + 12px);
	padding: 6px;
	padding: 0 6px;
	background: var(--color-gray-1);
	background: white;
	border-radius: 8px;
	margin-bottom: 1em;
	margin-top: 0.3em;
	margin-left: var(--tile-overshoot);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
	/*box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);*/
}
/*
.slider:before {
	content: '';
	display: block;
	position: absolute;
	left: 20%;
	top: 0;
	width: 40%;
	height: 100%;
	background: aqua;
}
*/
.slider input[type=range] {
	-webkit-appearance: none;
	position: relative;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: none;
}
.slider input[type=range]:focus { outline: none; box-shadow: none; }

.slider input::-webkit-slider-runnable-track
{
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 6px 0;
	background: none;
	background-image: var(--bgr);
	border: none;
	cursor: pointer;
}
.slider input::-moz-range-track {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	padding: 6px 0;
	background: none;
	background-image: var(--bgr);
	border: none;
	cursor: pointer;
}
.slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	position: relative;
	width: 90px;
	height: 100%;
	background: var(--color-sparkassenrot);
	border-radius: 5px;
	border: none;
	z-index: 20;
	box-shadow: none !important;
	cursor: pointer;
}
.slider input::-moz-range-thumb {
	position: relative;
	width: 90px;
	height: calc(100% - 12px);
	background: var(--color-sparkassenrot);
	border-radius: 5px;
	border: none;
	z-index: 200;
}
.slider-label {
	position: absolute;
	left: 0;
	top: 6px;
	width: 90px;
	height: var(--trackheight);
	margin-left: 6px;
	padding-left: 0;
	font-size: 15px;
	line-height: var(--trackheight);
	font-weight: 900;
	text-align: center;
	color: white;
	pointer-events: none;
	z-index: 20;
}
.slider-minval, .slider-maxval {
	display: none;
	position: absolute;
	left: calc(-1 * var(--tile-overshoot));
	top: calc(var(--trackheight) + 14px);
	padding: 0 2px;
	font-weight: 400;
	font-size: 12px;
	color: var(--color-gray-4);
}
.slider-maxval { left: auto; right: calc(-1 * var(--tile-overshoot)); }

.slider input[type=range]:disabled::-webkit-slider-thumb { background: var(--color-gray-1); }
.slider input:disabled::-moz-range-thumb { background: var(--color-gray-1); }

/* ! Toggle Switch */

input.toggle-switch {
	--width: 40px;
	--height: 22px;
	-webkit-appearance: none;
	display: inline-block;
	position: relative;
	width: var(--width);
	height: var(--height);
	margin: 0;
	padding: 0;
	line-height: var(--height);
	background-color: var(--color-gray-1);
	background-color: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--color-gray-3);
	border: none;
	border-radius: 100px;
	cursor: pointer;
}
/*
input.toggle-switch:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 46px;
	height: 26px;
	background: cyan;
	border-radius: 13px;
	transition: background 0.2s cubic-bezier(.02,.72,.27,.99);
	opacity: 1;
}
*/
input.toggle-switch:after {
	content: '';
	position: absolute;
	left: 2px;
	top: 2px;
	width: calc(var(--height) - 4px);
	height: calc(var(--height) - 4px);
	background: #FF8098;
	border-radius: 100px;
	transition: left 0.2s cubic-bezier(.27, 1.48, .25, .99);
	opacity: 1;
}
input.toggle-switch:checked:before { }
input.toggle-switch:checked:after { left: calc(100% - var(--height) + 2px); background: #24DE8F; }
input.toggle-switch + label {
	display: inline-block;
	height: 26px;
	padding-left: 12px;
	font-weight: 400;
	line-height: 26px;
	vertical-align: top;
	color: var(--color-gray-4);
	cursor: pointer;
}
input.toggle-switch:disabled { cursor: default; }
input.toggle-switch:disabled:after { opacity: var(--disabled-opacity); }

/* ! Checkbox */

input.check-mark {
	--size: 22px;
	-webkit-appearance: none;
	display: inline-block;
	position: relative;
	width: var(--size);
	height: var(--size);
	margin: 0;
	padding: 0;
	line-height: var(--size);
	background-color: var(--color-gray-5);
	border: 1px solid var(--color-gray-3);
	border-radius: 100px;
	cursor: pointer;
}
input.check-mark:checked {
	background: url(../assets/icons/icon_check.svg) no-repeat center center;
	background-size: 26px;
	border: none;
}