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

@mixin slider-box-shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.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: #fff;
    border-radius: 50%;
    transform: translate3d(0, -50%, 0);
    @include slider-box-shadow;

    &.is-active {
      z-index: 15;
    }
  }
}