@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-text);

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

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

    input {
      width: 100%;
      padding: var(--block-space-half) var(--inline-space);
      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-text-muted);
  }

  .price-range__track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--color-separator);
    margin-block-start: 0.5rem;
  }

  .price-range__fill {
    position: absolute;
    right: calc(100% - var(--range-max));
    left: var(--range-min);
    height: 100%;
    border-radius: 3px;
    background: var(--color-primary);
  }

  .price-range__track input[type="range"] {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    appearance: none;
    background: transparent;
    pointer-events: none;
  }

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

  .price-range__track input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }

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

  .price-range__track input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
  }
}