@import "../core/exports";
@import "../page/page.mobiscroll";
@import "../progress/progress.mobiscroll";
@import "./slider.mobiscroll.colors";
@import "./slider";

@include exports("slider.mobiscroll") {
  .mbsc-mobiscroll {
    &.mbsc-slider .mbsc-input-wrap {
      padding: 0 .5em;
    }

    .mbsc-slider-handle {
      top: 50%;
      width: 1em;
      height: 1em;
      border-radius: 1.125em;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: -webkit-transform .2s ease-in-out;
      transition: transform .2s ease-in-out;
    }

    .mbsc-slider-handle:focus,
    .mbsc-active .mbsc-slider-handle {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track {
      opacity: .4;
    }

    &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-slider-handle {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    .mbsc-slider-tooltip {
      top: -1.91666em;
      width: 2.33333333em;
      height: 2.33333333em;
      border-radius: 2em;
      margin-right: -1.1666em;
      line-height: 2.33333333em;
      text-align: center;
      font-size: .75em;
      z-index: 5;
      -webkit-transform: scale(.4) translate3d(0, 5em, 0);
      transform: scale(.4) translate3d(0, 5em, 0);
      -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
      transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    }

    .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip,
    .mbsc-active .mbsc-slider-tooltip {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
      transform: translate3d(0, 0, 0) scale(1);
    }

    &.mbsc-slider-has-tooltip .mbsc-slider-handle:focus,
    &.mbsc-slider-has-tooltip .mbsc-active .mbsc-slider-handle {
      -webkit-transform: scale(.5);
      transform: scale(.5);
    }

    &.mbsc-slider-primary {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-primary;
      }
    }

    &.mbsc-slider-secondary {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-secondary;
      }
    }

    &.mbsc-slider-success {

      .mbsc-slider-tooltip,
      .mbsc-slider-handlem .mbsc-progress-bar {
        background: $mbsc-mobiscroll-success;
      }
    }

    &.mbsc-slider-danger {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-danger;
      }
    }

    &.mbsc-slider-warning {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-warning;
      }
    }

    &.mbsc-slider-info {

      .mbsc-slider-tooltip,
      .mbsc-slider-handle,
      .mbsc-progress-bar {
        background: $mbsc-mobiscroll-info;
      }
    }
  }

  @include mbsc-mobiscroll-slider(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent));
}
