@layer range-slider-element {
  /**
   * BASE
   */
  range-slider {
    --track-size: 0.2rem;
    --thumb-size: 1.2rem;

    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    block-size: var(--thumb-size);
    inline-size: 130px;
    outline: none;

    /* Prevent selection relevant for touch devices */
    user-select: none;
    -webkit-user-select: none;

    /* Make sure capture pointer events will work properly on touch devices */
    touch-action: none;
  }
  range-slider[orientation="vertical"] {
    flex-direction: column;
    inline-size: var(--thumb-size);
    block-size: 130px;
  }

  /* Track */
  range-slider [data-track] {
    pointer-events: none;
    flex: 1;
    block-size: var(--track-size);
    border-radius: inherit;
    box-sizing: inherit;
  }
  range-slider[orientation="vertical"] [data-track] {
    inline-size: var(--track-size);
    block-size: 100%;
  }

  /* Track fill */
  range-slider [data-track-fill] {
    pointer-events: none;
    position: absolute;
    block-size: var(--track-size);
    border-start-start-radius: inherit;
    border-end-start-radius: inherit;
    box-sizing: inherit;
  }
  range-slider[orientation="vertical"] [data-track-fill] {
    inline-size: var(--track-size);
    block-size: auto;
    border-start-start-radius: unset;
    border-end-end-radius: inherit;
  }

  /* Runnable track */
  range-slider [data-runnable-track] {
    pointer-events: none;
    position: absolute;
    inset: 0 calc(var(--thumb-size) / 2);
    box-sizing: inherit;
  }
  range-slider[orientation="vertical"] [data-runnable-track] {
    inset: calc(var(--thumb-size) / 2) 0;
  }

  /* Thumb */
  range-slider [data-thumb] {
    pointer-events: auto;
    touch-action: none;
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
    position: absolute;
    margin-inline-start: calc(var(--thumb-size) / 2 * -1);
    box-sizing: inherit;
  }
  range-slider[orientation="vertical"] [data-thumb] {
    margin-inline-start: unset;
    margin-block: calc(var(--thumb-size) / 2 * -1);
  }

  /**
   * DEFAULT THEME
   */
  range-slider {
    border-radius: var(--track-size);
    margin: 2px;
  }
  range-slider:active {
    opacity: 0.8;
  }
  range-slider[disabled] {
    filter: grayscale(1);
    opacity: 0.4;
  }

  /* Track */
  range-slider [data-track] {
    /* biome-ignore-start lint/suspicious/noDuplicateProperties: reason */
    background-color: lightgray;
    background-color: ButtonFace;
    /* biome-ignore-end lint/suspicious/noDuplicateProperties: reason */
  }

  /* Track fill */
  range-slider [data-track-fill] {
    background-color: #0075ff;
  }

  /* Thumb */
  range-slider [data-thumb] {
    background-color: #0075ff;
    border-radius: 100%;
  }
}
