.slider-thumb,
.slider-thumb-zero {
  @apply appearance-none w-full bg-transparent cursor-pointer;
}

.slider-thumb:focus,
.slider-thumb-zero:focus {
  @apply outline-none;
}

/* Track */

.slider-thumb::-webkit-slider-runnable-track {
  @apply h-2 bg-gray-300 rounded;
}

.slider-thumb-zero::-webkit-slider-runnable-track {
  @apply h-2 bg-gray-300 rounded;
}

.slider-thumb:focus::-webkit-slider-runnable-track {
  @apply ring-2 ring-offset-2 ring-empirica-500;
}

.slider-thumb-zero:focus::-webkit-slider-runnable-track {
  @apply ring-2 ring-offset-2 ring-empirica-500;
}

.slider-thumb::-moz-range-track {
  @apply h-2 bg-gray-300 rounded;
}

.slider-thumb-zero::-moz-range-track {
  @apply h-2 bg-gray-300 rounded;
}

.slider-thumb:focus::-moz-range-track {
  @apply ring-2 ring-offset-2 ring-empirica-500;
}

.slider-thumb-zero:focus::-moz-range-track {
  @apply ring-2 ring-offset-2 ring-empirica-500;
}

/* Thumb */

.slider-thumb::-webkit-slider-thumb {
  @apply appearance-none w-6 h-6 rounded-full bg-empirica-500 relative -top-2;
}

.slider-thumb:hover::-webkit-slider-thumb {
  @apply bg-empirica-600;
}

.slider-thumb:disabled::-webkit-slider-thumb {
  @apply bg-gray-400;
}

.slider-thumb:disabled:hover::-webkit-slider-thumb {
  @apply bg-gray-400;
}

.slider-thumb-zero::-webkit-slider-thumb {
  @apply appearance-none w-6 h-6 rounded-full bg-transparent border-gray-400 border-dashed border relative -top-2;
}

.slider-thumb-zero:hover::-webkit-slider-thumb {
  @apply bg-empirica-600 border-none;
}

.slider-thumb::-moz-range-thumb {
  @apply appearance-none border-none w-6 h-6 rounded-full bg-empirica-500;
}

.slider-thumb::-moz-range-thumb:hover {
  @apply bg-empirica-600;
}

.slider-thumb:disabled::-moz-range-thumb {
  @apply bg-gray-400;
}

.slider-thumb:disabled:hover::-moz-range-thumb {
  @apply bg-gray-400;
}

.slider-thumb-zero::-moz-range-thumb {
  @apply appearance-none w-6 h-6 rounded-full bg-transparent border-gray-400 border-dashed border;
}

.slider-thumb-zero:hover::-moz-range-thumb {
  @apply bg-empirica-600 border-none;
}
