@import "../../base.less";

@import "./_var.less";

@import "../../mixins/_index.less";

.@{prefix}-input {
  background-color: #fff;

  .@{prefix}-cell__title {
    width: @input-label-width;
    flex: none;
    margin-right: @spacer-2;
    display: flex;
  }

  &__vertical {
    flex-direction: column;
    align-items: flex-start;

    &__left {
      width: 100%;
    }

    &__right {
      display: flex;
      width: 100%;
    }
  }

  &__left {
    display: flex;
  }

  &__right {
    display: flex;
    flex: 1 1 0;
  }

  &__wrap {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: @input-font-size;

    &--suffix,
    &--icon {
      flex: 0 0 auto;
      margin-left: @spacer-3;
      display: table;
      color: @input-suffix-color;

      .@{prefix}-icon {
        font-size: @input-icon-font-size;
        color: @input-icon-color;
        vertical-align: middle;
        display: table-cell;
      }
    }

    &--suffix {
      position: relative;
      padding-left: 12px;

      &::after {
        .hairline-left();
      }
    }
  }

  &__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0; // for flex-shrink in field__button
    margin: 0;
    padding: 0;
    color: @input-text-color;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
    font-size: inherit;

    &::placeholder {
      color: @input-placeholder-text-color;
    }

    &:disabled {
      // color: @input-disabled-text-color;
      background-color: transparent;
      cursor: not-allowed;
      opacity: 1;
      -webkit-text-fill-color: currentcolor; // fix disabled color in iOS
    }

    &:focus {
      outline: none;
    }

    &:read-only {
      cursor: default;
    }

    &--right {
      text-align: right;
    }

    &--center {
      text-align: center;
    }
  }

  &.@{prefix}-input__error {
    align-items: flex-start;

    .@{prefix}-cell__note {
      flex-direction: column;
    }

    .@{prefix}-input {
      &__control {
        color: @input-error-text-color;

        &::placeholder {
          color: @input-error-text-color;
        }
      }

      &__error-msg {
        text-align: left;
        padding-top: @spacer-1;
        font-size: @input-error-msg-font-size;
        line-height: 20px;
        width: 100%;
      }
    }
  }

  &.@{prefix}-input--size {
    &-medium {
      padding: 16px;
    }

    &-small {
      padding: 12px 16px;
    }
  }
}