calcite-slider.scss

.scale--s {
  --calcite-slider-handle-size: 10px;
  --calcite-slider-handle-extension-height: 6.5px;
  --calcite-slider-container-font-size: var(--calcite-font-size--3);
  .handle__label,
  .tick__label {
    @apply leading-3;
  }
}

.scale--m {
  --calcite-slider-handle-size: 14px;
  --calcite-slider-handle-extension-height: 8px;
  --calcite-slider-container-font-size: var(--calcite-font-size--2);
  .handle__label,
  .tick__label {
    @apply leading-4;
  }
}

.scale--l {
  --calcite-slider-handle-size: 16px;
  --calcite-slider-handle-extension-height: 10.5px;
  --calcite-slider-container-font-size: var(--calcite-font-size--1);
  .handle__label,
  .tick__label {
    @apply leading-4;
  }
}

.handle__label,
.tick__label {
  @apply font-medium text-color-2;
  font-size: var(--calcite-slider-container-font-size);
}

:host {
  @apply block;
}

.container {
  @apply block relative;
  padding: calc(var(--calcite-slider-handle-size) * 0.5);
  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
  --calcite-slider-full-handle-height: calc(
    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
  );
}

:host([disabled]) {
  @apply opacity-disabled pointer-events-none;
  .track__range,
  .tick--active {
    background-color: var(--calcite-ui-text-3);
  }
}

.scale--s {
  .thumb:not(.thumb--precise) {
    --calcite-slider-thumb-y-offset: -6px;
  }
}
.scale--m {
  .thumb:not(.thumb--precise) {
    --calcite-slider-thumb-y-offset: -8px;
  }
}
.scale--l {
  .thumb:not(.thumb--precise) {
    --calcite-slider-thumb-y-offset: -9px;
  }
}

:host([precise]:not([has-histogram])) {
  .container .thumb--value {
    --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
  }
}

.thumb-container {
  @apply max-w-full relative;
}

.thumb {
  --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
  @apply absolute
    border-none
    bg-transparent
    cursor-pointer
    outline-none
    p-0
    m-0
    flex
    flex-col
    items-center
    font-inherit;
  transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));

  .handle__label {
    &.static,
    &.transformed {
      @apply opacity-0
        absolute
        top-0
        bottom-0;
    }
    &.hyphen::after {
      content: "\2014";
      display: inline-block;
      width: 1em;
    }
  }

  .handle {
    @apply focus-base
      box-border
      rounded-full
      bg-foreground-1;
    height: var(--calcite-slider-handle-size);
    width: var(--calcite-slider-handle-size);
    box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
    transition: border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .handle-extension {
    @apply w-0.5;
    height: var(--calcite-slider-handle-extension-height);
    background-color: var(--calcite-ui-text-3);
  }

  &:hover {
    .handle {
      box-shadow: 0 0 0 3px var(--calcite-ui-brand) inset;
    }
    .handle-extension {
      @apply bg-brand;
    }
  }

  &:focus {
    .handle {
      @apply focus-outset;
    }
    .handle-extension {
      @apply bg-brand;
    }
  }

  &.thumb--minValue {
    transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
  }

  &.thumb--precise {
    --calcite-slider-thumb-y-offset: -2px;
  }
}

:host([label-handles]) {
  .thumb {
    --calcite-slider-thumb-x-offset: 50%;
  }
  &:host(:not([has-histogram])) {
    .scale--s {
      .thumb:not(.thumb--precise) {
        --calcite-slider-thumb-y-offset: -23px;
      }
    }
    .scale--m {
      .thumb:not(.thumb--precise) {
        --calcite-slider-thumb-y-offset: -30px;
      }
    }
    .scale--l {
      .thumb:not(.thumb--precise) {
        --calcite-slider-thumb-y-offset: -32px;
      }
    }
  }
}

:host([has-histogram][label-handles]),
:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise {
  .handle__label {
    margin-top: 0.5em;
  }
}
:host(:not([has-histogram]):not([precise])),
:host([label-handles]:not([has-histogram])) .thumb--value {
  .handle__label {
    margin-bottom: 0.5em;
  }
}

:host([label-handles][precise]) {
  &:host(:not([has-histogram])) .scale--s .thumb--value {
    --calcite-slider-thumb-y-offset: -33px;
  }
  &:host(:not([has-histogram])) .scale--m .thumb--value {
    --calcite-slider-thumb-y-offset: -44px;
  }
  &:host(:not([has-histogram])) .scale--l .thumb--value {
    --calcite-slider-thumb-y-offset: -49px;
  }
}

.thumb:focus,
.thumb--active {
  .handle {
    @apply bg-brand;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%); // shadow 1 press
  }
}

.thumb:hover.thumb--precise:after,
.thumb:focus.thumb--precise:after,
.thumb--active.thumb--precise:after {
  @apply bg-brand;
}

.track {
  @apply h-0.5 rounded-none relative;
  background-color: var(--calcite-ui-border-2);
  transition: all 250ms ease-in;
}

.track__range {
  @apply absolute
    top-0
    h-0.5
    bg-brand;
}
.container--range {
  .track__range {
    &:hover {
      cursor: ew-resize;
    }
    &:after {
      @apply absolute w-full;
      content: "";
      top: calc(calc(var(--calcite-slider-full-handle-height) * 0.5) * -1);
      height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
    }
  }
}

.tick {
  @apply absolute
    w-0.5
    h-1
    border
    border-solid;
  background-color: var(--calcite-ui-border-input);
  border-color: var(--calcite-ui-foreground-1);
  top: -2px;
  pointer-events: none;
  margin-inline-start: calc(-1 * config("theme.margin[0.5]"));
}

.tick--active {
  @apply bg-brand;
}

.tick__label {
  @apply flex
    justify-center
    pointer-events-none
    mt-3.5;
}

.tick__label--min {
  transition: opacity 150ms;
}

.tick__label--max {
  transition: opacity 50ms;
}

:host([has-histogram][label-handles]),
:host([has-histogram][precise]) {
  .tick__label--min,
  .tick__label--max {
    @apply font-normal text-color-3;
  }
}

.graph {
  color: var(--calcite-ui-foreground-3);
}

// Ensure we have enough space on variants with text elements to prevent overlap
:host([label-ticks][ticks]) {
  .container {
    // match tick__label top margin + font-size
    padding-bottom: calc(config("theme.margin[3.5]") + var(--calcite-slider-container-font-size));
  }
}
:host([has-histogram]) {
  &:host([precise][label-handles]) {
    .container {
      padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
    }
  }
  &:host([label-handles]:not([precise])) {
    .container {
      padding-bottom: calc(calc(var(--calcite-slider-handle-size) * 0.5) + 1em);
    }
  }
  &:host([precise]:not([label-handles])) {
    .container {
      padding-bottom: var(--calcite-slider-full-handle-height);
    }
  }
}
:host(:not([has-histogram])) {
  &:host([precise]:not([label-handles])) {
    .container {
      padding-top: var(--calcite-slider-full-handle-height);
    }
    .container--range {
      padding-bottom: var(--calcite-slider-full-handle-height);
    }
  }
  &:host([label-handles]:not([precise])) {
    .container {
      padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
    }
  }
  &:host([label-handles][precise]) {
    .container {
      padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
    }
    .container--range {
      padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
    }
  }
}

@include hidden-form-input();