@import "var";

.@{prefixName}-field {
  display: flex;
  width: 100%;
  background-color: @field-background-color;
  border-radius: @field-border-radius;
  box-sizing: border-box;

  &__textarea, 
  &__input {
    display: flex;
    font-size: @field-text-size;
    color: @field-text-color;
    width: 100%;
    border-radius: inherit;
    align-items: center;

    &.is-disabled {
      color: @field-disabled-text-color;
      background-color: @field-disabled-background-color;

      &::after {
        border-color: @field-disabled-border-color;
      }
    }
    &.is-focus {
      &::after {
        border-color: @field-focus-border-color;
      }
    }
    &.is-invalid {
      color: @field-invalid-text-color;

      &::after {
        border-color: @field-invalid-border-color;
      }
    }
  }

  &__textarea {
    position: relative;
    padding: @field-textarea-padding;

    &-item {
      display: block;
      width: 100%;
      height: auto;
      min-height: @field-textarea-min-height;
      max-height: @field-textarea-max-height;

      &.size-auto {
        min-height: 0;
        max-height: none;
      }

      &.is-count {
        padding-bottom: 30px;
      }
    }
    &-counter {
      position: absolute;
      font-size: @field-counter-text-size;
      color: @field-counter-number-text-color;
      right: 12px;
      bottom: 12px;
    }
    &-current {
      color: @field-current-number-text-color;
    }
  }

  &__input {
    padding: @field-input-padding;

    &-item {
      display: block;
      width: 100%;
      min-height: @field-input-height - @field-input-padding*2;
      height: @field-input-height - @field-input-padding*2;
      line-height: inherit;
      text-overflow: clip;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  &__placeholder {
    color: @field-placeholder-text-color;

    &--invalid {
      color: @field-invalid-text-color;
    }
  }
}