@layer components {
  .scale {
    margin-top: var(--space-s);
  }

  .scale__variant + .scale__variant {
    margin-top: var(--space-s);
  }

  .scale__variant-label {
    margin-bottom: 0.4rem;
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .scale__rail {
    position: relative;
    display: flex;
    height: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
  }

  .scale__bands {
    display: flex;
    width: 100%;
  }

  .scale__band {
    flex: var(--span, 1) 1 0;
    min-width: 0;
    border-right: 1px solid var(--line);
  }

  .scale__band:last-child {
    border-right: 0;
  }

  .scale__band:nth-child(even) {
    background-color: rgb(21 39 29 / 0.04);
  }

  .scale__band.is-marked,
  .scale__band.is-marked:nth-child(even) {
    background-color: var(--accent-mark);
  }

  .scale__band-name,
  .scale__band-range {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .scale__needle {
    position: absolute;
    inset-block: -0.4rem;
    left: var(--at, 0%);
    width: 2px;
    margin-left: -1px;
    background: var(--ink-accent);
    pointer-events: none;
  }

  .scale__needle::before {
    content: "";
    position: absolute;
    top: -0.2rem;
    left: 50%;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--ink-accent);
    transform: translateX(-50%) rotate(45deg);
  }

  .scale__ticks {
    position: relative;
    height: 1.4rem;
    margin-top: 0.4rem;
  }

  .scale__tick {
    position: absolute;
    top: 0;
    left: var(--at, 0%);
    font-size: var(--text-2xs);
    font-variant-numeric: oldstyle-nums;
    line-height: 1.2;
    color: var(--ink-muted);
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .scale__tick::before {
    content: "";
    position: absolute;
    top: -0.4rem;
    left: 50%;
    width: 1px;
    height: 0.25rem;
    background: var(--line-strong);
  }

  .scale__legend {
    font-size: var(--text-2xs);
    line-height: 1.45;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  .scale__pending {
    padding-left: 0.75rem;
    border-left: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-muted);
    text-wrap: pretty;
  }

  @media (prefers-reduced-motion: no-preference) {
    .scale__needle {
      transition: left var(--duration-base) var(--ease-out-expo);
    }

    .scale__band {
      transition: background-color 200ms var(--ease-out-quart);
    }
  }

  html.no-js .scale__pending {
    display: none;
  }
}