@if $css-variable-enabled {
  $input-border-radius: var(--input-border-radius);
  $input-border-spread: var(--input-border-spread);
  $input-margin: var(--input-margin);
  $large-text: var(--large-text);
  $medium-text: var(--medium-text);
  $primary-transition: var(--primary-transition);
  $small-text: var(--small-text);
  $xlarge-text: var(--xlarge-text);
}

.#{$prefix}input {
  appearance: none;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 2px;
  border-color: $transparent;
  color: var(--input-text-color);
  $padding1: 7px;
  $padding2: 20px;
  padding-top: 9px;
  padding-bottom: $padding1;
  padding-left: $padding2;
  padding-right: $padding2;
  background-color: var(--input-bg-color);
  width: 100%;
  transition: $primary-transition;
  border-radius: $input-border-radius;
  font-size: $medium-text;
  margin: $input-margin;

  // Reuse Vars
  --in-pad: 35px;

  ~ .#{$prefix}icon {
    --icon-size: 18px;
    --ic-margin: 10px;
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    margin: {
      top: 0 !important;
      bottom: 0 !important;
    }

    &.#{$prefix}left {
      left: 0;
      margin-right: 0 !important;
      margin-left: var(--ic-margin);
    }

    &.#{$prefix}right {
      right: 0;
      margin-left: 0 !important;
      margin-right: var(--ic-margin);
    }
  }

  &.#{$prefix}with-icon-left {
    padding-left: var(--in-pad) !important;
  }

  &.#{$prefix}with-icon-right {
    padding-right: var(--in-pad) !important;
  }

  &.#{$prefix}with-icon-both {
    padding-right: var(--in-pad) !important;
    padding-left: var(--in-pad) !important;
  }

  &.#{$prefix}small {
    font-size: $small-text;
    $padding1: 4px;
    $padding2: 14px;
    padding-top: $padding1 + 2px;
    padding-bottom: $padding1;
    padding-left: $padding2;
    padding-right: $padding2;

    --in-pad: 25px;

    ~ .#{$prefix}icon {
      --icon-size: 12px;
      --ic-margin: 8px;
    }
  }

  &.#{$prefix}large {
    font-size: $large-text;
    $padding1: 12px;
    $padding2: 24px;
    padding-top: $padding1 + 2px;
    padding-bottom: $padding1;
    padding-left: $padding2;
    padding-right: $padding2;

    --in-pad: 45px;

    ~ .#{$prefix}icon {
      --icon-size: 24px;
      --ic-margin: 14px;
    }
  }

  &.#{$prefix}xlarge {
    font-size: $xlarge-text;
    $padding1: 16px;
    $padding2: 28px;
    padding-top: $padding1 + 2px;
    padding-bottom: $padding1;
    padding-left: $padding2;
    padding-right: $padding2;

    --in-pad: 55px;

    ~ .#{$prefix}icon {
      --icon-size: 36px;
      --ic-margin: 13px;
    }
  }

  &::placeholder {
    color: var(--input-placeholder-text-color);
  }

  &:hover, &.#{$prefix}hovered {
    background-color: var(--input-hovered-bg-color);
  }

  &:focus, &.#{$prefix}focused {
    background-color: var(--body-bg-color);
    box-shadow: 0 0 0 $input-border-spread var(--input-border-spread-color);
  }

  &[disabled] {
    pointer-events: none;
    opacity: 0.4;

    ~ .#{$prefix}icon {
      opacity: 0.4;
    }
  }

  // Readonly
  &.#{$prefix}readonly, &[readonly] {

    &:hover, &.#{$prefix}hovered {
      background-color: var(--input-bg-color);
    }

    &:focus, &.#{$prefix}focused {
      background-color: var(--input-bg-color);
      box-shadow: 0 0 0 1px var(--input-border-spread-color);
    }
  }

  // Transparent
  &.#{$prefix}transparent {
    background-color: $transparent !important;

    &:focus, &.#{$prefix}focused {
      background-color: $transparent !important;
      box-shadow: 0 0 0 0 !important;
    }
  }

  // Validity Check
  &.#{$prefix}check-validity {
    & ~ .#{$prefix}icon.#{$prefix}if-valid {
      opacity: 0;
    }

    &:valid {
      border-color: var(--success-color);

      &:focus, &.#{$prefix}focused {
        border-color: $transparent;
        box-shadow: 0 0 0 $input-border-spread var(--success-color);
      }

      & ~ .#{$prefix}icon.#{$prefix}if-valid {
        opacity: 1;
      }
    }
  }

  .#{$prefix}el-group &, .#{$prefix}el-group > .#{$prefix}form-el & {
    margin: 0 !important;
  }

  // Colors
  @each $name, $color, $skip, $hovered-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} {
        border-color: $color;

        &:focus, &.#{$prefix}focused {
          border-color: $transparent;
          box-shadow: 0 0 0 $input-border-spread $hovered-color;
        }

        &.#{$prefix}readonly, &[readonly] {
          &:focus, &.#{$prefix}focused {
            box-shadow: 0 0 0 1px $hovered-color;
          }
        }
      }
    }
  }
}

.#{$prefix}input-append, .#{$prefix}input-prepend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--input-append-bg-color);
  color: var(--input-append-fg-color);
  pointer-events: none;
  user-select: none;
  border-radius: $input-border-radius;
  transition: $primary-transition;
}