:root {
  --eox-slider-thumb-height: 20px;
  --eox-slider-thumb-width: 20px;
  --eox-slider-track-height: 6px;
  --eox-slider-track-color: var(--outline-variant);
  --eox-slider-brightness-hover: 100%;
  --eox-slider-brightness-down: 100%;
  --eox-slider-clip-edges: 4px;
  --eox-slider-margin: 1.125rem;
}
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ) {
  font-size: 1.5rem;
  color: var(--primary);
  width: 100%;
  background: none;
  overflow: hidden;
}

input[type="range"]:not(.slider input[type="range"]) {
  margin: var(--eox-slider-margin);
  width: 100%;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):active {
  cursor: grabbing;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):disabled {
  filter: grayscale(1);
  opacity: 0.3;
  cursor: not-allowed;
}

/* WebKit specific styles */
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ),
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-webkit-slider-runnable-track,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: var(--eox-slider-thumb-height);
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-webkit-slider-runnable-track,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-webkit-slider-thumb {
  position: relative;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-webkit-slider-runnable-track {
  border-radius: var(--eox-slider-track-height);
}

input[type="range"]:not(.slider input)::-webkit-slider-thumb {
  --thumb-radius: calc((var(--eox-slider-thumb-height) * 0.5) - 1px);
  --clip-top: calc(
    (var(--eox-slider-thumb-height) - var(--eox-slider-track-height)) * 0.5 -
      0.5px
  );
  --clip-bottom: calc(var(--eox-slider-thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(
      -100vmax - var(--eox-slider-thumb-width, var(--eox-slider-thumb-height))
    )
    0 0 100vmax currentColor;

  width: var(--eox-slider-thumb-width, var(--eox-slider-thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
    50% calc(var(--eox-slider-track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--eox-slider-thumb-width, var(--eox-slider-thumb-height));

  filter: brightness(100%);
  clip-path: polygon(
    100% -1px,
    var(--eox-slider-clip-edges) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--eox-slider-clip-edges) 100%,
    var(--clip-further) var(--clip-further)
  );
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):hover::-webkit-slider-thumb {
  filter: brightness(var(--eox-slider-brightness-hover));
  cursor: grab;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):active::-webkit-slider-thumb {
  filter: brightness(var(--eox-slider-brightness-down));
  cursor: grabbing;
}

input[type="range"]:not(.slider input)::-webkit-slider-runnable-track {
  background: linear-gradient(var(--eox-slider-track-color) 0 0) scroll
    no-repeat center / 100% calc(var(--eox-slider-track-height) + 1px);
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ),
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-track,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-thumb {
  appearance: none;
  transition: all ease 100ms;
  height: var(--eox-slider-thumb-height);
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-track,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-thumb,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-progress {
  background: #fff0;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--eox-slider-thumb-width, var(--eox-slider-thumb-height));
  border-radius: var(--eox-slider-thumb-width, var(--eox-slider-thumb-height));
  cursor: grab;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):active::-moz-range-thumb {
  cursor: grabbing;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-track {
  width: 100%;
  background: var(--eox-slider-track-color);
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-progress {
  appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-track,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-progress {
  height: calc(var(--eox-slider-track-height) + 1px);
  border-radius: var(--eox-slider-track-height);
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-thumb,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  )::-moz-range-progress {
  filter: brightness(100%);
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):hover::-moz-range-thumb,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):hover::-moz-range-progress {
  filter: brightness(var(--eox-slider-brightness-hover));
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):active::-moz-range-thumb,
input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):active::-moz-range-progress {
  filter: brightness(var(--eox-slider-brightness-down));
}

input[type="range"]:not(
    .slider.large input,
    .slider.small input,
    .slider.medium input,
    .slider.extra input
  ):disabled::-moz-range-thumb {
  cursor: not-allowed;
}

/* === BeerCSS tiny slider styling only === */
.slider.tiny {
  --_track: var(--eox-slider-track-height);
  --_track-color: var(--eox-slider-track-color) !important;
  margin: var(--eox-slider-margin);
}

.slider.tiny::before {
  background: var(--eox-slider-track-color);
}

label.slider.tiny::before {
  height: var(--eox-slider-track-height);
  background: var(--outline-variant);
  clip-path: none;
}

label.slider.tiny > span,
.slider.tiny > input[type="range"] + input[type="range"] ~ span {
  height: var(--eox-slider-track-height);
  top: var(--eox-slider-track-height) - 1;
  clip-path: none;
}

.slider.tiny > input[type="range"]::-webkit-slider-thumb {
  box-shadow: unset;
  width: var(--eox-slider-thumb-width, var(--eox-slider-thumb-height));
  border-radius: var(--eox-slider-thumb-width, var(--eox-slider-thumb-height));
}

.slider.tiny > input[type="range"]::-webkit-slider-runnable-track {
  background: unset;
}

.slider.tiny
  > input[type="range"]:not(:disabled):is(:focus)::-webkit-slider-thumb {
  transform: scaleX(1);
}

.slider.tiny > input:not(:disabled):is(:focus)::-moz-range-thumb {
  transform: scaleX(1);
}

.slider::before {
  clip-path: none !important;
}

.slider > span:not([class]) {
  inset: calc(50% - (var(--_track, 0) / 2)) var(--_end) auto var(--_start) !important;
  z-index: 1;
  pointer-events: none;
}

/* tc-range-slider styling */
tc-range-slider {
  --panel-bg-fill: var(--primary);
  --pointer-bg: var(--primary);
  --pointer-bg-focus: var(--primary);
  --pointer-bg-hover: var(--primary);
  --pointer-border: 0;
  --pointer-border-focus: 0;
  --pointer-border-hover: 0;
  --pointer-width: var(
    --eox-slider-thumb-width,
    var(--eox-slider-thumb-height)
  );
  --pointer-height: var(
    --eox-slider-thumb-width,
    var(--eox-slider-thumb-height)
  );
  --pointer-shadow: 0 3px 4px #00000033;
  --pointer-shadow-hover: 0 0 0 10px #0000000a;
  --height: var(--eox-slider-track-height);
  --width: 100%;
  --panel-bg-border-radius: var(--eox-slider-track-height);
  --panel-bg: var(--eox-slider-track-color);
  --panel-bg-hover: var(--eox-slider-track-color);

  display: block;
  margin: calc(var(--eox-slider-margin) + var(--eox-slider-thumb-height))
    var(--eox-slider-margin);
}

/* Vuetify slider styling */
.v-slider.v-input--horizontal {
  margin: var(--eox-slider-margin);
}
.v-slider.v-input--horizontal .v-slider-track {
  height: calc(var(--eox-slider-track-height) + 2px) !important;
  --v-slider-track-size: var(--eox-slider-track-height) !important;
}
.v-slider-track .v-slider-track__background {
  background-color: var(--eox-slider-track-color) !important;
}
.v-slider-track__fill.bg-primary {
  background-color: var(--primary) !important;
  height: calc(var(--eox-slider-track-height)) !important;
}
.v-slider-track__background--opacity {
  opacity: 1;
}
.v-slider-thumb__surface {
  background: var(--primary);
}