/*********** NEVER USE filter: !!! GIVES RANDOM ARTIFACTS ALL OVER THE PLACE **************/

.xui slider {
	box-shadow: inset 0 0 0.3rem 0 rgba(0,0,0, 0.4);
	border: solid 0.5px #000;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	line-height: 2.5rem;
	display: block;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	background-color: #fff;
	color: #555;
	background-image: linear-gradient(#000000d8, #000000d8);
	box-shadow: inset 0 0 4px 0 #0007;
	flex-shrink: 0;
	flex-grow: 1;
}
.xui slider.vertical {
	width: 2.5rem;
}
.xui slider.horizontal {
	height: 2.5rem;
}

.xui slider * {
	pointer-events: none;
	touch-action: none;
}

.xui slider slider-bar {
	position: absolute;
	box-sizing: border-box;
}

.xui slider slider-bar::after {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
}
.xui slider.horizontal slider-bar::after {
	bottom: -1px;
	width: 0.8rem;
	height: 100%;
	background-image: url('../assets/slider-horizontal-pos.png');
	background-size: 100% 0.5rem;
	background-position: bottom -1px center;
}
.xui slider.vertical slider-bar::after {
	right: -1px;
	height: 0.8rem;
	width: 100%;
	background-image: url('../assets/slider-vertical-pos.png');
	background-size: 0.5rem 100%;
	background-position: right -1px center;
}
.xui slider.horizontal:not(.negative) slider-bar::after {
	right: -0.4rem;
}
.xui slider.vertical:not(.negative) slider-bar::after {
	top: -0.4rem;
}
.xui slider.horizontal.negative slider-bar::after {
	left: -0.4rem;
	margin-left: 0.5px;
}
.xui slider.vertical.negative slider-bar::after {
	bottom: -0.4rem;
	margin-bottom: 0.5px;
}
.xui slider.horizontal.centered:not(.negative) slider-bar::after {
	margin-right: -0.5px;
}
.xui slider.vertical.centered:not(.negative) slider-bar::after {
	margin-bottom: -0.5px;
}

.xui slider.vertical slider-bar {
	left: 0;
	bottom: 0;
	width: 100%;
}
.xui slider.horizontal slider-bar {
	top: 0;
	left: 0;
	height: 100%;
}


.xui slider slider-offset {
	position: absolute;
	background: #ffffff18;
}
.xui slider.vertical slider-offset {
	left: 33.3%;
	width: 33.3%;
}
.xui slider.horizontal slider-offset {
	top: 33.3%;
	height: 33.3%;
}

.xui slider slider-ref {
	position: absolute;
	background: #fff;
	display: none;
}
.xui slider.vertical slider-ref {
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	height: 1px;
	margin-top: -1px;
	width: 100%;
	left: 0;
}
.xui slider.horizontal slider-ref {
	border-left: solid 1px #000;
	border-right: solid 1px #000;
	width: 1px;
	margin-left: -1px;
	height: 100%;
	top: 0;
}

.xui slider-touch {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	opacity: 0.25;
	mix-blend-mode: overlay;
	display: none;
}
body.ui-mouse .xui slider:hover slider-touch,
.xui slider.touch slider-touch
{
	display: block;
}
body.ui-mouse .xui slider.touch:hover slider-touch {
	opacity: 0.5;
}
	
.xui slider slider-title, .xui slider slider-value {
	white-space: nowrap;
	color: #eee;
	position: absolute;
}

.xui slider-title {
	font-size: 0.8rem;
}
.xui slider-title.split {
	display: flex;
	justify-content: space-between;
}
.xui slider.horizontal slider-title {
	left: 0.5rem;
	bottom: 0;
}
.xui slider.horizontal slider-title.split {
	right: 0.5rem;
}
.xui slider.vertical slider-title {
	bottom: 0;
	left: 1.2rem;
	transform: rotate(-90deg);
	transform-origin: center left;
}

.xui slider-value {
	font-family: monospace;
	font-size: 0.75rem;
	text-align: right;
}
.xui slider.horizontal slider-value {
	right: 0.5rem;
	bottom: 0;
}
.xui slider.vertical slider-value {
	top: 0;
	left: 1.2rem;
	transform: translateX(-100%) rotate(-90deg);
	transform-origin: center right;
}
.xui slider.horizontal.split-title slider-value {
	left: 0.5rem;
	text-align: center;
}