.cobalt-slider {
  $slider-thumb-size: theme("spacing.md");
  $slider-control-padding-bottom: theme("spacing.sm");
  --slider-control-track-height: 3px;
  $slider-chart-height: theme("spacing.2xl");

  position: relative;

  width: 100%;
  display: flex;
  flex-direction: column;

  &--withBars {
    [data-part="control"] {
      margin-top: calc($slider-chart-height - 10px);
    }
  }

  &--withHint {
    @apply c-pb-sm;
  }

  &__value-meta {
    @apply c-text-onSurfaceVariant;
  }

  &__value-container {
    @apply c-text-onSurface;
  }

  &[data-disabled] {
    .cobalt-slider__value-container {
      @apply c-text-onSurfaceContainerVariant;
    }

    .cobalt-slider__value-meta {
      @apply c-text-onSurfaceContainerVariant;
    }
  }

  [data-part="control"] {
    @apply c-pt-sm c-flex c-items-center;
    padding-bottom: $slider-control-padding-bottom;
  }

  [data-part="track"] {
    @apply c-bg-surfaceContainerVariant c-flex-1 c-rounded-full;
    height: var(--slider-control-track-height);

    &[data-disabled] {
      @apply c-bg-disabled;
    }
  }

  [data-part="range"] {
    @apply c-bg-primary c-rounded-full;
    height: var(--slider-control-track-height);

    &[data-disabled] {
      @apply c-bg-primaryContainer;
    }
  }

  [data-part="thumb"] {
    @apply c-border c-border-outline c-shadow;
    width: $slider-thumb-size;
    height: $slider-thumb-size;

    // The handle will always be white in any cases
    background: #fff;
    cursor: pointer;
    border-radius: 50%;

    &[data-disabled] {
      @apply c-bg-surfaceContainerVariant;
      cursor: not-allowed;
    }

    &:not([data-disabled]):focus {
      @apply c-border-onPrimaryContainer c-border-2;
      outline: none;
    }
  }

  &__bars {
    position: absolute;

    bottom: calc(
      var(--slider-control-track-height) + $slider-control-padding-bottom
    );

    width: 100%;
    height: $slider-chart-height;

    display: flex;
    align-items: end;

    padding: 0 calc($slider-thumb-size / 2);
    gap: 1px;
  }

  &__bar {
    @apply c-bg-surfaceContainerVariant;

    border-radius: 2px 2px 0 0;
  }

  &__bar--active {
    @apply c-bg-primary;
  }
}