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

@include exports("slider.ios") {
  .mbsc-ios {

    .mbsc-slider-handle {
      top: 50%;
      width: 1.75em;
      height: 1.75em;
      margin: -.875em -.875em 0 0;
      border-radius: 1.25em;
      box-shadow: 0 0 1em rgba(0, 0, 0, .1), 0 0 .0625em rgba(0, 0, 0, .15), 0 .125em .125em rgba(0, 0, 0, .15);
    }

    .mbsc-slider-tooltip {
      font-size: .875em;
      width: 3em;
      margin-right: -1.5em;
      top: -1em;
      text-align: center;
      opacity: 0;
      transition: opacity .2s ease-in-out;
    }

    .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip,
    .mbsc-active .mbsc-slider-tooltip {
      opacity: 1;
    }

    .mbsc-slider-step {
      height: .5em;
      width: .0625em;
      margin-top: -.1875em;
      margin-left: -.0625em;
    }

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

    &.mbsc-slider-primary .mbsc-progress-bar {
      background: $mbsc-ios-primary;
    }

    &.mbsc-slider-secondary .mbsc-progress-bar {
      background: $mbsc-ios-secondary;
    }

    &.mbsc-slider-success .mbsc-progress-bar {
      background: $mbsc-ios-success;
    }

    &.mbsc-slider-danger .mbsc-progress-bar {
      background: $mbsc-ios-danger;
    }

    &.mbsc-slider-warning .mbsc-progress-bar {
      background: $mbsc-ios-warning;
    }

    &.mbsc-slider-info .mbsc-progress-bar {
      background: $mbsc-ios-info;
    }
  }

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