/**
 * Slider Style
 */


.at-slider {
  position: relative;

  /* element */
  &__input {
    float: right;
    margin-top: 3px;
  }

  &__track {
    position: relative;
    margin: $slider-margin;
    width: 100%;
    height: $slider-bar-height;
    vertical-align: middle;
    border-radius: $slider-bar-border-radius;
    background-color: $slider-track-bg-color;
    user-select: none;
    cursor: pointer;
  }

  &__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: $slider-bar-height;
    background-color: $slider-bar-bg-color;
    border-radius: $slider-bar-border-radius;

  }

  &__mark {
    position: absolute;
    width: $slider-mark-size;
    height: $slider-mark-size;
    transform: translateY(-25%);
    background: white;
    border-radius: 50%;
    border: solid 2px $primary-500;

    &__not {
      border: solid 2px $grey-800 !important;
    }

    &__text {
      top: 14px;
      position: absolute;
      display: inline-block;
      vertical-align: center;
      transform: translateX(-48%);
      width: 30%;
      text-align: center;
    }
  }

  &__dot-wrapper {
    position: absolute;
    top: $slider-dot-wrapper-offset;
    width: $slider-dot-wrapper-size;
    height: $slider-dot-wrapper-size;
    text-align: center;
    background-color: transparent;
    user-select: none;

    &:hover,
    &.at-slider__dot-wrapper--hover {
      cursor: grab;
    }

    &.at-slider__dot-wrapper--drag {
      cursor: grabbing;
    }

    /* tooltip */
    .at-tooltip {
      display: block;
      height: 100%;
      line-height: 1;

      &::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
      }
    }

    .at-tooltip__trigger {
      vertical-align: middle;
    }
  }

  &__dot {
    width: $slider-dot-size;
    height: $slider-dot-size;
    border-radius: 50%;
    border: 1px solid $primary-500;
    background: white;
    transition: all .3s;

    &:hover,
    &--hover,
    &--drag {
      transform: scale(1.3);
    }

    &:hover,
    &--hover {
      cursor: grab;
    }

    &--drag {
      cursor: grabbing;
    }
  }

  /* modifier */
  &--disabled {
    .at-slider__bar {
      background-color: $slider-bar-bg-color-disabled;
    }

    .at-slider__dot {
      background-color: $slider-dot-color-disabled;
    }
  }
}