.sui-a-button {
  @include suiButtonBase ();
  @include suiButtonColor(
    $background: white,
    $background-hover: white,
    $border-color-hover: $sui-color-primary,
    $border-color: $sui-color-border,
    $color-contextual: $sui-color-text,
    $color: $sui-color-text,
    $color-focus-effect: $sui-color-primary
  );

  @include suiButtonFocusSelectors {
    @include suiFocusEffect();
  }

  html body &.as--square {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
  }

  &.as--block {
    display: block;
    width: 100%;
  }

  // -------------------------
  //    Colors
  // -------------------------
  &.as--link {
    @include suiButtonColor($color: $sui-color-primary, $background: transparent);
  }

  &.as--link-alt {
    @include suiButtonColor($color: $sui-color-text, $background: transparent);
  }

  &.as--link,
  &.as--link-alt {
    text-decoration: underline;

    @include suiButtonHoverSelectors() {
      text-decoration: none;
      box-shadow: none;
    }

    @include suiButtonFocusSelectors() {
      @include suiFocusEffect();
    }

    & > * {
      &::after {
        display: inline-block;
      }
    }
  }

  &.as--primary {
    @include suiButtonColor(
      $background: $sui-color-primary,
      $border-color: transparent
    );
  }

  &.as--secondary {
    @include suiButtonColor(
      $background: $sui-color-primary-light,
      $border-color: transparent,
      $color: $sui-color-primary-dark,
      $color-contextual: $sui-color-text,
      $color-contextual-hover: $sui-color-primary,
      $color-focus-effect: $sui-color-primary
    );
  }

  &.as--warning {
    @include suiButtonColor(
      $background: $sui-color-warning-light,
      $border-color: transparent,
      $color: $sui-color-warning-dark,
      $color-hover: $sui-color-warning-dark,
      $color-contextual: $sui-color-text,
      $color-contextual-hover: $sui-color-warning,
      $color-focus-effect: $sui-color-warning
    );
  }

  &.as--danger {
    @include suiButtonColor(
      $background: $sui-color-danger-light,
      $border-color: transparent,
      $color: $sui-color-danger-dark,
      $color-hover: $sui-color-danger-dark,
      $color-contextual: $sui-color-text,
      $color-contextual-hover: $sui-color-danger,
      $color-focus-effect: $sui-color-danger
    );
  }

  &.as--action-play {
    @include suiButtonColor(
      $background: $sui-color-success,
      $border-color: transparent,
      $color: $sui-color-brand-denim-100,
      $color-focus-effect: $sui-color-success
    );
  }

  &.as--action-stop {
    @include suiButtonColor(
      $background: $sui-color-danger,
      $border-color: transparent,
      $color: $sui-color-brand-denim-100,
      $color-focus-effect: $sui-color-danger
    );
  }

  &.as--success {
    @include suiButtonColor(
      $background: $sui-color-success,
      $border-color: transparent,
      $color: $sui-color-brand-denim-100,
      $color-focus-effect: $sui-color-success
    );
  }

  &.as--danger-secondary {
    @include suiButtonColor(
      $background: $sui-color-danger-light,
      $border-color: transparent,
      $color: $sui-color-danger-dark,
      $color-hover: $sui-color-danger-dark,
      $color-contextual: $sui-color-text,
      $color-contextual-hover: $sui-color-danger,
      $color-focus-effect: $sui-color-danger
    );
  }

  // -------------------------
  //    Sizes
  // -------------------------
  &.as--xs {
    @include suiButtonSize($sui-space-xxs*0.5, $sui-space-xxs, $sui-font-size-xs);
  }

  &.as--sm {
    @include suiButtonSize($sui-space-xxs, $sui-space-sm, $sui-font-size-sm);
  }

  &.as--lg {
    font-weight: 300;

    @include suiButtonSize($sui-space-xs, $sui-space-lg, $sui-font-size-lg);
  }

  // Min Width
  @include suiResponsiveModifiers('as--min-width-xxs') {
    min-width: $sui-size-xxs;
  }

  @include suiResponsiveModifiers('as--min-width-xs') {
    min-width: $sui-size-xs;
  }

  @include suiResponsiveModifiers('as--min-width-sm') {
    min-width: $sui-size-sm;
  }

  @include suiResponsiveModifiers('as--min-width-md') {
    min-width: $sui-size-md;
  }

  @include suiResponsiveModifiers('as--min-width-lg') {
    min-width: $sui-size-lg;
  }

  @include suiResponsiveModifiers('as--min-width-xl') {
    min-width: $sui-size-xl;
  }

  @include suiResponsiveModifiers('as--min-width-xxl') {
    min-width: $sui-size-xxl;
  }

  // -------------------------
  //    Contextual
  // -------------------------
  html body &.as--contextual {
    background: none !important;
    border: none !important;
    box-shadow: none;
    padding: $sui-space-xxs $sui-space-sm;
    line-height: 1rem;

    &::before {
      content: '';
      position: absolute;
      top: -$sui-space-sm;
      left: -$sui-space-xxs;
      right: -$sui-space-xxs;
      bottom: -$sui-space-sm;
    }
  }

  // -------------------------
  //    Disabled
  // -------------------------
  @include suiButtonDisabledSelectors();
}
