//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-input-wrapper {
  @include flex(1 1 4em);

  &.ui-fill {
    @include flex(1 1 auto);
    @include flex-column();

    > .ui-input-control {
      @include flex(1 1 auto);
      @include align-self(stretch);

       > .ui-list-container,
      > textarea {
        max-height: inherit;
        @include align-self(stretch);
      }
    }
  }

  &:not(:first-child):not(:last-child) {}

  .ui-input-info {
    color     : $muted;
    text-align: center;
    @include ellipsis();
  }

  &.ui-md-editor {
    .ui-toolbar {
      border    : none;
      background: none;
    }

    div.ui-md-preview {
      overflow: auto;
      @include position(absolute, 0);
    }

    div.ui-watermark {
      position  : relative;
      background: $input-bg;

      &.preview {
        &:before {
          content: 'PREVIEW';
        }

        .ui-input-control {
          visibility: hidden;
        }
      }

      &.help {
        &:before {
          content: 'HELP';
        }

        .ui-input-control {
          visibility: hidden;
        }
      }

      &:before {
        z-index       : 5;
        color         : rgba($muted, .1);
        font-size     : 3rem;
        font-weight   : 800;
        letter-spacing: 2rem;
        pointer-events: none;
        @include transform(translateX(-50%) translateY(-50%) rotate(-10deg));
        @include position(absolute, 50% auto auto 50%);
      }
    }
  }

  .ui-input-control {
    @include flex-row($wrap:false, $align: flex-start);
    color     : $input-text;
    background: $input-bg;
    max-width : 100%;
    position  : relative;
    box-shadow: 0 -1px 0 0 $base-border-color inset;
    @include transition(box-shadow .5s);

    input,
    textarea {
      @include flex-fill();
      background : none;
      border     : none;
      margin     : 0;
      color      : inherit;
      min-height : 1em;
      max-width  : 100%;
      width      : 1em;
      font-size  : 0.9em;
      line-height: 1rem;
      padding    : 0.25rem 0.5rem;
    }

    .ui-error {
      color     : $input-error-text;
      background: $input-error-bg;
      padding   : 0 0.25em;
      @include flex-auto();

      .ui-error-list {
        display    : none;
        position   : absolute;
        background : $danger;
        color      : $white;
        z-index    : 5;
        line-height: 1.5em;
        font-size  : 0.8em;
        padding    : 0.75em 0.5em;
      }

      &:hover .ui-error-list {
        display: block;
      }
    }
    // .ui-caret {
    //   @include flex-auto();
    //   padding: .25em .1em;
    //   cursor : pointer;
    //   color  : $muted;
    //
    //   &:hover {
    //     color: $base-text;
    //   }
    // }
    .ui-counter {
      @include flex-auto();
      color      : rgba($input-text, .5);
      font-size  : 0.7em;
      line-height: 1.5rem;
      padding    : 0 0.25em;
      direction  : ltr;
    }

    .ui-clear {
      @include flex-auto();
      color      : rgba($input-text, .5);
      cursor     : pointer;
      font-size  : 1em;
      line-height: 1.5em;
      padding    : 0 0.25em;

      &:hover {
        color: $base-text;
      }
    }

    &.ui-phone {
      span:first-child {
        @include align-self(center);
      }
    }

    &.ui-textarea {
      position: relative;

      textarea {
        margin-bottom: 1em;
      }

      .ui-counter {
        position   : absolute;
        display    : block;
        line-height: 1em;
        bottom     : 2px;
        left       : 0;
        right      : 0;
      }
    }
  }

  &.ui-focus .ui-input-control {
    box-shadow: 0 -2px 0 0 $input-focus-border inset;
  }

  &.ui-invalid {
    .ui-input-control {
      background: tint($input-invalid-border, 98%);
      box-shadow: 0 -1px 0 0 $input-invalid-border inset;
    }

    &.ui-focus .ui-input-control {
      box-shadow: 0 -2px 0 0 $input-invalid-border inset;
    }
  }

  &.ui-disabled .ui-input-control {
    // box-shadow: 0 -1px 0 0 rgba($base-border-color,.5) inset !important;
    color: rgba($input-text, .5) !important;

    &:after {
      content   : '';
      @include position(absolute, 0);
      background: rgba($input-disabled-bg, 0.5);
    }
  }

  &.ui-readonly .ui-input-control {
    background: $input-readonly-bg;
    box-shadow: none !important;
  }
}

.ui-file-input {
  .ui-file-drop-zone {
    border    : 3px dashed $base-border-color;
    text-align: center;
    font-size : 1.4em;
    color     : $base-border-color;
    padding   : 1em 0;
  }

  .ui-file-drop-zone.dragging {
    border-color: $primary;
    background  : rgba($primary, .075);
  }

  input {
    display: none;
  }

  .ui-file-list {
    p {
      font-size  : 1em;
      color      : $input-text;
      margin     : 0;
      line-height: 1.1;
      padding    : 0.2em 0.5em;
      font-family: $base-font-family-input;

      i {
        font-size: 1.5em;
      }

      span {
        font-size  : 0.9em;
        font-weight: 500;
        padding    : 0 0.5em;
        @include ellipsis();
      }

      a {
        font-size: 0.8em;
      }
    }
  }
}

.rtl,
[dir="rtl"] {
  .ui-input-control {
    &.ui-phone input {
      text-align: right;
    }

    .ui-counter {
      text-align: right;
    }
  }
}