@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

.ymu-slider {

  position: relative;
  display: flex;
  align-items: center;
  height: $slider-height;
  line-height: $slider-height;

  &__bd {
    position: relative;
    height: 100%;
    flex: 1;
    margin-right: $slider-thumb-width;
  }

  &__runway {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    right: -$slider-thumb-width;
    background-color: $slider-runway-bg-color;
  }

  &__track {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 100%;
    background-color: $slider-track-bg-color;
  }

  &__thumb {
    position: absolute;
    width: $slider-thumb-width;
    height: $slider-thumb-height;
    top: 50%;
    cursor: move;
    background-color: $slider-thumb-bg-color;
    border-radius: 50%;
    transform: translate3d(0, -50%, 0);
    @include slider-box-shadow;
  }

  &--disabled .ymu-slider__bd {
    opacity: $slider-disabled-opacity;
  }
}