.cobalt-slider {
  width: 100%;
  display: flex;
  flex-direction: column;

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

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

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

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

  [data-part="control"] {
    @apply c-py-sm c-flex c-items-center;
  }

  [data-part="track"] {
    @apply c-bg-fill-subdued c-flex-1 c-rounded-full;
    height: 3px;

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

  [data-part="range"] {
    @apply c-bg-accent c-rounded-full;
    height: 3px;

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

  [data-part="thumb"] {
    @apply c-border c-border-base c-shadow;
    width: 1.5rem;
    height: 1.5rem;

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

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

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