$button-font-family: $font-family-base !default;
$button-font-weight: 500 !default;
$button-lg-font-size: 1.25rem;
$button-sm-font-size: .875rem;

$button-primary-bg: $primary !default;
$button-primary-color: $white !default;
$button-primary-border-color: $primary !default;

$button-basic-bg: $secondary !default;
$button-basic-color: $dark-gray-1 !default;
$button-basic-border-color: $dark-gray-3 !default;

$button-plain-bg: transparent !default;
$button-plain-color: $primary !default;

$button-destructive-bg: $danger !default;
$button-destructive-color: $white !default;
$button-destructive-border-color: $danger !default;

@mixin button {
  display: inline-block;
  font-family: $button-font-family;
  font-weight: $button-font-weight;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  padding: $input-btn-padding-y $input-btn-padding-x;
  border-radius: $border-radius;
  border: 1px solid $light-gray-1;
  transition: .2s ease all;
  overflow: hidden;
  min-height: 36px;
  position: relative;

  &.btn--loading {
    padding-right: calc(1.5rem + #{$input-btn-padding-x});
  }

  suka-loading {
    position: absolute;
    right: calc(1rem / 2);
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }

  .suka-icon {
    vertical-align: top;
    position: relative;
    top: 0px;

    &[icon*='chevron-'] {
      top: 1px;
    }
  }

  &.btn--sm {
    font-size: $button-sm-font-size;
    min-height: 30px;
    padding: $spacing-2xs $spacing-xs;
    border-radius: $border-radius-sm;
  }

  &.btn--lg {
    font-size: $button-lg-font-size;
    min-height: 48px;
    border-radius: $border-radius-lg;
  }

  &:active {
    outline: none;
  }

  &:focus {
    outline: none;
  }

  &.skeleton {
    @include skeleton;

    width: 110px;
  }

  &.btn--full_width {
    width: 100%;
    display: block;

    &.skeleton {
      width: 100%;
    }
  }

  &.btn--hover {
    &:hover {
      transform: translateY(-2px);
      -webkit-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
      -moz-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
      box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
    }

    &:active {
      transform: translateY(-1px);
    }
  }

  &:disabled {
    opacity: .4;

    &.hover {
      border-color: inherit;
      transform: none;
      box-shadow: none;
    }
  }
}

.btn-group {
  display: block;

  .btn-group__wrapper {
    display:flex;
    flex-wrap:wrap;
    margin-left: -1 * gutter('sm');
    margin-top: -1 * gutter('sm');

    > .btn--group_item {
      flex: 0 0 auto;
      margin-left: gutter('sm');
      margin-top: gutter('sm');
    }
  }

  &.btn-group--segmented {
    .btn-group__wrapper {
      margin: 0;
      flex-wrap:nowrap;

      > .btn--group_item {
        border-radius: 0;
        margin: 0;

        &:not(:first-child) {
          margin-left: -1px;
        }

        &:first-child {
          border-top-left-radius: $border-radius;
          border-bottom-left-radius: $border-radius;
        }

        &:last-child {
          border-top-right-radius: $border-radius;
          border-bottom-right-radius: $border-radius;
        }
      }
    }
  }
}

@mixin makeButton($button-color, $button-bg, $button-border-color, $button-outline-color: $button-border-color) {
  @include button();

  color: $button-color;
  background: $button-bg;
  border-color: $button-border-color;

  .loading .loading__svg, .loading .loading__stroke{
    stroke: $button-color !important;
  }

  &:hover {
    background-color: lighten($button-bg, 5%);
  }

  &:active {
    background-color: darken($button-bg, 5%);
  }

  .btn__icon {
    fill: $button-color;
  }

  &.btn--outline {
    @extend .btn--outline;
    background: transparent;

    color: $button-outline-color;

    .btn__icon {
      fill: $button-outline-color;
    }

    &:hover {
      background-color: $button-bg;
      color: $button-color;

      .btn__icon {
        fill: $button-color;
      }
    }

    &:active {
      background-color: darken($button-bg, 5%);
    }
  }
}

.btn--primary {
  @include makeButton($button-primary-color, $button-primary-bg, $button-primary-border-color);
}

.btn--basic {
  @include makeButton($button-basic-color, $button-basic-bg, $button-basic-border-color);
}

.btn--destructive {
  @include makeButton($button-destructive-color, $button-destructive-bg, $button-destructive-border-color);
}

.btn--outline_white {
  @include button();

  color: $white;
  background: transparent;
  border-color: $white;

  .btn__icon {
    fill: $white;
  }

  &:hover {
    color: $dark;
    background: $white;

    .btn__icon {
      fill: $dark;
    }
  }

  &:active {
    background-color: darken($white, 20%);
  }
}

.btn--plain {
  @include button();
  color: $button-plain-color;
  background: $button-plain-bg;
  border-color: $button-plain-bg;

  &:hover {
    text-decoration: underline;
  }

  &:active {
    background: darken($light-gray-3, 5%);
  }

  .btn__icon {
    fill: $button-plain-color;
  }
}