$input-max-width: 580px;
$box-width: 12px;

@mixin apos-input() {
  @include type-base;
  @include apos-transition(all);

  & {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--a-base-8);
    color: var(--a-text-primary);
    border-radius: var(--a-border-radius);
    background-color: var(--a-base-9);
  }

  &::placeholder {
    color: var(--a-base-4);
    font-style: italic;
  }

  &:hover,
  &:focus {
    border-color: var(--a-base-2);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 3px var(--a-base-2);
    border-color: var(--a-base-2);
    background-color: var(--a-base-10);
  }

  &[disabled] {
    color: var(--a-base-4);
    background: var(--a-base-7);
    border-color: var(--a-base-4);

    &:hover {
      cursor: not-allowed;
    }
  }

  .apos-field--error & {
    border-color: var(--a-danger);

    &:focus {
      outline: none;
      box-shadow: 0 0 3px var(--a-danger);
    }
  }

  &--text,
  &--time,
  &--textarea,
  &--date,
  &--select,
  &--password,
  &--email {
    padding: $input-padding;
    padding-right: $input-padding * 2;
  }
}
