// 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

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

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

@use "00-base/color-tokens" as *;

@use "ma-button-base" as *;

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

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

    @include ma-button-base;

    // default

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

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

    @if ($size == "large") {
      font-size: $fonts-medium;
      line-height: 1.61;
    }
  }
  // theme
  @else {
    font-weight: $fonts-bold;

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

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

        svg {
          fill: $c-primary;
        }
      }

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

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

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

      @if $color == $c-highlight {
        color: $c-black;
        border-color: rgba($c-highlight,.5);

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

        svg {
          fill: $color;
        }
      }

      &:hover:not(:disabled) {

        svg {
          fill: $c-white;
        }

        @if $color == $c-highlight {
          color: $c-black;
          background-color: rgba($c-highlight,1);
        } @else {
          color: $c-font-inverse;
          background-color: rgba($color,1);
        }
      }
    }
  }
}