.sui-a-form-control {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;

  @at-root {
    input#{&},
    select#{&},
    textarea#{&} {
      position: relative;
      z-index: 1;

      @include sui-a-form-control();
    }
  }

  & > input,
  & > select,
  & > textarea {
    @include sui-a-form-control();
  }

  &.as--inline {
    width: auto;
    display: inline-block;
    vertical-align: middle;
  }

  @at-root textarea#{&},
  & > textarea { /* stylelint-disable-line */
    max-width: 100%;
  }

  @at-root textarea#{&}:not(.as--inline),
  &:not(.as--inline) & > textarea { /* stylelint-disable-line */
    height: auto;
    min-width: 100%;
  }

  @at-root select#{&},
  & > select { /* stylelint-disable-line */
    &:not([multiple]) {
      overflow: hidden;
      padding-right: rem(20) + $sui-space-sm * 2;
      min-width: $sui-size-xs + $sui-space-sm * 2;
      white-space: nowrap;
      text-overflow: ellipsis;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMHB4JyBoZWlnaHQ9JzIwcHgnPjxwYXRoIGQ9Ik00LjUxNiA3LjU0OGMwLjQzNi0wLjQ0NiAxLjA0My0wLjQ4MSAxLjU3NiAwbDMuOTA4IDMuNzQ3IDMuOTA4LTMuNzQ3YzAuNTMzLTAuNDgxIDEuMTQxLTAuNDQ2IDEuNTc0IDAgMC40MzYgMC40NDUgMC40MDggMS4xOTcgMCAxLjYxNS0wLjQwNiAwLjQxOC00LjY5NSA0LjUwMi00LjY5NSA0LjUwMi0wLjIxNyAwLjIyMy0wLjUwMiAwLjMzNS0wLjc4NyAwLjMzNXMtMC41Ny0wLjExMi0wLjc4OS0wLjMzNWMwIDAtNC4yODctNC4wODQtNC42OTUtNC41MDJzLTAuNDM2LTEuMTcgMC0xLjYxNXoiPjwvcGF0aD48L3N2Zz4=");
      background-position: right $sui-space-sm center;
      background-repeat: no-repeat;
      background-size: rem(20);
    }

    &[multiple] {
      overflow: auto;
    }
  }

  &.as--loading {
    @include suiLoader();

    &::before {
      z-index: 2;
      pointer-events: none;
      content: '';
      position: absolute;
      top: $sui-size-border*2;
      right: $sui-size-border;
      bottom: $sui-size-border*2;
      width: 3rem;
      background: linear-gradient(45deg, rgba(white, 0), white 50%);
      border-radius: $sui-border-radius-md;
      max-height: 2rem;
    }

    &::after {
      z-index: 3;
      pointer-events: none;
      height: 1rem;
      width: 1rem;
      top: $sui-space-sm;
      left: auto;
      right: $sui-space-sm;
      margin-top: 0;
      margin-left: 0;
    }
  }
}