@import "../core/exports";
@import "../core/icons";
@import "./progress.ios.colors";
@import "./progress";

@include exports("progress.ios") {
  .mbsc-ios {
    &.mbsc-progress {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      min-height: 4em;
      margin-top: -1px;
      padding: .625em 1em;
      align-items: center;
      box-sizing: border-box;
    }

    &.mbsc-progress.mbsc-progress-w.mbsc-control-w .mbsc-label {
      padding: 0;
    }

    &.mbsc-progress .mbsc-input-ic {
      top: .0625em;
      margin: 0;
    }

    &.mbsc-progress.mbsc-ic-left .mbsc-left-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right .mbsc-right-ic {
      right: auto;
      left: -.375em;
    }

    &.mbsc-progress.mbsc-ic-right .mbsc-right-ic,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left .mbsc-left-ic {
      left: auto;
      right: -.375em;
    }

    &.mbsc-progress .mbsc-input-wrap {
      position: relative;
      padding: 0 .75em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-w.mbsc-ic-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-w.mbsc-ic-right .mbsc-input-wrap {
      padding-left: 2.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-w.mbsc-ic-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-w.mbsc-ic-left .mbsc-input-wrap {
      padding-right: 2.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 3.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 3.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap {
      padding-left: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap {
      padding-right: 5.5em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-progress-value {
      left: 2.2857em;
    }

    &.mbsc-ltr.mbsc-progress.mbsc-ic-right.mbsc-progress-value-right .mbsc-progress-value,
    &.mbsc-rtl.mbsc-progress.mbsc-ic-left.mbsc-progress-value-left .mbsc-progress-value {
      right: 2.2857em;
    }

    .mbsc-progress-cont {
      padding: 1em 0;
    }

    .mbsc-progress-track {
      border-radius: 1em;
      height: .125em;
    }

    .mbsc-progress-bar {
      z-index: 1;
      border-radius: 1em;
    }

    .mbsc-progress-value {
      width: 3.715em;
      font-size: .875em;
    }

    .mbsc-progress-step-label {
      top: 1.333334em;
    }

    &.mbsc-progress.mbsc-ic-left:before,
    &.mbsc-progress.mbsc-ic-left:after {
      left: 1em;
    }

    /* Stacked label */
    .mbsc-label-stacked.mbsc-progress.mbsc-control-w,
    .mbsc-label-floating.mbsc-progress.mbsc-control-w {
      .mbsc-label {
        font-size: .75em;
        position: absolute;
        top: .666667em;
        line-height: 1em;
        padding: 0;
        overflow: visible;
      }

      &:not(.mbsc-slider) .mbsc-input-wrap {
        padding-left: 0;
        padding-right: 0;
      }

      .mbsc-label + .mbsc-input-wrap {
        padding-top: 1em;
        padding-bottom: 1em;

        .mbsc-input-ic {
          top: 1.0625em;
        }
      }

      &.mbsc-ltr.mbsc-ic-right .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-left .mbsc-input-wrap {
        padding-right: 2.5em;
      }

      &.mbsc-ltr.mbsc-ic-left .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-right .mbsc-input-wrap {
        padding-left: 2.5em;
      }

      &.mbsc-ltr.mbsc-progress-value-right .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-progress-value-left .mbsc-input-wrap {
        padding-right: 3.5em;
      }

      &.mbsc-ltr.mbsc-progress-value-left .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-progress-value-right .mbsc-input-wrap {
        padding-left: 3.5em;
      }

      &.mbsc-ltr.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap {
        padding-left: 5.5em;
      }

      &.mbsc-ltr.mbsc-ic-right.mbsc-progress-value-right .mbsc-input-wrap,
      &.mbsc-rtl.mbsc-ic-left.mbsc-progress-value-left .mbsc-input-wrap {
        padding-right: 5.5em;
      }
    }

    /* Progress color presets */
    .mbsc-progress-primary .mbsc-progress-bar {
      background: $mbsc-ios-primary;
    }

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

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

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

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

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

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