$btn-background-color:   $primary !default;
$btn-background-image:   null !default;
$btn-border-color:       null !default;
$btn-border-radius:      5px !default;
$btn-border-width:       2px !default;
$btn-box-shadow:         none !default;
$btn-box-shadow--active: $btn-box-shadow !default;
$btn-disabled-opacity:   0.5 !default;
$btn-font-family:        $body-font-family !default;
$btn-font-size:          1rem !default;
$btn-font-weight:        600 !default;
$btn-icon-size:          1.3em !default;
$btn-icon-margin:        0.4em !default;
$btn-line-height:        1.5em !default;
$btn-padding:            12px 31px !default;
$btn-min-height:         0 !default;
$btns-margin-right:      1rem !default;
$btns-margin-bottom:     1.5rem !default;

// Add default color to loop over
$btn-app-colors: mergeColorMaps($app-colors, (
  "default": ($btn-background-color, $btn-background-image)
));

@mixin loader($color) {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9C2 5.5 4.64444 2 9.15556 2C13.6667 2 16 5.88889 16 9" stroke="#{encodecolor($color)}" stroke-width="2"/></svg>')
}

@function calcBoxShadow($border-color: null) {
  // Pass $border-color to add border into the box-shadow
  $border-width: $btn-border-width;
  $border-shadow: null;
  // Default border width
  @if ($border-width <= 0px) {
    $border-width: 2px;
  }
  // Get values
  @if ($border-color and $btn-box-shadow != none) {
    @return 0 0 0 $border-width $border-color inset, $btn-box-shadow;
  }
  @else if ($border-color) {
    @return 0 0 0 $border-width $border-color inset;
  }
  @else if ($btn-box-shadow != none) {
    @return $btn-box-shadow;
  }
  @else {
    @return none;
  }
}

/* ---- Main ------------------------- */

  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: $btn-padding;
    font-family: $btn-font-family;
    font-style: normal;
    font-weight: $btn-font-weight;
    font-size: $btn-font-size;
    min-height: $btn-min-height;
    line-height: $btn-line-height;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    background-size: 200% auto; /* 200% for gradients */
    border-radius: $btn-border-radius;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  .btn.is-full,
  .btn.is-fullwidth, {
    display: flex;
    width: 100%;
  }

  /* Icon */

  .btn .icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: $btn-icon-size;
    width: $btn-icon-size;
    transition: opacity 200ms ease;
    &:first-child:not(:last-child) {
      margin-left: calc(-0.2em - 1px);
      margin-right: $btn-icon-margin;
    }
    &:last-child:not(:first-child) {
      margin-right: calc(-0.2em - 1px);
      margin-left: $btn-icon-margin;
    }
  }

  /* Multiple buttons */

  .btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .btns .btn {
    margin-right: $btns-margin-right;
    margin-bottom: $btns-margin-bottom;
  }
  .btns .btn:last-child {
    margin-right: 0;
  }

  /* Loading */

  .btn::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -10px;
    opacity: 0;
    z-index: 0;
    animation: loaderOne .9s cubic-bezier(.435,.165,.615,.81) infinite;
    background-size: auto;
    background-position: top;
    background-repeat: no-repeat;
    box-sizing: border-box;
    z-index: 2;
    @include loader(#fff);
  }
  .btn.is-loading,
  .btn.is-loading:hover,
  .btn.is-loading:focus {
    cursor: default;
    color: transparent !important;
  }
  .btn.is-loading .icon {
    opacity: 0;
  }
  .btn.is-loading svg.icon {
    fill: transparent !important;
  }
  .btn.is-loading::after {
    opacity: 1;
  }
  @keyframes loaderOne {
    0% {
      transform:rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Button styles */

  @each $name, $value in $btn-app-colors {
    $cssname: '.btn';
    $color: nth($value, 1);
    $color-invert: nth($value, 2);
    $background-image: nth($value, 5);
    $border-color: null;

    @if ($background-image == null) {
      $background-image: none;
    }
    @if ($name == 'default') {
      $border-color: $btn-border-color;
    }
    @if $name != 'default' {
      $cssname: '.btn.is-#{$name}';
    }

    #{$cssname} {
      color: $color-invert;
      background-color: $color;
      box-shadow: calcBoxShadow($border-color);
      background-image: $background-image;
      &:hover,
      &:focus,
      &:active,
      &.is-hovered,
      &.is-focused,
      &.is-active {
        color: $color-invert;
        background-color: cherryDarken($color, 8%);
        background-position: right center;
        box-shadow: calcBoxShadow($border-color);
      }
      &[disabled],
      fieldset[disabled] & {
        opacity: $btn-disabled-opacity;
        background-color: $color;
        cursor: default;
      }
      &.is-loading {
        background-color: $color;
        background-position: left center;
        &::after {
          @include loader($color-invert);
        }
      }
      &.is-inverted {
        color: $color;
        background-color: $color-invert;
        background-image: none;
        box-shadow: calcBoxShadow();
        &::after {
          @include loader($color);
        }
        &:hover,
        &:focus,
        &:active,
        &.is-hovered,
        &.is-focused,
        &.is-active {
          background-color: cherryDarken($color-invert, 5%);
        }
        &[disabled],
        fieldset[disabled] &,
        &.is-loading {
          color: $color;
          background-color: $color-invert;
        }
      }
      &.is-outlined {
        // Use $color if default `border-color` not set
        $border-color-outlined: $border-color;
        @if ($border-color == null) {
          $border-color-outlined: $color;
        }
        color: $color;
        background-color: transparent;
        background-image: none;
        box-shadow: calcBoxShadow($border-color-outlined);
        &::after {
          @include loader($color);
        }
        &:hover,
        &:focus,
        &:active,
        &.is-hovered,
        &.is-focused,
        &.is-active {
          color: $color-invert;
          background-color: $color;
          background-image: $background-image;
          box-shadow: calcBoxShadow(transparent);
        }
        &[disabled],
        fieldset[disabled] &,
        &.is-loading {
          color: $color;
          background-color: transparent;
          background-image: none;
          box-shadow: calcBoxShadow($border-color-outlined);
        }
      }
      // If light and dark colors are provided
      @if length($value) >= 4 and nth($value, 4) {
        $color-light: nth($value, 3);
        $color-dark: nth($value, 4);
        &.is-light {
          color: $color-dark;
          background-color: $color-light;
          background-image: none;
          box-shadow: calcBoxShadow();
          &::after {
            @include loader($color-dark);
          }
          &:hover,
          &:focus,
          &:active,
          &.is-hovered,
          &.is-focused,
          &.is-active {
            background-color: cherryDarken($color-light, 4%);
            color: $color-dark;
          }
          &[disabled],
          fieldset[disabled] &,
          &.is-loading {
            color: $color-dark;
            background-color: $color-light;
            background-image: none;
            box-shadow: calcBoxShadow();
          }
        }
      }
    }
  }