@import "../core/exports";
@import "../collapsible/collapsible.ios";
@import "../borders/borders.ios";
@import "../page/page.ios";
@import "../input/input.ios";
@import "../slider/slider.ios";
@import "../rating/rating.ios";
@import "../notifications/notifications.ios";
@import "./forms.ios.colors";
@import "./forms";

@include exports("forms.ios") {
  .mbsc-ios {
    .mbsc-desc {
      opacity: .5;
    }

    .mbsc-divider,
    .mbsc-form-group-title {
      position: relative;
      z-index: 2;
      margin-top: -1px;
      font-size: 0.75em;
      line-height: 1.5em;
      text-transform: uppercase;
    }

    .mbsc-divider {
      padding: 2.333334em 1.333334em .5em 1.333334em;
    }

    .mbsc-form-group-title {
      padding: .5em 1.333334em;
    }

    &.mbsc-form-outline .mbsc-divider,
    &.mbsc-form-outline .mbsc-form-group-title,
    &.mbsc-form-box .mbsc-divider,
    &.mbsc-form-box .mbsc-form-group-title {
      border: 0;
    }

    /* Form grid */

    .mbsc-form-grid {
      margin-top: .75em;
      margin-bottom: .75em;
    }

    .mbsc-form-grid .mbsc-input-box.mbsc-control-w,
    .mbsc-form-grid .mbsc-input-outline.mbsc-control-w {
      margin: .75em 1em;
    }

    /* Checkbox, switch */
    &.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-switch .mbsc-err-msg,
    &.mbsc-radio .mbsc-err-msg {
      padding: 0;
      margin-bottom: -1em;
    }

    /* Checkbox, radio */
    &.mbsc-ltr.mbsc-checkbox,
    &.mbsc-ltr.mbsc-radio {
      padding: .875em 3.75em .875em 1em;
    }

    &.mbsc-rtl.mbsc-checkbox,
    &.mbsc-rtl.mbsc-radio {
      padding: .875em 1em .875em 3.75em;
    }

    &.mbsc-checkbox input:disabled + .mbsc-checkbox-box,
    &.mbsc-checkbox input:disabled ~ .mbsc-label,
    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
    &.mbsc-radio input:disabled + .mbsc-radio-box,
    &.mbsc-radio input:disabled ~ .mbsc-label,
    &.mbsc-radio input:disabled ~ .mbsc-desc,
    &.mbsc-switch input:disabled + .mbsc-switch-track,
    &.mbsc-switch input:disabled ~ .mbsc-label,
    &.mbsc-switch input:disabled ~ .mbsc-desc {
      opacity: .3;
    }

    .mbsc-checkbox-box:after,
    .mbsc-radio-box:after {
      transition: opacity .2s ease-in-out;
    }

    /* Checkbox */
    .mbsc-checkbox-box {
      right: 1em;
      width: 1.75em;
      height: 1.75em;
      margin-top: -.875em;
      background: transparent;
      border-radius: 2em;
    }

    &.mbsc-rtl .mbsc-checkbox-box {
      right: auto;
      left: 1em;
    }

    .mbsc-checkbox-box:after {
      top: 32%;
      left: 26%;
      width: .75em;
      height: .375em;
    }

    /* Checkbox color presets */
    &.mbsc-checkbox-primary {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-primary;
      }
    }

    &.mbsc-checkbox-secondary {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-secondary;
      }
    }

    &.mbsc-checkbox-success {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-success;
      }
    }

    &.mbsc-checkbox-danger {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-danger;
      }
    }

    &.mbsc-checkbox-warning {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-warning;
      }
    }

    &.mbsc-checkbox-info {

      .mbsc-checkbox-box,
      .mbsc-checkbox-box:after {
        border-color: $mbsc-ios-info;
      }
    }

    /* Radio */
    .mbsc-radio-box {
      right: 1.125em;
      margin-top: -.625em;
      background: transparent;
    }

    &.mbsc-rtl .mbsc-radio-box {
      right: auto;
      left: 1.125em;
    }

    .mbsc-radio-box:after {
      position: absolute;
      top: 44%;
      left: 23%;
      width: 1em;
      height: .5em;
      border-radius: 0;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    /* Radio color presets */
    &.mbsc-radio-primary .mbsc-radio-box:after {
      border-color: $mbsc-ios-primary;
    }

    &.mbsc-radio-secondary .mbsc-radio-box:after {
      border-color: $mbsc-ios-secondary;
    }

    &.mbsc-radio-success .mbsc-radio-box:after {
      border-color: $mbsc-ios-success;
    }

    &.mbsc-radio-danger .mbsc-radio-box:after {
      border-color: $mbsc-ios-danger;
    }

    &.mbsc-radio-warning .mbsc-radio-box:after {
      border-color: $mbsc-ios-warning;
    }

    &.mbsc-radio-info .mbsc-radio-box:after {
      border-color: $mbsc-ios-info;
    }

    /* Buttons */
    &.mbsc-btn {
      margin: .5em .25em;
      padding: .625em 1.375em;
      border: 0;
      border-radius: .25em;
    }

    .mbsc-btn-ic {
      padding-right: .625em;
    }

    .mbsc-btn-icon-only .mbsc-btn-ic {
      padding: 0;
    }

    &.mbsc-no-touch.mbsc-btn:not(:disabled):not(.mbsc-active):hover {
      opacity: .8;
    }

    &.mbsc-btn.mbsc-active {
      opacity: .6;
    }

    &.mbsc-btn-flat.mbsc-active {
      opacity: .6;
    }

    &.mbsc-btn-flat:disabled {
      opacity: .8;
    }

    .mbsc-btn-group,
    .mbsc-btn-group-justified,
    .mbsc-btn-group-block {
      margin: .5em .75em;
    }

    .mbsc-btn-group-block {
      margin: .5em 1em;
    }

    /* Button color presets */
    &.mbsc-btn-primary.mbsc-btn {
      background: $mbsc-ios-primary;

      &.mbsc-btn-flat {
        color: $mbsc-ios-primary;
      }
    }

    &.mbsc-btn-secondary.mbsc-btn {
      background: $mbsc-ios-secondary;

      &.mbsc-btn-flat {
        color: $mbsc-ios-secondary;
      }
    }

    &.mbsc-btn-success.mbsc-btn {
      background: $mbsc-ios-success;

      &.mbsc-btn-flat {
        color: $mbsc-ios-success;
      }
    }

    &.mbsc-btn-danger.mbsc-btn {
      background: $mbsc-ios-danger;

      &.mbsc-btn-flat {
        color: $mbsc-ios-danger;
      }
    }

    &.mbsc-btn-warning.mbsc-btn {
      background: $mbsc-ios-warning;

      &.mbsc-btn-flat {
        color: $mbsc-ios-warning;
      }
    }

    &.mbsc-btn-info.mbsc-btn {
      background: $mbsc-ios-info;

      &.mbsc-btn-flat {
        color: $mbsc-ios-info;
      }
    }

    &.mbsc-btn-light.mbsc-btn {
      background: $mbsc-ios-light;

      &.mbsc-btn-flat {
        color: darken($mbsc-ios-light, 20%);
      }
    }

    &.mbsc-btn-dark.mbsc-btn {
      background: $mbsc-ios-dark;

      &.mbsc-btn-flat {
        color: $mbsc-ios-dark;
      }
    }

    /* Flat buttons */
    &.mbsc-btn-flat.mbsc-btn {
      background: transparent;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn.mbsc-active {
      opacity: 1;
    }

    /* Outline buttons */
    &.mbsc-btn-outline.mbsc-btn {
      &.mbsc-btn-primary {
        border-color: $mbsc-ios-primary;
        color: $mbsc-ios-primary;

        &.mbsc-active {
          background: $mbsc-ios-primary;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-secondary {
        border-color: $mbsc-ios-secondary;
        color: $mbsc-ios-secondary;

        &.mbsc-active {
          background: $mbsc-ios-secondary;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-success {
        border-color: $mbsc-ios-success;
        color: $mbsc-ios-success;

        &.mbsc-active {
          background: $mbsc-ios-success;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-danger {
        border-color: $mbsc-ios-danger;
        color: $mbsc-ios-danger;

        &.mbsc-active {
          background: $mbsc-ios-danger;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-warning {
        border-color: $mbsc-ios-warning;
        color: $mbsc-ios-warning;

        &.mbsc-active {
          background: $mbsc-ios-warning;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-info {
        border-color: $mbsc-ios-info;
        color: $mbsc-ios-info;

        &.mbsc-active {
          background: $mbsc-ios-info;
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-light {
        border-color: darken($mbsc-ios-light, 25%);
        color: darken($mbsc-ios-light, 25%);

        &.mbsc-active {
          background: darken($mbsc-ios-light, 25%);
          color: $mbsc-ios-light;
        }
      }

      &.mbsc-btn-dark {
        border-color: $mbsc-ios-dark;
        color: $mbsc-ios-dark;

        &.mbsc-active {
          background: $mbsc-ios-dark;
          color: $mbsc-ios-light;
        }
      }
    }

    /* Switch */
    &.mbsc-ltr.mbsc-switch {
      padding: .875em 5em .875em 1em;
    }

    &.mbsc-rtl.mbsc-switch {
      padding: .875em 1em .875em 5em;
    }

    .mbsc-switch-track {
      right: 1em;
      width: 3em;
      height: 1.75em;
      padding: 0;
      margin-top: -.96875em;
      border-radius: 1.25em;
      box-sizing: content-box;
    }

    &.mbsc-rtl .mbsc-switch-track {
      right: auto;
      left: 1em;
    }

    .mbsc-switch-track:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 1.25em;
      -webkit-transform: scale(1);
      transform: scale(1);
      transition: transform .2s ease-out;
    }

    .mbsc-switch-track .mbsc-progress-track {
      margin: 0 .875em;
    }

    .mbsc-switch-handle {
      z-index: 2;
      top: 50%;
      left: 50%;
      width: 1.75em;
      height: 1.75em;
      margin: -.875em 0 0 -.875em;
      border-radius: 1.75em;
      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);
      transition: transform .2s ease-out;
    }

    &.mbsc-rtl .mbsc-switch-handle {
      margin: -.875em -.875em 0 0;
    }

    &.mbsc-switch input:checked + .mbsc-switch-track:after {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    /* swithc color presets */
    &.mbsc-switch-primary.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-primary;
      background: $mbsc-ios-primary;
    }

    &.mbsc-switch-secondary.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-secondary;
      background: $mbsc-ios-secondary;
    }

    &.mbsc-switch-success.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-success;
      background: $mbsc-ios-success;
    }

    &.mbsc-switch-danger.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-danger;
      background: $mbsc-ios-danger;
    }

    &.mbsc-switch-warning.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-warning;
      background: $mbsc-ios-warning;
    }

    &.mbsc-switch-info.mbsc-switch input:checked + .mbsc-switch-track {
      border-color: $mbsc-ios-info;
      background: $mbsc-ios-info;
    }

    /* Segmented & Stepper */
    &.mbsc-segmented.mbsc-segmented-group {
      padding: .75em;
      // v5 compatibility
      margin: 0;
      border-radius: 0;
    }

    &.mbsc-segmented.mbsc-stepper {
      position: absolute;
      display: block;
      margin-top: -1em;
      // v5 compatibility
      background: none;
      border-radius: 0;
    }

    .mbsc-segmented-content {
      height: 2.142857142em;
      margin-left: -.07142857em;
      line-height: 2.142857142857143em;
      padding: 0 .42857em;
    }

    &.mbsc-ltr .mbsc-stepper-minus .mbsc-segmented-content,
    &.mbsc-ltr .mbsc-segmented-item:first-child .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-stepper-plus .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-segmented-item:last-child .mbsc-segmented-content {
      border-top-left-radius: .25em;
      border-bottom-left-radius: .25em;
    }

    .mbsc-segmented.mbsc-stepper.mbsc-control-w:before,
    .mbsc-segmented.mbsc-stepper.mbsc-control-w:after {
      border: 0;
    }

    &.mbsc-ltr .mbsc-stepper-plus .mbsc-segmented-content,
    &.mbsc-ltr .mbsc-segmented-item:last-child .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-stepper-minus .mbsc-segmented-content,
    &.mbsc-rtl .mbsc-segmented-item:first-child .mbsc-segmented-content {
      border-top-right-radius: .25em;
      border-bottom-right-radius: .25em;
    }

    &.mbsc-ltr.mbsc-stepper-cont {
      padding: 1.5em 11.75em 1.5em 1em;
    }

    &.mbsc-rtl.mbsc-stepper-cont {
      padding: 1.5em 1em 1.5em 11.75em;
    }

    &.mbsc-ltr .mbsc-stepper {
      right: 1em;
    }

    &.mbsc-rtl .mbsc-stepper {
      left: 1em;
    }

    &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content,
    &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content {
      background: none;
    }

    .mbsc-stepper .mbsc-segmented-item {
      width: 3.25em;
    }

    .mbsc-stepper input {
      width: 3.714286em;
      left: 3.714286em;
      z-index: 3;
    }

    &.mbsc-segmented {

      /* Stepper color presets */
      .mbsc-segmented-primary {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-primary;
          color: $mbsc-ios-primary;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-primary;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-primary;
          background: rgba($mbsc-ios-primary, .45);
        }
      }

      .mbsc-segmented-secondary {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-secondary;
          color: $mbsc-ios-secondary;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-secondary;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-secondary;
          background: rgba($mbsc-ios-secondary, .45);
        }
      }

      .mbsc-segmented-success {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-success;
          color: $mbsc-ios-success;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-success;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-success;
          background: rgba($mbsc-ios-success, .45);
        }
      }

      .mbsc-segmented-danger {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-danger;
          color: $mbsc-ios-danger;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-danger;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-danger;
          background: rgba($mbsc-ios-danger, .45);
        }
      }

      .mbsc-segmented-warning {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-warning;
          color: $mbsc-ios-warning;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-warning;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-warning;
          background: rgba($mbsc-ios-warning, .45);
        }
      }

      .mbsc-segmented-info {
        .mbsc-segmented-content {
          border-color: $mbsc-ios-info;
          color: $mbsc-ios-info;
        }

        &.mbsc-segmented-item input:checked + .mbsc-segmented-content {
          background: $mbsc-ios-info;
        }

        &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
          color: $mbsc-ios-info;
          background: rgba($mbsc-ios-info, .45);
        }
      }
    }

    &.mbsc-no-touch {

      /* Segmented hover color presets*/
      .mbsc-segmented-primary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-primary, .15);
        }
      }

      .mbsc-segmented-secondary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-secondary, .15);
        }
      }

      .mbsc-segmented-success {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-success, .15);
        }
      }

      .mbsc-segmented-danger {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-danger, .15);
        }
      }

      .mbsc-segmented-warning {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-warning, .15);
        }
      }

      .mbsc-segmented-info {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-info, .15);
        }
      }

      /* Stepper color presets*/
      &.mbsc-stepper-primary {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-primary, .15);
        }
      }

      &.mbsc-stepper-secondary {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-secondary, .15);
        }
      }

      &.mbsc-stepper-success {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-success, .15);
        }
      }

      &.mbsc-stepper-danger {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-danger, .15);
        }
      }

      &.mbsc-stepper-warning {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-warning, .15);
        }
      }

      &.mbsc-stepper-info {
        .mbsc-segmented .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-ios-info, .15);
        }
      }
    }

    /* Stepper color presets */
    &.mbsc-stepper-primary {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-primary;
        color: $mbsc-ios-primary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-primary;
      }
    }

    &.mbsc-stepper-secondary {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-secondary;
        color: $mbsc-ios-secondary;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-secondary;
      }
    }

    &.mbsc-stepper-success {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-success;
        color: $mbsc-ios-success;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-success;
      }
    }

    &.mbsc-stepper-danger {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-danger;
        color: $mbsc-ios-danger;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-danger;
      }
    }

    &.mbsc-stepper-warning {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-warning;
        color: $mbsc-ios-warning;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-warning;
      }
    }

    &.mbsc-stepper-info {
      .mbsc-segmented-content {
        border-color: $mbsc-ios-info;
        color: $mbsc-ios-info;
      }

      .mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content {
        background: $mbsc-ios-info;
      }
    }
  }

  @include mbsc-ios-forms(ios, $mbsc-ios-colors);
}
