@layer atoms {
  .mobius-slider__track-wrapper {
    position: relative;
    width: 100%;
    height: 30px;
  }

  .mobius-slider__track {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: var(--size-xs);
    top: calc(var(--size-xs) + 2px);
    border-radius: 999px;
    touch-action: none;
    outline: none;
  }

  .mobius-slider__label-wrapper {
    display: flex;
    align-self: stretch;
  }

  /* Thumb */
  .mobius-slider__track::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border: var(--thumb-border);
    border-radius: 50%;
    cursor: pointer;
  }

  .mobius-slider__track::-moz-range-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border: var(--thumb-border);
    border-radius: 50%;
    cursor: pointer;
  }

  /* Thumb focus blur */
  .mobius-slider__track:focus-visible::-webkit-slider-thumb {
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
  }

  .mobius-slider__track:focus-visible::-moz-range-thumb {
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
  }

  .mobius-slider__labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .mobius-slider {
    position: relative;
    display: grid;
    gap: var(--size-xxs);

    &.--is-primary {
      & .mobius-slider__track {
        background-color: var(--slider-primary-track-background);
      }

      & .mobius-slider__track::-webkit-slider-thumb {
        background-color: var(--slider-primary-thumb-background);
        box-shadow:
          0 0 0 var(--size-xxs) var(--color-background),
          0 0 0 5px var(--slider-primary-thumb-background);
      }

      & .mobius-slider__track::-moz-range-thumb {
        background-color: var(--slider-primary-thumb-background);
        box-shadow:
          0 0 0 var(--size-xxs) var(--color-background),
          0 0 0 5px var(--slider-primary-thumb-background);
      }
    }

    &.--is-secondary {
      & .mobius-slider__track {
        background-color: var(--slider-secondary-track-background);
      }

      & .mobius-slider__track::-webkit-slider-thumb {
        background-color: var(--slider-secondary-thumb-background);
        box-shadow:
          0 0 0 var(--size-xxs) var(--color-background),
          0 0 0 5px var(--slider-secondary-thumb-background);
      }

      & .mobius-slider__track::-moz-range-thumb {
        background-color: var(--slider-secondary-thumb-background);
        box-shadow:
          0 0 0 var(--size-xxs) var(--color-background),
          0 0 0 5px var(--slider-secondary-thumb-background);
      }
    }

    &.--is-disabled {
      color: var(--color-text-light);
      cursor: not-allowed;

      & .mobius-slider__track {
        background-color: var(--color-background-light);
      }

      & .mobius-slider__track::-webkit-slider-thumb {
        background-color: var(--color-background-light);
        box-shadow:
          0 0 0 var(--size-xxs) var(--color-background),
          0 0 0 5px var(--color-border-medium);
        cursor: not-allowed;
      }

      & .mobius-slider__track::-moz-range-thumb {
        background-color: var(--color-background-light);
        box-shadow:
          0 0 0 var(--size-xxs) var(--color-background),
          0 0 0 5px var(--color-border-medium);
        cursor: not-allowed;
      }
    }
  }
}
