@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b input {
    position: relative;
    font-size: var(--font-size-base);
    display: inline-block;
    width: 100%;

    @e inner {
      appearance: none;
      background-color: var(--input-fill);
      background-image: none;
      border-radius: var(--input-border-radius);
      border: var(--input-border);
      box-sizing: border-box;
      color: var(--input-color);
      display: inline-block;
      font-size: inherit;
      height: var(--input-height);
      line-height: 1;
      outline: none;
      padding: 3px 10px;
      transition: var(--border-transition-base);
      width: 100%;

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

      &:hover {
        border-color: var(--input-hover-border);
      }

      &:focus {
        outline: none;
        border-color: var(--input-focus-border);
      }
    }

    @e icon {
      position: absolute;
      width: 35px;
      height: 100%;
      right: 0;
      top: 0;
      text-align: center;
      color: var(--input-icon-color);
      transition: all .3s;

      &:after {
        content: '';
        height: 100%;
        width: 0;
        display: inline-block;
        vertical-align: middle;
      }

      & + .el-input__inner {
        padding-right: 35px;
      }

      @when clickable {
        &:hover {
          cursor: pointer;
          color: var(--input-hover-border);

          & + .el-input__inner {
            border-color: var(--input-hover-border);
          }
        }
      }
    }

    @when active {
      .el-input__inner {
        outline: none;
        border-color: var(--input-focus-border);
      }
    }

    @when disabled {
      .el-input__inner {
        background-color: var(--input-disabled-fill);
        border-color: var(--input-disabled-border);
        color: var(--input-disabled-color);
        cursor: not-allowed;

        &::placeholder {
          color: var(--input-disabled-placeholder-color);
        }
      }
    }
    @m large {
      font-size: var(--input-large-font-size);

      & .el-input__inner {
        height: var(--input-large-height);
      }
    }
    @m small {
      font-size: var(--input-small-font-size);

      & .el-input__inner {
        height: var(--input-small-height);
      }
    }
    @m mini {
      font-size: var(--input-mini-font-size);

      & .el-input__inner {
        height: var(--input-mini-height);
      }
    }
  }

  @b input-group {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;

    & > .el-input__inner {
      vertical-align: middle;
      display: table-cell;
    }
    @e append, prepend {
      background-color: var(--color-dark-white);
      color: var(--color-light-silver);
      vertical-align: middle;
      display: table-cell;
      position: relative;
      border: var(--border-base);
      border-radius: var(--input-border-radius);
      padding: 0 10px;
      width: 1px;
      white-space: nowrap;

      & .el-select,
      & .el-button {
        display: block;
        margin: -10px;
      }

      & button.el-button,
      & div.el-select .el-input__inner,
      & div.el-select:hover .el-input__inner {
        border-color: transparent;
        background-color: transparent;
        color: inherit;
        border-top: 0;
        border-bottom: 0;
      }
      & .el-button,
      & .el-input {
        font-size: inherit;
      }
    }
    @e prepend {
      border-right: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    @e append {
      border-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    @m prepend {
      .el-input__inner {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    @m append {
      .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  @b textarea {
    display: inline-block;
    width: 100%;
    vertical-align: bottom;

    @e inner {
      display: block;
      resize: vertical;
      padding: 5px 7px;
      line-height: 1.5;
      box-sizing: border-box;
      width: 100%;
      font-size: var(--font-size-base);
      color: var(--input-color);
      background-color: var(--input-fill);
      background-image: none;
      border: var(--input-border);
      border-radius: var(--input-border-radius);
      transition: var(--border-transition-base);

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

      &:hover {
        border-color: var(--input-hover-border);
      }

      &:focus {
        outline: none;
        border-color: var(--input-focus-border);
      }
    }

    @when disabled {
      .el-textarea__inner {
        background-color: var(--input-disabled-fill);
        border-color: var(--input-disabled-border);
        color: var(--input-disabled-color);
        cursor: not-allowed;

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