$button-colors: (
  "black": (
    "base": $fc-clr-text,
    "dark": #000,
  ),
  "primary": (
    "base": $fc-clr-primary,
    "dark": $fc-clr-primary--dk,
  ),
  "success": (
    "base": $fc-clr-success,
  ),
  "secondary": (
    "base": $fc-clr-secondary,
    "dark": $fc-clr-secondary--dk,
  ),
  "error": (
    "base": $fc-clr-error,
  ),
  "white": (
    "base": #fff,
    "dark": $fc-clr-border,
    "text": $fc-clr-text,
  ),
  "warning": (
    "base": $fc-clr-warning,
    "text": $fc-clr-text,
  ),
) !default;

$button-sizes: (
  "smr": (
    "width": 90px,
    "height": 30px,
  ),
  "sm": (
    "width": 190px,
    "height": 40px,
  ),
  "base": (
    "width": 284px,
    "height": 40px,
  ),
  "lg": (
    "width": 308px,
    "height": 40px,
  ),
  "fullWidth": (
    "width": 100%,
    "height": 40px,
  ),
) !default;

@mixin outlined($color) {
  &.bt--outlined {
    background-color: white;
    color: $color;
    border: solid 1px $color;

    &-active,
    &:hover {
      background-color: rgba($color, $fc-opacity-button-hover);
    }
  }
}

// NOTE: Both min/max functions were added due to
// the lack of them in the rubysass implementation
//
// More info:
// https://github.com/sass/libsass/issues/2701
// https://github.com/sass/sass/issues/2378#issuecomment-433868712
@function f-max($numbers...) {
  @return calc(min(#{$numbers}));
}

@function f-min($numbers...) {
  @return calc(min(#{$numbers}));
}

@mixin generate-color-variants() {
  @each $name, $colors in $button-colors {
    $base: map-get($colors, "base");
    $dark: map-get($colors, "dark") or darken($base, 10%);
    $text: map-get($colors, "text") or white;

    @include generate-color-variant($name, $base, $dark, $text);
  }
}

@mixin generate-size-modifiers() {
  @each $name, $sizes in $button-sizes {
    $width: map-get($sizes, "width");
    $height: map-get($sizes, "height");

    &--#{$name} {
      width: f-min($width, 100%);
      max-width: f-min($width, 100%);
      min-height: $height;
      line-height: $height;
    }
  }
}

@mixin generate-color-variant($name, $color, $color--dk, $text-color) {
  &--#{$name} {
    background-color: $color;
    color: $text-color;

    &:hover {
      background: $color--dk;
    }

    &:active,
    &:hover,
    &:visited {
      color: $text-color;
    }

    @include outlined($color);
  }
}

.bt {
  text-decoration: none;
  background: $fc-clr-primary;
  border-radius: 2px;
  color: white;
  cursor: pointer;
  display: block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 20px;
  text-align: center;

  @include generate-color-variants();
  @include generate-size-modifiers();

  &:hover {
    background: $fc-clr-primary--dk;
    text-decoration: none;
  }

  &--tertiary {
    background-color: white;
    color: $fc-clr-text-secondary;
    border: 1px solid $fc-clr-text-secondary;

    &:hover {
      background-color: rgba($fc-clr-text-secondary, $fc-opacity-button-hover);
    }

    &:active {
      background-color: rgba($fc-clr-primary, $fc-opacity-button-hover);
      color: $fc-clr-primary;
      border-color: $fc-clr-primary;
    }
  }

  &--disabled,
  &:disabled {
    color: $fc-clr-text-secondary;
    background-color: $fc-clr-disabled;
    cursor: not-allowed !important;
    border: none;

    &:hover {
      color: $fc-clr-text-secondary;
      background-color: $fc-clr-disabled;
    }
  }

  &--round {
    border-radius: 40px;
  }

  &--icon {
    padding: 0 15px;
  }

  &--rounded {
    border-radius: 5px;
    height: 40px;
  }

  &--fullWidth {
    width: 100%;
  }
}