// Bootstrap mixin overrides for `bootstrap/scss/mixins/_buttons.scss`
@use 'sass:map';

// This mixin overrides the one in `bootstrap/scss/mixins/_buttons.scss`
// $bootstrap-value comes from $theme-colors map (see `bootstrap/scss/_buttons.scss`)
@mixin button-variant($bootstrap-value, $_) {
  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';

  // DH Customization: Convert semantic value to css variables
  $background: var(--dh-color-#{$semantic-value}-bg);
  $border: var(--dh-color-#{$semantic-value}-bg);
  $boxshadow-color: color-mix(
    in srgb,
    var(--dh-color-#{$semantic-value}-bg) 50%,
    transparent
  );
  $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
  $hover-border: var(--dh-color-#{$semantic-value}-hover-bg);
  $active-background: var(--dh-color-#{$semantic-value}-down-bg);
  $active-border: var(--dh-color-#{$semantic-value}-down-bg);
  $color: var(--dh-color-#{$semantic-value}-contrast);

  color: $color;
  @include gradient-bg($background);

  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: $color;
    @include gradient-bg($hover-background);

    border-color: $hover-border;
  }

  &:focus {
    box-shadow: none;
  }

  &:focus-visible,
  &.focus {
    color: $color;
    @include gradient-bg($hover-background);

    border-color: $hover-border;
    box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: var(--dh-color-text-disabled);
    background-color: var(--dh-color-disabled-bg);
    border-color: transparent;
    opacity: 1;
    // Remove CSS gradients if they're enabled
    @if $enable-gradients {
      background-image: none;
    }
  }

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

    border-color: $active-border;

    &:focus-visible {
      box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
    }
  }
}

@mixin button-outline-variant($bootstrap-value) {
  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';

  $color: var(--dh-color-#{$semantic-value}-bg);
  $boxshadow-color: color-mix(
    in srgb,
    var(--dh-color-#{$semantic-value}-bg) 50%,
    transparent
  );
  $hover-color: color-yiq($semantic-value);
  $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
  $active-background: var(--dh-color-#{$semantic-value}-down-bg);

  color: $color;
  border-color: $color;

  @include hover {
    color: $hover-color;
    background-color: $hover-background;
    border-color: $hover-background;
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
  }

  &.disabled,
  &:disabled {
    color: var(--dh-color-text-disabled);
    background-color: transparent;
    border-color: var(--dh-color-disabled-bg);
    opacity: 1;
  }

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

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