@use "00-base/configure" as *;

$primarycolors: (
  "c-primary-alt": $c-primary-alt,
  "c-highlight": $c-highlight,
  "c-black": $c-black,
  "c-gray-dark": $c-gray-dark,
  "c-white": $c-white
);


button {
  cursor: pointer;
  font-family: $fonts;
  font-weight: $fonts-light;
}

.ma__button {

  @include ma-button("normal");
}

.ma__button--small {

  @include ma-button("small");
}

.ma__button--large {

  @include ma-button("large");
}

.ma__button {

  @include ma-button("normal","solid",$c-primary);

  @each $class, $c in $primarycolors {
    &--#{$class} {

      @include ma-button("normal","solid",$c);
    }
  }
}

.ma__button--secondary {

  @include ma-button("normal","outline",$c-primary);
}

.ma__button--secondary.ma__button--c-primary-alt {

  @include ma-button("normal","outline",$c-primary-alt);
}

.ma__button--secondary.ma__button--c-highlight {

  @include ma-button("normal","outline",$c-highlight);
}

.ma__button--secondary.ma__button--c-gray-dark {

  @include ma-button("normal","outline",$c-gray-dark);
}

.ma__button--tertiary {

  @include ma-button("normal","solid",$c-gray-light);
  color: $c-black;
}

.ma__button--quaternary {
  background-color: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid $c-primary-lighter;
  color: $c-primary;
  padding: 0;
  text-transform: none;
  letter-spacing: $letter-spacing-default;

  &:hover:not(:disabled) {
   border-bottom: 3px solid $c-primary;
   background-color: transparent;
  }
}

.ma__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}