button-mixins.scss

// Button Variants
$buttonType: (
  (primary $as-orange-100 $as-orange-200 $as-orange-300 $as-shadow-orange-100),
  (secondary $as-blue-100 $as-blue-200 $as-blue-300 $as-shadow-blue-100),
  (danger $as-red-100 $as-red-200 $as-red-300 $as-shadow-red-100)
);

.as-btn {
  @extend %btn-helper !optional;
}

@each $button in $buttonType {
  .as-btn--#{nth($button, 1)} {
    background: #{nth($button, 2)};
    border: 1px solid transparent;
    box-shadow: #{nth($button, 5)};
    color: $as-white;
    cursor: pointer;

    &:hover {
      background: #{nth($button, 3)};
    }

    &:focus,
    &:active,
    &.as-btn--active {
      background: #{nth($button, 4)};
      border: 1px solid $as-white;
    }
  }
}