@import './theme/default';
@import './theme/font';

$border-radius: 2px;
$border-transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
$normal-size: 32px;
$small-size: 24px;
$large-size: 40px;

.zent-input-wrapper {
  @include theme-color(border-color, stroke, 5);
  @include theme-color(background-color, stroke, 9);
  display: flex;
  position: relative;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-radius: $border-radius;
  transition: $border-transition;
  overflow: hidden;
  align-items: center;
  width: 240px;

  &.zent-input--size-small {
    height: $small-size;

    .zent-input-addon-before,
    .zent-input-addon-after {
      line-height: $small-size - 2px;
    }
  }

  &.zent-input--size-normal {
    height: $normal-size;

    .zent-input-addon-before,
    .zent-input-addon-after {
      line-height: $normal-size - 2px;
    }
  }

  &.zent-input--size-large {
    height: $large-size;

    .zent-input-addon-before,
    .zent-input-addon-after {
      line-height: $large-size - 2px;
    }
  }

  &.zent-input--has-focus:not(.zent-input-wrapper__not-editable) {
    @include theme-color(border-color, primary, 4);
    @include theme-shadow(focus);
  }

  &__not-editable {
    &.zent-input-wrapper {
      @include theme-color(background-color, stroke, 8);
    }

    .zent-input-addon-before,
    .zent-input-addon-after {
      @include theme-color(border-color, stroke, 5);
      @include theme-color(color, stroke, 4);
      @include theme-color(background-color, stroke, 8);
    }
  }

  .zent-input-icon {
    @include theme-color(color, stroke, 3);
    display: block;
    margin-right: 10px;
  }

  .zent-input-close {
    @include theme-color(color, stroke, 5);
    display: block;
    margin-right: 10px;
  }
}

.zent-textarea-wrapper.zent-input-wrapper {
  height: auto;
  max-height: none;
}

.zent-input,
.zent-input[type='text'],
.zent-input[type='password'],
.zent-input[type='datetime'],
.zent-input[type='date'],
.zent-input[type='month'],
.zent-input[type='time'],
.zent-input[type='week'],
.zent-input[type='number'],
.zent-input[type='email'],
.zent-input[type='url'],
.zent-input[type='tel'],
.zent-input[type='color'],
.zent-input[type='search'],
.zent-textarea {
  @include theme-color(color, stroke, 1);
  display: inline-block;
  flex: 1;
  min-width: 80px;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0;
  font-size: $font-size-normal;
  box-shadow: none;
  appearance: none;
  outline: none;
  border: 0;
}

.zent-textarea[disabled],
.zent-textarea[readonly],
.zent-input[disabled],
.zent-input[readonly] {
  @include theme-color(background-color, stroke, 8);
  @include theme-color(color, stroke, 4);
  cursor: not-allowed;
}

.zent-input-addon-before,
.zent-input-addon-after {
  @include theme-color(background-color, stroke, 8);
  @include theme-color(color, stroke, 2);
  display: inline-block;
  height: 100%;
  padding: 0 9px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: $font-size-normal;
}

.zent-input-addon-before {
  @include theme-color(border-right-color, stroke, 5);
  border-right-width: 1px;
  border-right-style: solid;
}

.zent-input-addon-after {
  @include theme-color(border-left-color, stroke, 5);
  border-left-width: 1px;
  border-left-style: solid;
}

.zent-textarea {
  height: 54px;
  padding: 5px 10px;
  appearance: none;
  line-height: 1.5;

  &-with-count {
    padding-bottom: 21px;
  }

  &-count {
    @include theme-color(color, stroke, 3);
    display: inline-block;
    position: absolute;
    bottom: 2px;
    right: 15px;
    font-size: 10px;
  }
}

.has-error {
  .zent-input-wrapper {
    @include theme-color(border-color, error, 4);
    border-width: 1px;
    border-style: solid;

    &.zent-input--has-focus:not(.zent-input-wrapper__not-editable) {
      @include theme-color(border-color, error, 4);
      box-shadow: none;
    }

    &__not-editable {
      @include theme-color(border-color, stroke, 5);
    }

    &.zent-textarea-wrapper.zent-textarea-wrapper-out-of-range {
      @include theme-color(border-color, error, 4);
      border-width: 1px;
      border-style: solid;

      .zent-textarea-out-of-range-text {
        @include theme-color(color, error, 4);
      }
    }
  }
}

.zent-input::placeholder,
.zent-textarea::placeholder {
  @include theme-color(color, stroke, 4);
}

.zent-input-wrapper.zent-input-wrapper-inline {
  display: inline-flex;
}