.sui-a-loader {
  display: inline-block;
  position: relative;
  width: 1rem;

  &::before {
    content: '\00a0'; // Fix: Align loader with text
  }

  @include suiLoader();

  // -------------------------
  //    Colors
  // -------------------------
  &.as--primary {
    @include suiLoader(
      $color: $sui-color-primary
    );
  }

  // -------------------------
  //    Sizes
  // -------------------------

  &.as--sm {
    width: rem(12);

    @include suiLoader(
      $size: rem(12)
    );
  }

  &.as--lg {
    width: $sui-size-md*0.25;

    @include suiLoader(
      $size: $sui-size-md*0.25
    );
  }

  &.as--xl {
    width: $sui-size-sm*0.5;

    @include suiLoader(
      $size: $sui-size-sm*0.5
    );
  }

  &.as--start {
    margin-right: .5em;
  }

  &.as--between {
    margin-left: .4em;
    margin-right: .4em;
  }

  &.as--end {
    margin-left: .5em;
  }

  &.as--top {
    display: block;
    margin-bottom: .5em;
  }

  &.as--center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin-left: -.5em;
    margin-top: -.5em;
  }
}
