.slider {
  appearance: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 1em;
  box-sizing: border-box;
  color: rgb(var(--color-primary));
}

.slider::-webkit-slider-container {
  width: 100%;
  height: 100%;
  min-block-size: 0;
  background-color: rgb(var(--color-primary) / 50%);
  border-radius: 9999px;
  display: block;
  box-sizing: border-box;
  background-clip: content-box;
  padding: 0.25em;
  appearance: none;
}

.slider::-webkit-slider-runnable-track {
  appearance: none;
  border-radius: 9999px;
  display: block;
  width: 100%;
  height: 100%;
  margin: -0.25em;
  box-sizing: border-box;
  background-clip: content-box;
}

.slider::-webkit-slider-thumb {
  width: 1em;
  height: 1em;
  margin: -0.25em 0 0 0;

  border-radius: 9999px;
  background-color: currentColor;
  appearance: none;
  aspect-ratio: 1 / 1;
  z-index: 1;
  position: relative;
  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
}

.slider:focus::-webkit-slider-container {
  background-color: rgb(var(--color-secondary) / 50%);
}

.slider:active::-webkit-slider-container {
  background-color: rgb(var(--color-tertiary) / 50%);
}

.slider:focus::-webkit-slider-thumb {
  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
}

.slider:active::-webkit-slider-thumb {
  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
}

.slider-wrapper[data-orient='horizontal'] {
  flex-direction: column;
}

.slider-wrapper[data-firefox] {
  flex-direction: column;
}

.slider-wrapper[data-firefox='vertical'] {
  flex-direction: row;
}

.slider-wrapper[data-orient='vertical'] {
  flex-direction: column;
  rotate: -90deg;
  translate: calc(-100% + 0.5em * 2);
  transform-origin: calc(100% - 0.5em) 0.5em;
}

.slider::-moz-range-track {
  appearance: none;
  border-radius: 9999px;
  content: '';
  display: block;
  position: absolute;
  background-color: currentColor;
  opacity: 0.5;
  width: calc(100% - 0.5em);
  height: 50%;
  top: 25%;
  margin: -0.25em;
}

.slider::-moz-range-thumb {
  height: 100%;
  outline: 0;
  border: 0;

  border-radius: 9999px;
  background-color: currentColor;
  appearance: none;
  aspect-ratio: 1 / 1;
  z-index: 1;
  position: relative;
  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
}

.slider:focus::-moz-range-thumb {
  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
}

.slider:active::-moz-range-thumb {
  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
}

.slider[orient='vertical'] {
  width: 1em;
  height: 16em;
}

.slider[orient='vertical']::-moz-range-track {
  width: 50%;
  height: calc(100% - 0.5em);
}

.slider[orient='vertical']::-moz-range-thumb {
  width: 100%;
  height: 1em;
  box-shadow: 0 100000.5em 0 100000em rgb(var(--color-primary) / 50%);
}

.slider[orient='vertical']:focus::-moz-range-thumb {
  box-shadow: 0 100000.5em 0 100000em rgb(var(--color-secondary) / 50%);
}

.slider[orient='vertical']:active::-moz-range-thumb {
  box-shadow: 0 100000.5em 0 100000em rgb(var(--color-tertiary) / 50%);
}

.slider-wrapper[data-chrome] > input + * {
  padding: 0 0.5em;
  height: 1.5em;
}

.slider-wrapper[data-firefox='horizontal'] > input + * {
  padding: 0 0.5em;
  height: 1.5em;
}

.slider-wrapper[data-firefox='vertical'] > input + * {
  padding: 0.5em 0;
  width: 1.5em;
}
