@use "sass:color";
@use "sass:map";
@use "../functions";
@use "../variables";
@use "../vendor/rfs";
@use "border-radius";
@use "box-shadow";
@use "gradients";
@use "hover";

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-v2-variant($variant) {
  $background: map.get(variables.$button-colors, $variant);
  $border: $background;

  $hover-background: map.get(variables.$button-hover-colors, $variant);
  $hover-border: map.get(variables.$button-hover-colors, $variant);

  $active-background: map.get(variables.$button-active-colors, $variant);
  $active-border: map.get(variables.$button-active-colors, $variant);

  $focus-background: map.get(variables.$button-hover-colors, $variant);
  $focus-border: map.get(variables.$button-focus-border-colors, $variant);

  $disabled-background: map.get(variables.$button-disabled-colors, $variant);
  $disabled-font-color: map.get(variables.$button-disabled-font-colors, $variant);

  $text-color: map.get(variables.$button-text-colors, $variant);

  $box-shadow: map.get(variables.$button-box-shadows, $variant);
  $active-box-shadow: map.get(variables.$button-active-box-shadows, $variant);

  color: $text-color;
  @include gradients.gradient-bg($background);
  border-color: $border;
  // starting first shadow as transparent so focus outline doesn't animate into regular shadow on blur
  box-shadow: 0 0 0 1px transparent, $box-shadow;

  @include hover.hover() {
    color: $text-color;
    @include gradients.gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: $text-color;
    @include gradients.gradient-bg($focus-background);
    border-color: $focus-border;
    box-shadow: 0 0 0 1px $focus-border, $box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: $disabled-font-color;
    background-color: $disabled-background;
    border-color: $disabled-background;
    box-shadow: none;
    // Remove CSS gradients if they're enabled
    @if variables.$enable-gradients {
      background-image: none;
    }
  }

  // Active style, when button is not disabled
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: $text-color;
    background-color: $active-background;
    @if variables.$enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;
    box-shadow: 0 0 0 1px transparent, $active-box-shadow;
    transform: variables.$btn-active-transform;
  }

  &:not(:disabled):not(.disabled):active:focus,
  &:not(:disabled):not(.disabled).active:focus {
    border-color: $focus-border;
    box-shadow: 0 0 0 1px $focus-border, $box-shadow;
  }
}

@mixin button-v2-outline-variant($variant) {
  $outline-variant: 'outline-#{$variant}';

  $background: map.get(variables.$button-outline-bg-colors, $outline-variant);
  $color: map.get(variables.$button-outline-border-colors, $outline-variant);

  $hover-background: map.get(variables.$button-hover-colors, $outline-variant);
  $hover-border: map.get(variables.$button-outline-hover-border-colors, $outline-variant);

  $active-background: map.get(variables.$button-active-colors, $outline-variant);
  $active-border: map.get(variables.$button-outline-active-border-colors, $outline-variant);

  $focus-background: map.get(variables.$button-hover-colors, $outline-variant);
  $focus-border: map.get(variables.$button-focus-border-colors, $outline-variant);

  $disabled-font-color: map.get(variables.$button-disabled-font-colors, $outline-variant);

  $box-shadow: map.get(variables.$button-box-shadows, $variant);
  $active-box-shadow: map.get(variables.$button-active-box-shadows, $variant);

  color: $color;
  background: $background;
  border-color: $color;
  // starting first shadow as transparent so focus outline doesn't animate into regular shadow on blur
  box-shadow: 0 0 0 1px transparent, $box-shadow;

  @include hover.hover() {
    color: $hover-border;
    @include gradients.gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: $focus-border;
    @include gradients.gradient-bg($focus-background);
    border-color: $focus-border;
    box-shadow: 0 0 0 1px $focus-border, $box-shadow;
  }

  &:disabled,
  &.disabled {
    color: $disabled-font-color;
    pointer-events: none;
    background-color: $background;
    border-color: variables.$btn-disabled-border-color;
    box-shadow: none;
    // Remove CSS gradients if they're enabled
    @if variables.$enable-gradients {
      background-image: none;
    }
  }

  // Active style, when button is not disabled
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: $active-border;
    background-color: $active-background;
    border-color: $active-border;
    box-shadow: 0 0 0 1px transparent, $active-box-shadow;
    transform: variables.$btn-active-transform;
  }

  &:not(:disabled):not(.disabled):active:focus,
  &:not(:disabled):not(.disabled).active:focus {
    border-color: $active-border;
    box-shadow: 0 0 0 1px $active-border, $box-shadow;
  }
}

/**
 * DEPRECATED
 * Included for backwards compatibility with pre v0.15 versions of ESDS.
 * In the future, we will update this mixin to the functionality of
 * @button-v2-variant or remove it entirely.
 */
@mixin button-variant(
  $background,
  $border,
  $hover-background: color.adjust($background, $lightness: -7.5%),
  $hover-border: color.adjust($border, $lightness: -10%),
  $active-background: color.adjust($background, $lightness: -10%),
  $active-border: color.adjust($border, $lightness: -12.5%)
) {
  color: functions.color-yiq($background);
  @include gradients.gradient-bg($background);
  border-color: $border;
  @include box-shadow.box-shadow(variables.$btn-box-shadow);

  @include hover.hover() {
    color: functions.color-yiq($hover-background);
    @include gradients.gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:focus,
  &.focus {
    color: functions.color-yiq($hover-background);
    @include gradients.gradient-bg($hover-background);
    border-color: $hover-border;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: functions.color-yiq(variables.$btn-disabled-bg-color);
    background-color: variables.$btn-disabled-bg-color;
    border-color: variables.$btn-disabled-bg-color;
    // Remove CSS gradients if they're enabled
    @if variables.$enable-gradients {
      background-image: none;
    }
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: functions.color-yiq($active-background);
    background-color: $active-background;
    @if variables.$enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;
  }
}

/**
 * DEPRECATED
 * Included for backwards compatibility with pre v0.15 versions of ESDS.
 * In the future, we will update this mixin to the functionality of
 * @button-v2-outline-variant or remove it entirely.
 */
@mixin button-outline-variant(
  $color,
  $color-hover: functions.color-yiq($color),
  $active-background: $color,
  $active-border: $color
) {
  color: $color;
  border-color: $color;

  @include hover.hover() {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 variables.$btn-focus-width rgba($color, .5);
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: functions.color-yiq($active-background);
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if variables.$enable-shadows and variables.$btn-active-box-shadow != none {
        @include box-shadow.box-shadow(variables.$btn-active-box-shadow, 0 0 0 variables.$btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 variables.$btn-focus-width rgba($color, .5);
      }
    }
  }
}

// Button sizes
@mixin button-size(
  $padding-y,
  $padding-x,
  $font-size,
  $line-height,
  $border-radius
) {
  padding: $padding-y $padding-x;
  @include rfs.font-size($font-size);
  line-height: $line-height;
  // Manually declare to provide an override to the browser default
  @include border-radius.border-radius($border-radius, 0);
}