.Slider {
  --b-slider-width: initial;
  --b-slider-thumb-size: 20px;

  touch-action: none;
  cursor: pointer;
  user-select: none;

  position: relative;

  display: flex;
  align-items: center;

  width: var(--b-slider-width);
  height: var(--b-slider-thumb-size);

  transition: opacity var(--motion-transition-fast);

  &[data-disabled] {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }
}

.SliderPrimitiveTrack {
  position: relative;

  flex: 1;

  height: 6px;

  background-color: var(--color-fill-neutral-heavy);
  border-radius: var(--radius-3);
  border-radius: 3px;
}

.SliderPrimitiveRange {
  position: absolute;
  height: 100%;
  background-color: var(--color-fill-accent-green-heavier);
  border-radius: var(--radius-3);
}

.GuideContainer {
  --b-slider-guide-height: 8px;

  position: absolute;
  top: calc(-1 * (var(--b-slider-guide-height) + 3px));
  left: calc(var(--b-slider-thumb-size) / 2);
  width: calc(100% - var(--b-slider-thumb-size));
}

.SliderGuide {
  --b-slider-guide-left: 0;

  position: absolute;
  top: 0;
  left: var(--b-slider-guide-left);
  transform: translateX(-50%);

  width: 2px;
  height: var(--b-slider-guide-height);

  background-color: var(--color-fill-neutral-light);
  border-radius: 1px;
}

.SliderThumb {
  display: block;

  width: var(--b-slider-thumb-size);
  height: var(--b-slider-thumb-size);

  background-color: var(--color-fill-absolute-white);
  border-radius: var(--radius-12);
  box-shadow: var(--elevation-2);

  transition: box-shadow var(--motion-transition-fast);

  &:hover {
    box-shadow: var(--elevation-3);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--state-input-active);
  }
}