@import './theme/default';
@import './theme/font';
@import './mixins/pointer-events';

$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;
$input-width-xs: $default-form-width-xs;
$input-width-s: $default-form-width-s;
$input-width-m: $default-form-width-m;
$input-width-l: $default-form-width-l;
$input-width-xl: $default-form-width-xl;

.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;
  max-width: 100%;

  &--width-xs {
    width: $input-width-xs;
  }

  &--width-s {
    width: $input-width-s;
  }

  &--width-m {
    width: $input-width-m;
  }

  &--width-l {
    width: $input-width-l;
  }

  &--width-xl {
    width: $input-width-xl;
  }

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

  &__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,
  .zent-input-close {
    display: block;
    margin-right: 8px;
  }

  .zent-input-icon:first-child {
    margin-left: 8px;
    margin-right: 0;
  }

  .zent-input-icon {
    @include theme-color(color, stroke, 3);
    font-size: 20px;
  }

  .zenticon-close-circle {
    @include theme-color(color, stroke, 4);
    font-size: 20px;
    margin-right: 4px;
  }

  .zent-input-icon-click,
  .zenticon-close-circle {
    cursor: pointer;
    border-radius: 2px;
    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    &:active {
      background: rgba(0, 0, 0, 0.1);
    }
  }

  .zent-input.zent-input--icon {
    &-front {
      padding-left: 4px;
    }
    &-end {
      padding-right: 4px;
    }
  }

  &-disabled {
    cursor: not-allowed;
    .zent-input-icon {
      @include theme-color(color, stroke, 4);
    }
    .zent-input-icon-click {
      cursor: not-allowed;
      @include theme-color(color, stroke, 4);
      &:hover {
        background: transparent;
      }
    }
  }
}

.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 12px;
  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);
  @include prevent-pointer-events;
}

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

.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: 80px;
  padding: 6px 12px;
  appearance: none;
  line-height: 1.5;

  &-wrapper-out-of-range {
    @include theme-color(border-color, error, 4);
    &.zent-input-wrapper.zent-input--has-focus {
      @include theme-color(border-color, error, 4);
    }
  }

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

  &-count {
    @include theme-color(color, stroke, 1);
    display: inline-block;
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: $font-size-small;

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

.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;
}