//
// Base styles
//

.btn {
  @include unset-link-underline();
  border-width: $btn-border-width;
  font-size: $btn-font-size;
  letter-spacing: $letter-spacing-base;
  text-transform: uppercase;
  white-space: normal; // allow multi-line buttons

  @include media-breakpoint-up(md) {
    font-size: $btn-font-size-md;
  }

  &:focus,
  &.focus {
    outline: $btn-focus-outline;
  }
}


//
// Color variants
//

// Custom default button for Athena
// NOTE: there is intentionally no .btn-default-outline provided
.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
  @include button-variant-overrides($btn-default-color, $btn-default-bg, $btn-default-border);

  // Always force borders on .btn-default to match $border-width, despite whatever $btn-border-width is set to.
  // Adjust padding to accommodate.
  border-width: 1px;
  padding: calc(#{$btn-padding-y} + #{($btn-border-width - $border-width)}) calc(#{$btn-padding-x} + #{($btn-border-width - $border-width)});

  // List of selectors will need to be modified if extra button size classes are ever added
  &.btn-sm {
    padding: calc(#{$btn-padding-y-sm} + #{($btn-border-width - $border-width)}) calc(#{$btn-padding-x-sm} + #{($btn-border-width - $border-width)});
  }

  &.btn-lg {
    padding: calc(#{$btn-padding-y-lg} + #{($btn-border-width - $border-width)}) calc(#{$btn-padding-x-lg} + #{($btn-border-width - $border-width)});
  }
}

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

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active {
    &:not(:disabled):not(.disabled) {
      background-color: darken($btn-primary-bg, 6%);
      border-color: darken($btn-primary-bg, 6%);
    }
  }
}

.btn-secondary {
  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
  @include button-variant-overrides($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active {
    &:not(:disabled):not(.disabled) {
      // Lighten hover states so that a difference between states is apparent
      background-color: lighten($btn-secondary-bg, 30%);
      border-color: lighten($btn-secondary-bg, 30%);
    }
  }

  &:disabled,
  &.disabled {
    color: darken($btn-secondary-color, 30%);
  }
}

// Custom complementary button variant for Athena
.btn-complementary {
  @include button-variant($btn-complementary-color, $btn-complementary-bg, $btn-complementary-border);
  @include button-variant-overrides($btn-complementary-color, $btn-complementary-bg, $btn-complementary-border);
}

.btn-info {
  @include button-variant-overrides($btn-info-color, $btn-info-bg, $btn-info-border, $white);
}

.btn-success {
  @include button-variant-overrides($btn-success-color, $btn-success-bg, $btn-success-border, $white);
}

.btn-warning {
  @include button-variant-overrides($btn-warning-color, $btn-warning-bg, $btn-warning-border, $white);
}

.btn-danger {
  @include button-variant-overrides($btn-danger-color, $btn-danger-bg, $btn-danger-border, $white);
}

.btn-inverse {
  @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border);
  @include button-variant-overrides($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border);

  &:hover,
  &.active,
  &:active,
  &.focus,
  &:focus {
    border-color: transparent;
  }
}


//
// Outline button variants
//

.btn-outline-primary {
  @include button-outline-variant-overrides($black, $btn-primary-bg, $btn-primary-border, $black, $black);
}

.btn-outline-secondary {
  @include button-outline-variant($btn-secondary-bg);
  @include button-outline-variant-overrides($black, $btn-secondary-bg, $btn-secondary-border, $white, $black);
}

.btn-outline-complementary {
  @include button-outline-variant($btn-complementary-bg);
  @include button-outline-variant-overrides($black, $btn-complementary-bg, $btn-complementary-border, $white, $black);
}

.btn-outline-inverse {
  @include button-outline-variant($btn-inverse-bg);
  @include button-outline-variant-overrides($white, $btn-inverse-bg, $btn-inverse-border, $black, $white);
}

.btn-outline-info {
  @include button-outline-variant-overrides($black, $btn-info-bg, $btn-info-border, $white, $black);
}

.btn-outline-success {
  @include button-outline-variant-overrides($black, $btn-success-bg, $btn-success-border, $white, $black);
}

.btn-outline-warning {
  @include button-outline-variant-overrides($black, $btn-warning-bg, $btn-warning-border, $white, $black);
}

.btn-outline-danger {
  @include button-outline-variant-overrides($black, $btn-danger-bg, $btn-danger-border, $white, $black);
}


//
// Custom inverted outline button variants (for use against dark backgrounds)
//
// NOTE: -secondary and -inverse variants are intentionally not added, as they
// would be redundant with our current color scheme
//

.btn-outline-i-primary {
  @include button-outline-variant($btn-primary-bg);
  @include button-outline-variant-overrides($brand-inverse, $btn-primary-bg, $btn-primary-border, $black, $white);
}

.btn-outline-i-complementary {
  @include button-outline-variant($btn-complementary-bg);
  @include button-outline-variant-overrides($brand-inverse, $btn-complementary-bg, $btn-complementary-border, $brand-inverse, $white);
}

.btn-outline-i-success {
  @include button-outline-variant($btn-success-bg);
  @include button-outline-variant-overrides($brand-inverse, $btn-success-bg, $btn-success-border, $brand-inverse, $white);
}

.btn-outline-i-info {
  @include button-outline-variant($btn-info-bg);
  @include button-outline-variant-overrides($brand-inverse, $btn-info-bg, $btn-info-border, $brand-inverse, $white);
}

.btn-outline-i-warning {
  @include button-outline-variant($btn-warning-bg);
  @include button-outline-variant-overrides($brand-inverse, $btn-warning-bg, $btn-warning-border, $brand-inverse, $white);
}

.btn-outline-i-danger {
  @include button-outline-variant($btn-danger-bg);
  @include button-outline-variant-overrides($brand-inverse, $btn-danger-bg, $btn-danger-border, $brand-inverse, $white);
}


//
// Link buttons
//
.btn-link {
  cursor: pointer;
  font-size: $font-size-base;
  letter-spacing: 0;
  text-decoration: $link-decoration;
  text-transform: none;

  @include media-breakpoint-up(md) {
    font-size: $font-size-base-md;
  }

  // Undo unset-link-underline()
  &:hover,
  &:focus,
  &:active {
    text-decoration: $link-hover-decoration;
  }
}


//
// Button sizes
//

.btn-lg {
  font-size: $btn-lg-font-size;

  @include media-breakpoint-up(md) {
    font-size: $btn-lg-font-size-md;
  }
}

.btn-sm {
  font-size: $btn-sm-font-size;

  @include media-breakpoint-up(md) {
    font-size: $btn-sm-font-size-md;
  }
}


//
// Misc. overrides
//

// Force black text for primary outline buttons
.btn-outline-primary,
.btn-outline-i-primary {
  &:hover,
  &:active,
  &.active {
    &:not(:disabled):not(.disabled) {
      // Force !important here, in case a text color utility class is used
      // sass-lint:disable no-important
      color: $black !important;
      // sass-lint:enable no-important
    }
  }
}

// Font color resets for outline complementary and contextual variants
.btn-outline-complementary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
  &:hover,
  &.active,
  &:active {
    &:not(:disabled):not(.disabled) {
      // Force !important here, in case a text color utility class is used
      // sass-lint:disable no-important
      color: $white !important;
      // sass-lint:enable no-important
    }
  }
}