.btn {
  border: none;
  font-size: 1em;
  cursor: pointer;
  padding: 0.6em 2em;
  margin: 0.5em 0.3em 0.5em 0;

  &.btn-slim {
      padding: 0.3em 0.5em;
      line-height: 1.3em;

      .ak-icon {
          transform-origin: center center;
      }
  }

  .ak-icon {
      transition: all 0.25s;
      transform-origin: left center;

      &:first-child:not(:last-child) {
          padding-right: 1.1em;
          margin-left: -1.1em;
      }

      &:last-child:not(:first-child) {
          padding-left: 1.1em;
          margin-right: -1.1em;
      }
  }

  &:hover {
      .ak-icon {
          transform: scale(1.1);
      }
  }
}

@mixin buttonClass ($buttonPrefix, $buttonName, $accent, $text-color: $white, $use-border: false, $use-variations: true) {
    .btn.btn-#{$buttonPrefix}#{$buttonName} {
        color: $text-color;
        border: 1px solid $accent;
        background-color: $accent;
        border-radius: 5px;
        transform-origin: center center;
        transition: background 0.4s, transform 0.6s, border 0.5s, color 0.3s;

        &:hover {
            @if $use-variations {
              border-color: darken($accent, 1%);
              background-color: lighten(desaturate($accent, 5), 5%);
            } @else {
              border-color: $accent;
              background-color: $accent;
            }
        }

        &:active {
            @if $use-variations {
              background-color: darken(desaturate($accent, 20), 5%);
            } @else {
              background-color: $accent;
            }

            text-shadow: 0 2px 4px rgba(127, 127, 127, 0.6);
            transform: scale(0.98);
        }

        &[disabled] {
            opacity: 0.7;
            cursor: not-allowed;

            @if $use-variations {
              background-color: fade-out(saturate($accent, 30), 0.3);
              border-color: fade-out(desaturate($accent, 30), 0.4);
            } @else {
              background-color: $accent;
              border-color: $accent;
            }
        }

        @if $use-border {
            border-color: $text-color;

            @if $use-variations {
              &:hover { border-color: darken($text-color, 1%); }
              &:active { background-color: darken(desaturate($text-color, 20), 5%); }
            } @else {
              &:hover { border-color: $text-color; }
              &:active { background-color: $text-color; }
            }
        }
    }
}

@mixin buttonClasses ($list) {
  @each $buttonName, $buttonColors in $list {
    @include buttonClass("", $buttonName, $buttonColors...);
    @media (max-width: 768px) {
      @include buttonClass("m-", $buttonName, $buttonColors...);
    }
    @media (min-width: 769px) {
      @include buttonClass("d-", $buttonName, $buttonColors...);
    }
  }
}

@include buttonClasses($button-flavors);