@import '../styles/variables';
@import '../styles/colors';
@import '../styles/effects-mixins';

@mixin themed-button($background-color, $text-color) {
  background-color: $background-color;
  color: $text-color;

    &:hover,
    &:focus {
      background-color: darken($background-color, 2.5);
    }

    &:active {
      background-color: darken($background-color, 5);
    }
}

.amd-button {
  @include border-radius($button-border-radius);
  @include box-shadow($button-box-shadow);

  &--default {
    @include themed-button($default-color, $default-color-text);
  }

  &--primary {
    @include themed-button($primary-color, $primary-color-text);
  }

  &--secondary {
    @include themed-button($secondary-color, $secondary-color-text);
  }
}