@layer components {
  .price-range {
    --range-min: 0%;
    --range-max: 100%;
  }

  .price-range__fields {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space);
  }

  .price-range__field {
    --input-border-color: var(--color-border);

    position: relative;
    flex: 1;
    border: 1px solid var(--input-border-color);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    color: var(--color-ink);

    &:focus-within {
      --input-border-color: var(--color-primary);
    }

    span {
      position: absolute;
      color: var(--color-muted);
      font-size: var(--text-xs);
      inset-block-start: 50%;
      inset-inline-start: var(--inline-space-half);
      transform: translateY(-50%);
    }

    input {
      padding: var(--block-space-half) var(--inline-space);
      inline-size: 100%;
      padding-inline-start: calc(var(--inline-space) + 0.5em);

      &:focus {
        outline: none;
      }

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        display: none;
      }
    }
  }

  .price-range__separator {
    color: var(--color-muted);
  }

  .price-range__track {
    position: relative;
    border-radius: 3px;
    background: var(--color-separator);
    block-size: 6px;

    /* Room for the 1rem handles above and below the 6px track: the
       group's folding content clips what sticks out. */
    margin-block: 0.5rem;
  }

  .price-range__fill {
    position: absolute;
    border-radius: 3px;
    background: var(--color-primary);
    block-size: 100%;
    inset-inline: var(--range-min) calc(100% - var(--range-max));
  }

  .price-range__track input[type="range"] {
    position: absolute;
    appearance: none;
    background: transparent;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    pointer-events: none;

    /* Separate rules: a browser drops a rule whose selector it can't parse. */
    @media (any-hover: hover) {
      &::-webkit-slider-thumb:hover {
        transform: scale(1.1);
      }

      &::-moz-range-thumb:hover {
        transform: scale(1.1);
      }
    }
  }

  .price-range__track input[type="range"]::-webkit-slider-thumb {
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    appearance: none;
    background: var(--color-surface);
    block-size: 1rem;
    box-shadow: 0 2px 4px oklch(var(--lch-black) / 10%);
    cursor: pointer;
    inline-size: 1rem;
    pointer-events: auto;
    transition: transform 0.15s ease-out;
  }

  .price-range__track input[type="range"]::-moz-range-thumb {
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: var(--color-surface);
    block-size: 1rem;
    box-shadow: 0 2px 4px oklch(var(--lch-black) / 10%);
    cursor: pointer;
    inline-size: 1rem;
    pointer-events: auto;
    transition: transform 0.15s ease-out;
  }
}