@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

:root {
  color-scheme: dark;

  --black: #070709;
  --white: #fff;
  --yellow: #f6d653;
  --gray: #525252;

  --lines: 5;

  --fg: light-dark(var(--black), var(--white));
  --bg: light-dark(var(--white), var(--black));
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: monospace;
  text-transform: uppercase;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}

input[type="range"] {
  display: block;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  background-color: transparent;
  margin: 0;
  &::-webkit-slider-thumb {
    appearance: none;
    background: linear-gradient(
      to bottom,
      var(--yellow) 0 calc(50% - 1px),
      var(--black) calc(50% - 1px) calc(50% + 1px),
      var(--yellow) calc(50% + 1px) 100%
    );
    border-radius: 4px;
    width: 40px;
    height: 18px;
    scale: 1.4 1;
    cursor: grab;
  }
  &::-webkit-slider-runnable-track {
    background: repeating-linear-gradient(
      to bottom,
      var(--gray) 0 2px,
      transparent 2px calc((100% - 2px) / (var(--lines) - 1))
    );
  }
}

.range {
  text-align: center;
  border: 1px solid var(--gray);
  font-family: Dosis;
  font-size: large;
  font-weight: 500;
  display: inline-block;
  padding: 0.7rem 0.6rem;
  label {
    display: block;
    padding-bottom: 0.5rem;
    margin-block-end: 1rem;
    border-bottom: 1px solid var(--gray);
  }
}

.range-wrapper {
  position: relative;
  display: inline-block;
}

.range-value {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--yellow) 0 2px,
    transparent 2px calc((100% - 2px) / (var(--lines) - 1))
  );
}