//=== Button Style ===//
$btn-primary-color: white !default;
$btn-primary-bg: $color-elephant-800 !default;
$btn-primary-bg-dark: $color-elephant-900 !default;
$btn-primary-border: $color-elephant-900 !default;
$btn-primary-border-active: $color-elephant-800 !default;

$btn-secondary-color: $text-default !default;
$btn-secondary-bg: white !default;
$btn-secondary-bg-dark: $color-smoke-25 !default;
$btn-secondary-border: $border-color !default;
$btn-secondary-border-active: $color-smoke-50 !default;

$btn-danger-color: white !default;
$btn-danger-bg: $color-persimmon-800 !default;
$btn-danger-bg-dark: $color-persimmon-900 !default;
$btn-danger-border: $color-persimmon-900 !default;

$btn-link-color: $color-azure-800 !default;
$btn-link-bg: $color-smoke-50 !default;

$active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
//=== Button Style===//

.nucleus-button {
  font-size: $font-size-14;
  vertical-align: middle;
  line-height: 1.2;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0;
  color: $btn-primary-bg;
  cursor: pointer;
  transition: all .2s linear;
  letter-spacing: .3px;
  font-weight: $font-weight-500;
  height: 32px;
  min-width: 80px;

  &__icon {
    display: inline-flex;

    &.nucleus--active {
      margin-right: 4px;
    }
  }

  &:focus {
    border: 1px solid $color-azure-800;
    box-shadow: 0 0 0 1px $color-azure-800;
    outline: none;
  }

  &:active {
    box-shadow: $active-box-shadow;
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;

    .nucleus-button__icon {
      opacity: .5;
    }
  }

  &--iconOnly {
    min-width: 32px;
    padding: 7px;
  }

  &--primary {
    background-color: $btn-primary-bg;
    color: $btn-primary-color;
    border: 1px solid $btn-primary-border;
    background-image: linear-gradient(to bottom, $btn-primary-bg, $btn-primary-bg-dark);

    &:active {
      border: 1px solid $btn-primary-border-active;
    }

    &:hover:not([disabled]) {
      background-color: $btn-primary-bg-dark;
      background-image: none;
    }

    &.disabled,
    &[disabled] {
      color: $color-smoke-100;
      border: 1px solid $color-azure-300;
      background-image: linear-gradient(to bottom, $color-smoke-300, $color-azure-300);
    }
  }

  &--secondary {
    background-color: $btn-secondary-bg-dark;
    color: $btn-secondary-color;
    border: 1px solid $btn-secondary-border;
    background-image: linear-gradient(to bottom, $btn-secondary-bg, $btn-secondary-bg-dark);

    &:active {
      border: 1px solid $btn-secondary-border-active;
    }

    &:hover:not([disabled]) {
      background-color: $btn-secondary-bg-dark;
      background-image: none;
    }

    &.disabled,
    &[disabled] {
      color: $color-smoke-300;
      border: 1px solid $color-smoke-100;
      background-image: none;
      background-color: $color-smoke-50;
    }
  }

  &--danger {
    color: $btn-danger-color;
    background-color: $btn-danger-bg;
    border: 1px solid $btn-danger-border;
    background-image: linear-gradient(to bottom, $btn-danger-bg, $btn-danger-bg-dark);

    &:hover:not([disabled]) {
      background-color: $btn-danger-bg-dark;
      background-image: none;
    }

    &.disabled,
    &[disabled] {
      border: 1px solid $color-persimmon-400;
      color: $color-persimmon-100;
      background-image: linear-gradient(to bottom, $color-persimmon-500, $color-persimmon-400);
    }
  }

  &--link {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    color: $btn-link-color;
    font-weight: $font-weight-600;

    &:hover:not([disabled]) {
      background-color: $btn-link-bg;
      border-color: $btn-link-bg;
    }

    &.disabled,
    &[disabled] {
      color: $color-azure-100;
    }
  }

  &--text {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    color: $btn-primary-bg;

    &:hover:not([disabled]) {
      background-color: $btn-link-bg;
      border-color: $btn-link-bg;
    }

    &.active,
    &.active:hover {
      color: $color-azure-800;
    }

    &.disabled,
    &[disabled] {
      color: $color-smoke-300;
    }
  }

  &--block {
    width: 100%;
  }

  &--mini {
    padding: 2px 2px;
    font-size: $font-size-10;
    min-width: 16px;
    line-height: 1;
    height: 16px;
  }

  &--small {
    padding: 4px 6px;
    font-size: $font-size-12;
    min-width: 16px;
    height: 24px;
  }
}