@import "../core/exports";
@import "./input.material.colors";
@import "./input";

@include exports("input.material") {
  .mbsc-material {

    /* Textbox */
    &.mbsc-input input,
    &.mbsc-input textarea,
    &.mbsc-input .mbsc-color-input {
      height: 2.125em;
      padding: 0 0 1px 0;
      background-color: transparent;
      font-size: 1em;
      transition: border-color .2s;
    }

    /* Textbox, textarea, select */
    &.mbsc-input .mbsc-control:disabled ~ input,
    &.mbsc-input textarea:disabled,
    &.mbsc-input input:disabled,
    &.mbsc-input input:disabled ~ .mbsc-color-input {
      border-style: dotted;
      opacity: .5;
    }

    &.mbsc-input input:focus,
    &.mbsc-input textarea:focus,
    &.mbsc-input select:focus ~ input,
    &.mbsc-input .mbsc-color-input:focus {
      padding-bottom: 0;
    }

    /* Input */
    &.mbsc-input {
      margin: 1.5em 1em;

      .mbsc-label ~ .mbsc-input-wrap {
        padding-top: .875em;

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

    &.mbsc-input.mbsc-err input:focus,
    &.mbsc-input.mbsc-err textarea:focus {
      padding-bottom: 0;
      border-width: 2px;
    }

    .mbsc-input-ic {
      top: .0625em;
      margin: -2px 0 0 0;
    }

    /* Textarea */
    &.mbsc-input textarea {
      padding-top: .25em;
    }

    /* Select */
    &.mbsc-select .mbsc-input-wrap:after {
      content: '';
      position: absolute;
      height: 0;
      width: 0;
      top: .875em;
    }

    &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after {
      top: 1.75em;
    }

    &.mbsc-ltr.mbsc-select {
      input {
        padding-right: 1em;
      }

      &.mbsc-ic-right input {
        padding-right: 3em;
      }

      .mbsc-input-wrap:after {
        left: auto;
        right: 0;
      }

      &.mbsc-ic-right .mbsc-input-wrap:after {
        right: 2em;
      }
    }

    &.mbsc-rtl.mbsc-select {
      input {
        padding-left: 1em;
      }

      &.mbsc-ic-right input {
        padding-left: 3em;
      }

      .mbsc-input-wrap:after {
        right: auto;
        left: 0;
      }

      &.mbsc-ic-right .mbsc-input-wrap:after {
        left: 2em;
      }
    }

    /* Inline select */
    .mbsc-select-inline .mbsc-input-wrap:after {
      display: none;
    }

    /* LTR left icon */
    &.mbsc-ltr.mbsc-input.mbsc-ic-left {

      input,
      textarea {
        padding-left: 1.625em;
      }

      .mbsc-left-ic {
        right: auto;
        left: -.375em
      }

      .mbsc-label,
      .mbsc-err-msg {
        left: 2.166667em;
      }
    }

    /* LTR right icon */
    &.mbsc-ltr.mbsc-input.mbsc-ic-right {

      input,
      textarea {
        padding-right: 1.625em;
      }

      .mbsc-right-ic {
        left: auto;
        right: -.375em
      }
    }

    /* RTL left icon */
    &.mbsc-rtl.mbsc-input.mbsc-ic-left {

      input,
      textarea {
        padding-right: 1.625em;
      }

      .mbsc-left-ic {
        left: auto;
        right: -.375em
      }

      .mbsc-label,
      .mbsc-err-msg {
        right: 2.166667em;
      }
    }

    /* RTL right icon */
    &.mbsc-rtl.mbsc-input.mbsc-ic-right {

      input,
      textarea {
        padding-left: 1.625em;
      }

      .mbsc-right-ic {
        right: auto;
        left: -.375em
      }
    }

    &.mbsc-input .mbsc-label {
      position: absolute;
      top: 0;
      font-size: .75em;
    }

    /* Inline labels */
    &.mbsc-label-inline.mbsc-input {
      &.mbsc-control-w {
        // v5 compatibility
        padding: 0;
      }

      .mbsc-label {
        line-height: 2em;
      }

      .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 0;

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

      &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after {
        top: 1em;
      }
    }

    /* Floating labels */
    &.mbsc-label-floating.mbsc-input {
      .mbsc-label {
        font-size: 1em;
        line-height: 2em;
        top: .875em;
      }

      &.mbsc-label-floating-active {
        .mbsc-label {
          -webkit-transform: translateY(-1.125em) scale(.75);
          transform: translateY(-1.125em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
      left: 1.625em;
    }

    &.mbsc-rtl.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
      right: 1.625em;
    }

    /* Box Input */
    &.mbsc-input-box {
      &.mbsc-input .mbsc-input-wrap {
        border-radius: 4px 4px 0 0;
      }

      &.mbsc-input input,
      &.mbsc-input .mbsc-color-input {
        height: 2.25em;
        padding: .0625em 1em;
        border-radius: 4px 4px 0 0;
      }

      &.mbsc-input input:focus,
      &.mbsc-input textarea:focus,
      &.mbsc-input select:focus ~ input,
      &.mbsc-input .mbsc-color-input:focus {
        padding-bottom: 0;
      }

      &.mbsc-input textarea {
        padding: .375em 1em .0625em 1em;
        height: 2.25em;
      }

      &.mbsc-input .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 0;

        input,
        .mbsc-color-input {
          padding-top: 1.25em;
          height: 3.5em;
        }

        textarea:focus {
          padding-bottom: 0;
        }

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

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

      .mbsc-label {
        top: .666667em;
        z-index: 1;
      }

      &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
        padding-top: 1.625em;

        textarea {
          height: 1.866667em;
          padding-top: 0;
        }
      }

      &.mbsc-select {
        .mbsc-input-wrap:after {
          top: 1em;
        }

        .mbsc-label ~ .mbsc-input-wrap:after {
          top: 1.625em;
        }
      }

      /* Inline labels */
      &.mbsc-label-inline {
        .mbsc-label {
          padding-top: .125em;
          padding-bottom: .125em;
        }

        .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 0;

          input,
          .mbsc-color-input {
            height: 2.25em;
            padding-top: .0625em;
          }
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic {
          top: .1875em;
        }

        &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap {
          padding-top: .375em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating {
        &.mbsc-label-floating-active .mbsc-label {
          -webkit-transform: translateY(-.625em) scale(.75);
          transform: translateY(-.625em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-input-box {
      .mbsc-err-msg {
        left: 1.333334em;
      }

      .mbsc-label {
        left: 1.333334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          left: 4em;
        }

        .mbsc-label {
          left: 4em;
        }

        .mbsc-left-ic {
          left: .5em;
        }

        input,
        textarea {
          padding-left: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-right: 3em;
        }

        .mbsc-right-ic {
          right: .5em;
        }

        .mbsc-input-wrap:after {
          right: 2em;
        }
      }

      &.mbsc-select {
        input {
          padding-right: 2em;
        }

        .mbsc-input-wrap:after {
          right: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-right: 4em;
          }

          .mbsc-input-wrap:after {
            right: 3em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        left: 1em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        left: 3em;
      }
    }

    &.mbsc-rtl.mbsc-input-box {
      .mbsc-err-msg {
        right: 1.333334em;
      }

      .mbsc-label {
        right: 1.333334em;
        left: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          right: 4em;
        }

        .mbsc-label {
          right: 4em;
        }

        .mbsc-left-ic {
          right: .5em;
        }

        input,
        textarea {
          padding-right: 3em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-left: 3em;
        }

        .mbsc-right-ic {
          left: .5em;
        }

        .mbsc-input-wrap:after {
          left: 2em;
        }
      }

      &.mbsc-select {
        input {
          padding-left: 2em;
        }

        .mbsc-input-wrap:after {
          left: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-left: 4em;
          }

          .mbsc-input-wrap:after {
            left: 3em;
          }
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        right: 1em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        right: 3em;
      }
    }

    /* Outline Input */
    &.mbsc-input-outline {

      &.mbsc-input input,
      &.mbsc-input textarea,
      &.mbsc-input .mbsc-color-input {
        border-radius: 4px;
      }

      &.mbsc-input input,
      &.mbsc-input .mbsc-color-input {
        height: 3.375em;
        padding: .0625em 1em;
      }

      &.mbsc-input textarea {
        height: 3.375em;
        padding: .875em 1em .4375em 1em;
      }

      &.mbsc-input .mbsc-label {
        top: -.166667em;
        z-index: 1;
        padding: 0 .333334em;
      }

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

      &.mbsc-input .mbsc-label ~ .mbsc-input-wrap {
        padding-top: .25em;

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

      &.mbsc-input input:focus,
      &.mbsc-input select:focus ~ input {
        padding: 0 .9375em;
      }

      &.mbsc-err input {
        padding-top: 0;
        padding-bottom: 0;
      }

      &.mbsc-err input:focus {
        padding: 0 .9375em;
      }

      &.mbsc-input textarea:focus {
        padding: .8125em .9375em .375em .9375em;
      }

      &.mbsc-err textarea:focus {
        padding: .875em .9375em 0 .9375em;
      }

      &.mbsc-select {
        .mbsc-input-wrap:after {
          top: 1.5em;
        }

        .mbsc-label ~ .mbsc-input-wrap:after {
          top: 1.75em;
        }
      }

      /* Inline labels */
      &.mbsc-label-inline {
        .mbsc-label {
          line-height: 3.375em;
        }

        .mbsc-label ~ .mbsc-input-wrap {
          padding-top: 0;
        }

        .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic {
          top: .8125em;
        }

        &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after {
          top: 1.5em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input {
        .mbsc-label {
          top: .9375em;
          padding: 0 .25em;
        }

        &.mbsc-label-floating-active .mbsc-label {
          -webkit-transform: translateY(-1.375em) scale(.75);
          transform: translateY(-1.375em) scale(.75);
        }
      }
    }

    &.mbsc-ltr.mbsc-input-outline {
      .mbsc-err-msg {
        left: 1.416667em;
      }

      .mbsc-label {
        left: 1.083334em;
        right: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          left: 4.083334em;
        }

        .mbsc-label {
          left: 3.75em;
        }

        .mbsc-left-ic {
          left: .5em;
        }

        input,
        textarea {
          padding-left: 3em;
        }

        input:focus,
        textarea:focus,
        &.mbsc-err textarea {
          padding-left: 2.9375em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-right: 3em;
        }

        input:focus,
        textarea:focus {
          padding-right: 2.9375em;
        }

        .mbsc-right-ic {
          right: .5em;
        }
      }

      &.mbsc-select {
        input {
          padding-right: 2em;
        }

        select:focus ~ input {
          padding-right: 1.9375em;
        }

        .mbsc-input-wrap:after {
          right: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-right: 4em;
          }

          select:focus ~ input {
            padding-right: 3.9375em;
          }

          .mbsc-input-wrap:after {
            right: 3em;
          }
        }

        &.mbsc-ic-left select:focus ~ input {
          padding-left: 2.9375em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        left: .875em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        left: 2.875em;
      }
    }

    &.mbsc-rtl.mbsc-input-outline {
      .mbsc-err-msg {
        right: 1.416667em;
      }

      .mbsc-label {
        right: 1.083334em;
        left: auto;
      }

      &.mbsc-ic-left {
        .mbsc-err-msg {
          right: 4.083334em;
        }

        .mbsc-label {
          right: 3.75em;
        }

        .mbsc-left-ic {
          right: .5em;
        }

        input,
        textarea {
          padding-right: 3em;
        }

        input:focus,
        textarea:focus,
        &.mbsc-err textarea {
          padding-right: 2.9375em;
        }
      }

      &.mbsc-ic-right {

        input,
        textarea {
          padding-left: 3em;
        }

        input:focus,
        textarea:focus {
          padding-left: 2.9375em;
        }

        .mbsc-right-ic {
          left: .5em;
        }
      }

      &.mbsc-select {
        input {
          padding-left: 2em;
        }

        select:focus ~ input {
          padding-left: 1.9375em;
        }

        .mbsc-input-wrap:after {
          left: .6875em;
        }

        &.mbsc-ic-right {
          input {
            padding-left: 4em;
          }

          select:focus ~ input {
            padding-left: 3.9375em;
          }

          .mbsc-input-wrap:after {
            left: 3em;
          }
        }

        &.mbsc-ic-left select:focus ~ input {
          padding-right: 2.9375em;
        }
      }

      /* Floating labels */
      &.mbsc-label-floating.mbsc-input .mbsc-label {
        right: .875em;
      }

      &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label {
        right: 2.875em;
      }
    }
  }

  @include mbsc-material-input(material, $mbsc-material-colors);
}
