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

@include exports("forms.mobiscroll") {

  .mbsc-mobiscroll {

    .mbsc-divider,
    .mbsc-form-group-title {
      padding: .5em 1em;
    }

    .mbsc-err-msg {
      position: absolute;
      padding-top: .333334em;
      font-size: .75em;
    }

    /* Form grid */

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

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

    /* Checkbox, switch, radio */
    &.mbsc-checkbox .mbsc-err-msg,
    &.mbsc-switch .mbsc-err-msg,
    &.mbsc-radio .mbsc-err-msg {
      padding-top: 0;
    }

    /* Checkbox */
    &.mbsc-ltr.mbsc-checkbox {
      padding: 1em 3.125em 1em 1em;
    }

    &.mbsc-rtl.mbsc-checkbox {
      padding: 1em 1em 1em 3.125em;
    }

    .mbsc-checkbox-box {
      margin-top: -.5625em;
      width: 1.125em;
      height: 1.125em;
      right: 1em;
    }

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

    .mbsc-checkbox-box:after {
      top: 0.25em;
      left: .185em;
      width: .8125em;
      height: .4375em;
    }

    /* Checkbox color presets */
    &.mbsc-checkbox-primary .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-primary;
    }

    &.mbsc-checkbox-secondary .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-secondary;
    }

    &.mbsc-checkbox-success .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-success;
    }

    &.mbsc-checkbox-danger .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-danger;
    }

    &.mbsc-checkbox-warning .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-warning;
    }

    &.mbsc-checkbox-info .mbsc-checkbox-box {
      background: $mbsc-mobiscroll-info;
    }

    /* Radio */
    &.mbsc-radio {
      padding: 1em 3.125em 1em 1em;
    }

    &.mbsc-rtl.mbsc-radio {
      padding: 1em 1em 1em 3.125em;
    }

    .mbsc-radio-box {
      right: 1em;
      width: 1.125em;
      height: 1.125em;
      margin-top: -.5625em;
      background: transparent;
    }

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

    .mbsc-radio-box:after {
      width: .5em;
      height: .5em;
      margin-top: -.25em;
      margin-left: -.25em;
      border-radius: .625em;
    }

    &.mbsc-radio input:checked + .mbsc-radio-box {
      background: transparent;
    }

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

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-primary;
      }
    }

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

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-secondary;
      }
    }

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

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-success;
      }
    }

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

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-danger;
      }
    }

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

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-warning;
      }
    }

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

      .mbsc-radio-box:after {
        background: $mbsc-mobiscroll-info;
      }
    }

    /* Checkbox, Switch, Radio */
    &.mbsc-checkbox input:disabled ~ .mbsc-label,
    &.mbsc-checkbox input:disabled ~ .mbsc-desc,
    &.mbsc-radio input:disabled ~ .mbsc-label,
    &.mbsc-radio input:disabled ~ .mbsc-desc,
    &.mbsc-switch input:disabled ~ .mbsc-label,
    &.mbsc-switch input:disabled ~ .mbsc-desc {
      opacity: .4;
    }

    .mbsc-checkbox-box:after,
    .mbsc-radio-box:after {
      opacity: 1;
      -webkit-transform: scale(0) rotate(-45deg);
      transform: scale(0) rotate(-45deg);
      transition: transform .1s ease-out;
    }

    &.mbsc-checkbox input:checked + .mbsc-checkbox-box:after,
    &.mbsc-radio input:checked + .mbsc-radio-box:after {
      opacity: 1;
      -webkit-transform: scale(1) rotate(-45deg);
      transform: scale(1) rotate(-45deg);
    }

    /* Buttons */
    &.mbsc-btn {
      margin: .5em;
      padding: .6875em;
      font-size: 1em;
      text-transform: uppercase;
    }

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

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

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

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

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

    &.mbsc-btn-flat {
      background: transparent;
      border-color: transparent;
    }

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

    &.mbsc-btn-flat:disabled {
      background: transparent;
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-primary, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-primary, .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-secondary, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-secondary, .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-success, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-success, .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-danger, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-danger, .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-warning, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-warning, .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-info, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-info, .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          color: darken($mbsc-mobiscroll-light, 25%);
          background: rgba(darken($mbsc-mobiscroll-light, 25%), .2);
        }

        &.mbsc-active {
          background: rgba(darken($mbsc-mobiscroll-light, 25%), .3);
        }
      }
    }

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

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

        &:not(:disabled):not(.mbsc-active):hover {
          background: rgba($mbsc-mobiscroll-dark, .2);
        }

        &.mbsc-active {
          background: rgba($mbsc-mobiscroll-dark, .3);
        }
      }
    }

    &.mbsc-btn-flat.mbsc-btn,
    &.mbsc-btn-outline.mbsc-btn {
      background: transparent;
    }

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

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

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

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-primary;
        }
      }

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-secondary;
        }
      }

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-success;
        }
      }

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-danger;
        }
      }

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-warning;
        }
      }

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-info;
        }
      }

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

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

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

        &.mbsc-active {
          background: $mbsc-mobiscroll-dark;
        }
      }
    }

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

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

    .mbsc-switch-track {
      right: 1em;
      width: 2.375em;
      height: .875em;
      padding: 0 .75em;
      margin-top: -.4375em;
      border-radius: 1.25em;
    }

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

    .mbsc-switch-handle {
      top: .25em;
      left: .25em;
      margin: 0;
      width: 1.5em;
      height: 1.5em;
      border-radius: 1.25em;
    }

    &.mbsc-rtl .mbsc-switch-handle {
      right: .25em;
    }

    .mbsc-active .mbsc-switch-handle {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    &.mbsc-switch input:disabled + .mbsc-switch-track {
      opacity: .7;
    }

    /* Switch color presets */
    &.mbsc-switch.mbsc-switch-primary input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-primary, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-primary;
      }
    }

    &.mbsc-switch.mbsc-switch-secondary input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-secondary, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-secondary;
      }
    }

    &.mbsc-switch.mbsc-switch-success input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-success, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-success;
      }
    }

    &.mbsc-switch.mbsc-switch-danger input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-danger, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-danger;
      }
    }

    &.mbsc-switch.mbsc-switch-warning input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-warning, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-warning;
      }
    }

    &.mbsc-switch.mbsc-switch-info input:checked {
      + .mbsc-switch-track {
        background: lighten($mbsc-mobiscroll-info, 20%);
      }

      + .mbsc-switch-track .mbsc-switch-handle {
        background: $mbsc-mobiscroll-info;
      }
    }

    /* Stepper and Segmented */
    &.mbsc-segmented {
      padding: .5em 1em;
    }

    .mbsc-segmented-content {
      height: 2.28571428em;
      margin: 0 -.071428em;
      line-height: 2.28575em;
      padding: 0 .285714em;
      text-transform: uppercase;
    }

    &.mbsc-ltr.mbsc-stepper-cont {
      padding: 1.75em 12.875em 1.75em 1em;
    }

    &.mbsc-rtl.mbsc-stepper-cont {
      padding: 1.75em 1em 1.75em 12.875em;
    }

    .mbsc-stepper {
      margin-top: -1.125em;
    }

    &.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: transparent;
    }

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

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

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-primary, .35)
      }
    }

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

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

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-secondary, .35)
      }
    }

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

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

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-success, .35)
      }
    }

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

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

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-danger, .35)
      }
    }

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

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

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-warning, .35)
      }
    }

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

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

      &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content {
        background: rgba($mbsc-mobiscroll-info, .35)
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

    &.mbsc-no-touch {

      /* Segmented hover color styles */
      .mbsc-segmented-primary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-primary, .35)
        }
      }

      .mbsc-segmented-secondary {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-secondary, .35)
        }
      }

      .mbsc-segmented-success {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-success, .35)
        }
      }

      .mbsc-segmented-danger {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-danger, .35)
        }
      }

      .mbsc-segmented-warning {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-warning, .35)
        }
      }

      .mbsc-segmented-info {
        &.mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-info, .35)
        }
      }

      /* Stepper hover color styles */
      &.mbsc-stepper-primary {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-primary, .35)
        }
      }

      &.mbsc-stepper-secondary {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-secondary, .35)
        }
      }

      &.mbsc-stepper-success {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-success, .35)
        }
      }

      &.mbsc-stepper-danger {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-danger, .35)
        }
      }

      &.mbsc-stepper-warning {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-warning, .35)
        }
      }

      &.mbsc-stepper-info {
        .mbsc-stepper .mbsc-segmented-item:hover .mbsc-segmented-content {
          background: rgba($mbsc-mobiscroll-info, .35)
        }
      }
    }
  }

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