/* ==========================================================================
   Buttons
   ========================================================================== */
.btn,
.btn .btn-tabindex-wrapper {
  align-content: center;
  align-items: center;
  border-radius: $br-md;
  border: 0 solid transparent;
  display: inline-flex;
  font-family: $font-primary;
  font-weight: $fwp-bold;
  justify-content: center;
  text-align: center;
  white-space: nowrap;

  &:active,
  &:focus {
    outline: 0;
  }
}

// Forces button element to zero padding when .btn-tabindex-wrapper is present, uses wrapper for padding and content styles
.btn.btn-tabindex-padding {
  padding: 0 !important;
}

/* Sizes
   ========================================================================== */
.btn,
.btn-tabindex-wrapper,
.btn.btn-md,
.btn.btn-medium,
.btn.btn-md .btn-tabindex-wrapper,
.btn.btn-medium .btn-tabindex-wrapper {
  height: $bps-md;
  font-size: 15px;
  line-height: $bps-md;
  padding: 0 ($base * 4);
}

.btn.btn-lg,
.btn.btn-large,
.btn.btn-lg .btn-tabindex-wrapper,
.btn.btn-large .btn-tabindex-wrapper {
  font-size: 16px;
  height: $bps-lg;
  line-height: $bps-lg;
}

.btn.btn-sm,
.btn.btn-small,
.btn.btn-sm .btn-tabindex-wrapper,
.btn.btn-small .btn-tabindex-wrapper {
  height: $bps-sm;
  font-size: 14px;
  line-height: $bps-sm;
  padding: 0 ($base * 2);

  .link-icon {
    width: 19px;
    height: 18px;
    margin-left: 0px;
    margin-right: 6px;

    &.link-icon-right {
      margin-left: 6px;
      margin-right: 0px;
    }
  }
}

.btn.btn-ml,
.btn.btn-mlarge,
.btn.btn-ml .btn-tabindex-wrapper,
.btn.btn-mlarge .btn-tabindex-wrapper {
  height: ($base * 7);
  font-size: 14px;
  line-height: ($base * 7);
  padding: 0 ($base * 2);

  .link-icon {
    width: ($base * 5);
    height: ($base * 5);
    margin-left: 0px;
    margin-right: 12px;

    &.link-icon-right {
      margin-left: 12px;
      margin-right: 0px;
    }
  }
}

.btn.btn-xs,
.btn.btn-xsmall,
.btn.btn-xs .btn-tabindex-wrapper,
.btn.btn-xsmall .btn-tabindex-wrapper {
  height: $bps-xs;
  font-size: 12px;
  line-height: $bps-xs;
  padding: 0 ($base * 2);
}

/* Styles
   ========================================================================== */
.btn,
.btn-default {
  background: mix($primary, $white, 5%);
  color: $primary;
  transition: background $transition-duration;

  &:hover:not(.disabled):not([disabled]),
  &:focus:not(.disabled):not([disabled]) {
    background: mix($primary, $white, 10%);
  }

  &.btn-accent {
    background: $accent;
    color: $white;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: mix($white, $accent, 20%);
    }
  }

  &.btn-primary {
    background: $primary;
    color: $white;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: mix($white, $primary, 20%);
    }
  }

  &.btn-success {
    background: $color-green;
    color: $white;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: mix($white, $color-green, 20%);
    }
  }

  &.btn-danger {
    background: $color-red;
    color: $white;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: mix($white, $color-red, 20%);
    }
  }

  &.btn-warning {
    background: $color-yellow;
    color: $white;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: mix($white, $color-yellow, 20%);
    }
  }
}

/* isLink
   ========================================================================== */
.btn-link {
  background: transparent;
  color: $primary;

  &:hover:not(.disabled):not([disabled]),
  &:focus:not(.disabled):not([disabled]) {
    background: transparent;
    color: rgba($primary, 0.6);

    .link-icon {
      opacity: 0.6;
    }
  }

  &.btn-inverted {
    background: transparent;
    color: $white;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: transparent;
      color: rgba($white, 0.6);
    }
  }

  &.btn-primary {
    background: transparent;
    color: $primary;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: transparent;
      color: rgba($primary, 0.6);
    }
  }

  &.btn-success {
    background: transparent;
    color: $color-green;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: transparent;
      color: rgba($color-green, 0.6);
    }
  }

  &.btn-danger {
    background: transparent;
    color: $color-red;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: transparent;
      color: rgba($color-red, 0.6);
    }
  }

  &.btn-warning {
    background: transparent;
    color: $color-yellow;

    &:hover:not(.disabled):not([disabled]),
    &:focus:not(.disabled):not([disabled]) {
      background: transparent;
      color: rgba($color-yellow, 0.6);
    }
  }
}

/* icons
   ========================================================================== */
.btn > .icon,
.btn .btn-tabindex-wrapper > .icon {
  min-width: 16px;
}

.btn > .icon-left,
.btn .btn-tabindex-wrapper > .icon-left {
  margin: 0 $base 0 0;
}

.btn > .icon-right,
.btn .btn-tabindex-wrapper > .icon-right {
  margin: 0 0 0 $base;
}

/* disabled
   ========================================================================== */
.btn.disabled,
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
  text-decoration: none;
}

/* format
   ========================================================================== */
.btn.btn-block,
.btn.btn-block .btn-tabindex-wrapper {
  display: flex;
  width: 100%;
}

.btn.btn-rounded,
.btn.btn-squared,
.btn.btn-rounded .btn-tabindex-wrapper,
.btn.btn-squared .btn-tabindex-wrapper {
  padding: 0;
  width: $bps-md;

  &.btn-lg,
  &.btn-large {
    width: $bps-lg;
  }

  &.btn-sm,
  &.btn-small {
    width: $bps-sm;
  }

  &.btn-xs,
  &.btn-xsmall {
    width: $bps-xs;
  }
}

.btn.btn-rounded {
  border-radius: $br-round;
}