@import "../mixins/mixins";
@import "../mixins/typo";
@import '../mixins/utils';
@import "../config/variables";

@include b(textarea) {
  //display: inline-block;
  //width: 100%;
  //vertical-align: bottom;
  //font-size: $--font-size-base;

  @include e(inner) {
    //display: block;
    //resize: vertical;
    //padding: 5px 15px;
    //line-height: 1.5;
    //box-sizing: border-box;
    //width: 100%;
    //font-size: inherit;
    //color: $--input-color;
    //background-color: $--input-fill;
    //background-image: none;
    //border: $--input-border;
    //border-radius: $--input-border-radius;
    //transition: $--border-transition-base;
    //
    //&::placeholder {
    //  color: $--input-placeholder-color;
    //}
    //
    //&:hover {
    //  border-color: $--input-hover-border;
    //}
    //
    //&:focus {
    //  outline: none;
    //  border-color: $--input-focus-border;
    //}
  }

  @include when(disabled) {
    //.el-textarea__inner {
    //  background-color: $--input-disabled-fill;
    //  border-color: $--input-disabled-border;
    //  color: $--input-disabled-color;
    //  cursor: not-allowed;
    //
    //  &::placeholder {
    //    color: $--input-disabled-placeholder-color;
    //  }
    //}
  }
}

@include b(input) {
  position: relative;
  width: 100%;
  display: inline-block;
  @include bodyL;
  @include utils-user-select(none);
  @include scroll-bar;
  cursor: text;
  vertical-align: middle;

  @include e(wrap) {
    height: 52px;
    overflow: hidden;
    border-radius: $--border-radius;
    border: none;
    box-shadow: inset 0 0 0 1px $--color-silver;
    box-sizing: border-box;
    background: $--color-white;
    transition: box-shadow .2s ease-in-out;
  }
  @include e(label) {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    @include bodyL;
    left: 0;
    padding: 0 $--size-base * 4;
    top: $--size-base * 3 + 2;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: rgba($--color-text, 0.6);
    transition: all .15s ease-in-out .05s;
  }
  @include e(inner) {
    @include bodyL;
    border: none;
    background: transparent;
    z-index: 2;
    position: relative;
    outline: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-block;
    height: 52px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: $--size-base * 5 + 2 $--size-base * 4 $--size-base + 2;
    color: $--color-text;
    opacity: 0;
    transition: opacity .1s ease-in-out .2s;

    &::placeholder {
      color: $--color-warmtext;
    }
  }

  @include when(hovered) {
    @include e(wrap) {
      box-shadow: inset 0 0 0 1px $--color-grey;
    }
    @include e(label) {
      color: $--color-grey;
    }
  }

  @include when(focused) {
    @include e(wrap) {
      box-shadow: inset 0 0 0 1px $--color-primary;
    }
  }

  @include when(dirty) {
    @include e(label) {
      top: $--size-base;
      color: $--color-warmtext;
      @include bodyS;
    }
    @include e(inner) {
      opacity: 1;
    }
  }

  @include when(readonly) {
    @include e(wrap) {
      background: $--color-disabled;
      box-shadow: inset 0 0 0 1px $--color-silver;
    }
    @include e(label) {
      color: $--color-silver;
    }
    @include e(inner) {
      cursor: not-allowed;
    }
    @include e(icon) {
      cursor: not-allowed;
    }
    @include when(dirty) {
      @include e(label) {
        color: $--color-warmtext;
      }
      @include e(inner) {
        color: $--color-text;
      }
    }
  }

  @include when(disabled) {
    @include e(wrap) {
      background: $--color-white;
      box-shadow: inset 0 0 0 1px $--color-disabled;
    }
    @include e(label) {
      color: $--color-silver;
    }
    @include e(inner) {
      cursor: not-allowed;
      color: $--color-silver;
    }
    @include e(icon) {
      cursor: not-allowed;
    }
  }

  @include m(suffix) {
    @include e(inner) {
      padding-right: 56px;
    }
    @include e(label) {
      padding-right: 56px;
    }
  }


  @include e(suffix) {
    width: 24px;
    height: 24px;
    overflow: hidden;
    position: absolute;
    right: 16px;
    top: 14px;
    text-align: center;
    pointer-events: none;
    .el-button {
      margin: 0;
    }
  }

  @include e(suffix-inner) {
    pointer-events: all;
    color: $--color-primary;
    line-height: 24px;
    font-size: 24px;
  }

  @include m(suffixButton) {
    @include e(suffix) {
      z-index: 3;
    }
    @include e(suffix-inner) {
      cursor: pointer;
    }
  }

  @include e(icon) {
    //height: 100%;
    //width: 25px;
    //text-align: center;
    //transition: all .3s;
    //line-height: $--input-height;
    //
    //&:after {
    //  content: '';
    //  height: 100%;
    //  width: 0;
    //  display: inline-block;
    //  vertical-align: middle;
    //}
  }

  @include e(validateIcon) {
    pointer-events: none;
  }
}

/** disalbe default clear on IE */
.el-input__inner::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}