@mixin sui-a-form-control() {
  display: block;
  width: 100%;
  padding: $sui-space-xs $sui-space-sm;
  margin: 0;
  font-weight: normal;
  font-size: $sui-font-size-md;
  line-height: $sui-line-height;
  vertical-align: middle;
  background-color: $sui-color-brand-denim-200;
  border: $sui-size-border solid $sui-color-border;
  border-radius: $sui-border-radius-md;
  box-shadow: none;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

  &:focus {
    @include suiFocusEffect();

    border-color: $sui-color-primary;
    outline: 0;
  }

  &[readonly] {
    cursor: default;
    color: $sui-color-text;
    border-color: darken($sui-color-border, 5%);
    background-color: $sui-color-brand-denim-300;
    background-image: none !important;
    opacity: 1; // iOS fix for unreadable readonly content
    box-shadow: none;
  }

  &[disabled] {
    cursor: not-allowed;
    color: $sui-color-text;
    border-color: darken($sui-color-border, 5%);
    background-color: $sui-color-brand-denim-300;
    background-image: none !important;
    opacity: 1; // iOS fix for unreadable disabled content
    box-shadow: none;
  }

  &.as--primary:not([disabled]),
  .sui-m-form-group.as--primary &:not([disabled]),
  .sui-a-form-control.as--primary &:not([disabled]) {
    border-color: $sui-color-primary;
    background-color: lighten($sui-color-primary-light, 9%);
    color: $sui-color-primary;
  }

  &.as--danger,
  .sui-m-form-group.as--danger &,
  .sui-a-form-control.as--danger & {
    border-color: $sui-color-danger;
    background-color: lighten($sui-color-danger-light, 9%);

    &:focus {
      @include suiFocusEffect($sui-color-danger);
    }
  }

  &.as--warning,
  .sui-m-form-group.as--warning &,
  .sui-a-form-control.as--warning & {
    border-color: $sui-color-warning;
    background-color: lighten($sui-color-warning-light, 9%);

    &:focus {
      @include suiFocusEffect($sui-color-warning);
    }
  }

  &.as--success,
  .sui-m-form-group.as--success &,
  .sui-a-form-control.as--success & {
    border-color: $sui-color-success;
    background-color: lighten($sui-color-success-light, 9%);

    &:focus {
      @include suiFocusEffect($sui-color-success);
    }
  }

  &.as--sm,
  .sui-m-form-group.as--sm &,
  .sui-a-form-control.as--sm & {
    padding: $sui-space-xxs $sui-space-sm;
    font-size: $sui-font-size-sm;
  }
}