.wui-slider {
  width: 100%;
  position: relative;
  outline: none;

  &:not(&--disabled):focus {
    .wui-slider-controller {
      /* box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 2px rgba(0, 0, 0, 0.12),
        0 0 0 3px fade(@color-primary, 20%); */
      @apply border border-primary-700 shadow-primary-500;
    }
  }

  &-label {
    @apply text-black block;
    font-size: 14px;
    margin-bottom: 14px;
  }

  &-line {
    @apply bg-neutral-200;
    height: 6px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
  }

  &-bar {
    @apply bg-primary-500;
    height: 100%;
    border-radius: 2px;
    transition: background-color 0.15s;
  }

  &-point {
    position: absolute;
    background-color: #000;
    width: 1px;
    top: 10px;
    height: 5px;
    transform: translateX(-50%);
    transition: all 0.09s;

    &--active {
      @apply bg-primary-500;
    }
  }

  &-controller {
    @apply bg-white border border-neutral-300;
    box-sizing: border-box;
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.2),
      0 2px 2px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    transition: all 0.2s;
    width: 9px;
    height: 19px;

    &-wrapper {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      line-height: 1;
      z-index: 99;
      background-color: transparent;
      user-select: none;
      cursor: ew-resize;
      padding: 4px;
    }
  }

  &-numbers {
    position: relative;
    padding-top: 5px;

    & > div {
      position: absolute;
      display: inline-block;
      font-size: 12px;
      transform: translateX(-50%);
    }
  }

  &-wrap-points {
    height: 8px;
  }

  &--disabled {
    .wui-slider {
      &-controller {
        @apply cursor-not-allowed border-neutral-300;

        &-wrapper {
          @apply cursor-not-allowed;
        }
      }

      &-line {
        @apply cursor-not-allowed;
      }

      &-bar {
        @apply cursor-not-allowed bg-neutral-300 border-neutral-400;

        & ~ .wui-slider-point--active {
          @apply bg-neutral-700;
        }
      }

      &-point {
        @apply cursor-not-allowed bg-neutral-700;
      }
    }
  }
}