// Parameters
// $size => "normal", "small"
// $type => "solid", "outline"
// $color => rgba() or hex value
//
// passing a color value will return the code for the theme instead of the code for layout

@mixin ma-button ($size:"normal", $type:"solid", $color:"transparent") {
  // layout

  @if ($color == "transparent") {

    @include ma-button-base;
    
    // default

    @if ($size == "normal") {
      font-size: 1.25rem;
      line-height: 1.4;
    }
    // small

    @if ($size == "small") {
      font-size: 1rem;
      line-height: 1.2;
    }
    // large

    @if ($size == "large") {
      font-size: 1.375rem;
      line-height: 1.61;
    }
  }
  // theme
  @else {
    font-weight: 700;

    @if ($type == "solid") {
      background-color: $color;
      border-color: transparent;

      @if $color == $c-highlight {
        color: $c-black;

        svg {
          fill: $c-black;
        }
      }

      @if $color == $c-white {
        color: $c-primary;

        svg {
          fill: $c-primary;
        }
      } @else {
        color: $c-font-inverse;
      }

      &:hover {
        background-color: rgba($color,.75);
      }
    }
    // outline
    @else {
      background-color: $c-font-inverse;
      border-color: rgba($color,.5);
      
      @if $color == $c-highlight {
        color: $c-primary;
        border-color: rgba($c-primary,.5);

        svg {
          fill: $c-primary;
        }
      } @else {
        color: $color;

        svg {
          fill: $color;
        }
      }

      &:hover {
        background-color: rgba($color,1);

        svg {
          fill: $c-white;
        }

        @if $color == $c-highlight {
          color: $c-font-inverse;
        } @else {
          color: $c-font-inverse;
        }
      }
    }
  }
}