/*********** 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 #181818;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	display: block;
}
.xui slider.vertical {
	width: 3.25rem;
	height: 100%;
}
.xui slider.horizontal {
	height: 2.15rem;
	width: 100%;
}

.xui .button-grid slider.horizontal {
	width: calc(100% - 0.5rem);
	height: 2rem;
}

.xui toolbar slider.horizontal {
	height: 2rem;
}


.xui slider slider-bar {
	display: block;
	position: absolute;
	pointer-events: none;
/*	box-shadow: inset 0 0 0.5rem 0 rgba(0,0,0, 0.5);*/
}
.xui slider-bar::after {
	content: '⏴⏵';
	font-size: 0.8rem;
	position: absolute;
	line-height: 0;
	opacity: 0.3;
}
.xui slider:not(:hover) slider-bar::after {
	opacity: 0;
}

.xui slider.vertical slider-bar {
	left: 0;
	bottom: 0;
	width: 100%;
}
.xui slider.vertical slider-bar::after {
	top: 0;
	left: calc(50% - 1rem - 0.1em);
	width: 2rem;
	text-align: center;
	transform: rotate(-90deg);
}
.xui slider.vertical.negative slider-bar::after {
	top: 100%;
}

.xui slider.vertical.thin slider-bar {
	width: 0.17rem;
}
.xui slider.vertical.thin.right slider-bar {
	left: auto;
	right: 0;
}

.xui slider.horizontal slider-bar {
	top: 0;
	left: 0;
	height: 100%;
}
.xui slider.horizontal slider-bar::after {
	top: calc(50% - 0.1em);
	left: calc(100% - 1rem - 0.5px);
	line-height: 0;
	width: 2rem;
	text-align: center;
}
.xui slider.horizontal.negative slider-bar::after {
	left: calc(-1rem - 0.5px);
}

.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;
	pointer-events: none;
	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;
}
.xui slider.touch slider-touch,
body.ui-mouse slider:hover slider-touch
{
	display: block;
}
body.ui-mouse .xui slider:hover:not(.touch) slider-touch {
	opacity: 0.15;
}
.xui slider.touch slider-value {
	color: #fff;
}

.xui slider slider-title, .xui slider slider-value {
	position: absolute;
	font-size: 0.65rem;
	pointer-events: none;
	white-space: nowrap;
	line-height: 1;
}
.xui slider slider-value {
	font-family: monospace;
	font-size: 0.56rem;
	line-height: 1.1;
}

.xui toolbar slider slider-title, .xui toolbar slider slider-value {
	font-size: 0.6rem;
}

.xui slider.vertical slider-title {
	bottom: 0.75em;
	left: 50%;
	transform-origin: left center;
	transform: rotate(-90deg);
}
.xui slider.horizontal slider-title {
	left: 1em;
	top: 50%;
	line-height: 0;
}

.xui slider.vertical slider-value {
	top: 0.75em;
	right: 50%;
	transform-origin: right center;
	transform: rotate(-90deg);
}

.xui slider.horizontal slider-value {
	right: 1em;
	top: calc(50% - 0.5em);
}