$button-color: $darkestGray;
$button-background-color: $white;
$button-border-width: 2px;
$button-padding: 6px 10px;
$button-font-size: 0.8rem;
$button-border-radius: 12px;
$disabled-button-opacity: 0.5;
$xl-button-padding: 15px 20px;
$xl-button-font-size: 1.1rem;
$xl-button-border-radius: 20px;
$lg-button-padding: 10px 15px;
$lg-button-font-size: 1rem;
$lg-button-border-radius: 15px;
$sm-button-padding: 5px 10px;
$sm-button-font-size: 0.75rem;
$sm-button-border-radius: 9px;
$mini-button-padding: 3px 8px;
$mini-button-font-size: 0.6rem;
$mini-button-border-radius: 7px;
$icon-button-padding: 6px;
$icon-button-font-size: 16px;
$bordered-button-border-color: $darkestGray;
$bordered-button-active-font-color: $white;
$bordered-button-hovered-border-color-alpha: 0.5;
$floating-button-translate-size: -3px;
$flat-button-background-alpha: $flat-color-alpha;
$flat-button-background-color: tint($button-background-color, percentage(1 - $flat-button-background-alpha));
$flat-button-color: rgba($darkestGray, 0.65);
$flat-button-hovered-background-alpha: 0.25;
$link-button-background-color: $button-background-color;
$link-button-color: $button-color;
$link-button-background-alpha: 0.1;
$loading-button-spinner-diameter: 16px;
$loading-button-spinner-width: 3px;
$loading-button-spinner-color: $button-color;

.btn {
  padding: 6px 10px;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  transition: all 0.25s ease-in-out;
  user-select: none;
  font-size: $button-font-size;
  border-radius: $button-border-radius;
  cursor: pointer;
  background-color: $button-background-color;
  color: $button-color;
  border: $button-border-width solid transparent;
  background-position: center;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1);
  }

  &:active {
    background-color: tint($white, 75%);
    transform: translateY(0);
    background-size: 100%;
    transition: all 0.25s ease-in-out;
    scale: 1;
  }

  &:disabled {
    pointer-events: none;
    opacity: $disabled-button-opacity;
  }

  &.circle {
    border-radius: 50% !important;
  }

  &.square {
    border-radius: 0 !important;
  }

  &.block {
    display: block;
    width: 100%;
  }

  &.xl {
    padding: $xl-button-padding;
    font-size: $xl-button-font-size;
    border-radius: $xl-button-border-radius;
  }

  &.lg {
    padding: $lg-button-padding;
    font-size: $lg-button-font-size;
    border-radius: $lg-button-border-radius;
  }

  &.sm {
    padding: $sm-button-padding;
    font-size: $sm-button-font-size;
    border-radius: $sm-button-border-radius;
  }

  &.mini {
    padding: $mini-button-padding;
    font-size: $mini-button-font-size;
    border-radius: $mini-button-border-radius;
  }

  &.icon {
    padding: $icon-button-padding;
    font-size: $icon-button-font-size;
  }

  &.no-float {
    transform: none;

    &:hover {
      transform: none;
    }
  }

  &.bordered {
    background-color: transparent;
    color: $bordered-button-border-color;
    border-color: $bordered-button-border-color;
    transition: all 0.25s ease;

    &:hover {
      transform: none;
      box-shadow: none !important;
      border-color: rgba($bordered-button-border-color, $bordered-button-hovered-border-color-alpha);
    }

    &:active {
      transform: none;
      box-shadow: none;
      color: $bordered-button-active-font-color;
      border-color: $bordered-button-border-color;
      background-color: $bordered-button-border-color;
    }
  }

  &.flat {
    background-color: $flat-button-background-color;
    color: $flat-button-color;
    transition: all 0.5s ease;

    &:hover {
      background: tint($flat-button-color, percentage(1 - $flat-button-hovered-background-alpha));
      transform: none;
      box-shadow: none;
    }

    &:active {
      color: $button-color;
      background: $button-background-color;
      background-size: 100%;
      transition: all 0.5s ease;
      transform: none;
      box-shadow: none;
    }
  }

  &.floating {
    transform: translateY($floating-button-translate-size);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;

    &:hover {
      transform: translateY($floating-button-translate-size + 1px);
    }

    &:active {
      transform: none;
      box-shadow: none !important;
    }
  }

  &.link {
    position: relative;
    background-color: transparent;
    color: $link-button-color;
    border-color: transparent;
    transition:
      all 0.5s ease,
      color 0.6s ease;

    &:before {
      content: "";
      background: tint($button-background-color, percentage(1 - $link-button-background-alpha));
      border-color: tint($button-background-color, percentage(1 - $link-button-background-alpha));
      position: absolute;
      bottom: -2px;
      left: -2px;
      top: -2px;
      right: -2px;
      border-radius: inherit;
      pointer-events: none;
      transition: all 0.25s ease;
      z-index: -1;
      transform: scale(0.5);
      opacity: 0;
      box-sizing: border-box;
    }

    &:hover {
      transform: translateY(0);
      box-shadow: none;
      color: $link-button-color;

      &:before {
        opacity: 1;
        transform: scale(1);
      }
    }

    &:active {
      transform: none;
      box-shadow: none;
      color: $link-button-color;
      background: $link-button-background-color;
      background-size: 100%;

      &:before {
        opacity: 0;
      }
    }
  }

  &.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;

    &::after {
      @include make-loading-spinner(
        $loading-button-spinner-diameter,
        $loading-button-spinner-width,
        $loading-button-spinner-color
      );
    }
  }

  @each $color, $value in $colors {
    &.#{$color} {
      background-color: $value;
      color: get-contrast($value);

      &:hover {
        box-shadow: 0 10px 20px -10px $value;
      }

      &:active {
        box-shadow: none;
      }

      &.flat {
        background-color: tint($value, percentage(1 - $flat-button-background-alpha));
        color: $value;
        transition:
          all 0.5s ease,
          color 0.6s ease;

        &:hover {
          background: tint($value, percentage(1 - $flat-button-hovered-background-alpha));
          transform: none;
          box-shadow: none;
        }

        &:active {
          color: get-contrast($value);
          background: $value;
          background-size: 100%;
          transition: all 0s;
          transform: none;
          box-shadow: none;
        }
      }

      &.bordered {
        background-color: transparent;
        color: $value;
        border-color: $value;

        &:hover {
          border-color: tint($value, percentage(1- $bordered-button-hovered-border-color-alpha));
        }

        &:active {
          color: get-contrast($value);
          background-color: $value;
        }
      }

      &.link {
        background-color: transparent;
        color: $value;

        &:before {
          background: tint($value, percentage(1 - $link-button-background-alpha));
          border-color: tint($value, percentage(1 - $link-button-background-alpha));
        }

        &:hover {
          box-shadow: none;
        }

        &:active {
          transform: none;
          color: get-contrast($value);
          background: $value;
        }
      }

      &.floating {
        box-shadow: 0 10px 20px -10px $value;
      }

      &.loading {
        &::after {
          border-top-color: get-contrast($value);
        }
      }
    }
  }
}

.btn-group {
  display: flex;

  .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn:not(:first-child, :last-child) {
    border-radius: 0;
  }

  .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}