/* sinequa custom button theme */
@use "sass:map";
@use "sass:meta";
@use "sass:color";
@use "../bootstrap" as bs;
@use "../tokens" as *;

// sinequa mixin button-variant (déplacé depuis _variables.scss : dépend de membres Bootstrap configurés)
@mixin sq-button-variant(
  $background,
  $border,
  $color,
  $hover-background,
  $hover-border,
  $hover-color,
  $active-background,
  $active-border,
  $active-color,
  $disabled-background,
  $disabled-border,
  $disabled-color
) {
  --#{bs.$prefix}btn-color: #{$color};
  --#{bs.$prefix}btn-bg: #{$background};
  --#{bs.$prefix}btn-border-color: #{$border};
  --#{bs.$prefix}btn-hover-color: #{$hover-color};
  --#{bs.$prefix}btn-hover-bg: #{$hover-background};
  --#{bs.$prefix}btn-hover-border-color: #{$hover-border};
  --#{bs.$prefix}btn-focus-shadow-rgb: #{bs.to-rgb(color.mix($color, $border, 15%))};
  --#{bs.$prefix}btn-active-color: #{$active-color};
  --#{bs.$prefix}btn-active-bg: #{$active-background};
  --#{bs.$prefix}btn-active-border-color: #{$active-border};
  --#{bs.$prefix}btn-active-shadow: #{bs.$btn-active-box-shadow};
  --#{bs.$prefix}btn-disabled-color: #{$disabled-color};
  --#{bs.$prefix}btn-disabled-bg: #{$disabled-background};
  --#{bs.$prefix}btn-disabled-border-color: #{$disabled-border};
}

$theme-primary: (
  "background": $blue-500,
  "border": transparent,
  "color": $white,
  "hover-background": $blue-hover,
  "hover-border": transparent,
  "hover-color": $white,
  "active-background": $brand-300,
  "active-border": transparent,
  "active-color": $white,
  "disabled-background": $blue-focus,
  "disabled-border": none,
  "disabled-color": $white
  ) !default;

$theme-accent: (
  "background": $accent-500,
  "border": transparent,
  "color": $white,
  "hover-background": $accent-300,
  "hover-border": transparent,
  "hover-color": $white,
  "active-background": $accent-900,
  "active-border": transparent,
  "active-color": $white,
  "disabled-background": $accent-100,
  "disabled-border": none,
  "disabled-color": $white
  ) !default;

$theme-outline: (
  "background": transparent,
  "border": $blue-500,
  "color": $blue-500,

  "hover-background": $blue-hover,
  "hover-border": $brand-500,
  "hover-color": $white,

  "active-background": $darker-blue,
  "active-border": $darker-blue,
  "active-color": $white,

  "disabled-background": $blue-focus,
  "disabled-border": $blue-focus,
  "disabled-color": $white
  ) !default;

$theme-outline-accent: (
  "background": transparent,
  "border": $accent-500,
  "color": $accent-500,

  "hover-background": $blue-hover,
  "hover-border": $blue-hover,
  "hover-color": $white,

  "active-background": $accent-500,
  "active-border": $accent-500,
  "active-color": $white,

  "disabled-background": $blue-focus,
  "disabled-border": $blue-focus,
  "disabled-color": $white
  ) !default;

$theme-outline-light: (
  "background": transparent,
  "border": transparent,
  "color": $black,

  "hover-background": $blue-focus,
  "hover-border": $blue-focus,
  "hover-color": $black,

  "active-background": $blue,
  "active-border": $blue,
  "active-color": $white,

  "disabled-background": transparent,
  "disabled-border":$grey-100,
  "disabled-color": $grey-100
  ) !default;

$theme: (
  "primary": $theme-primary,
  "accent": $theme-accent,
  "outline-primary": $theme-outline,
  "outline-accent": $theme-outline-accent,
  "outline-light": $theme-outline-light
);

@each $color, $value in $theme {
  .btn-#{$color} {
      @if(meta.type-of($value) == 'map') {
          @include sq-button-variant(
            map.get($value, "background"),
            map.get($value, "border"),
            map.get($value, "color"),

            map.get($value, "hover-background"),
            map.get($value, "hover-border"),
            map.get($value, "hover-color"),

            map.get($value, "active-background"),
            map.get($value, "active-border"),
            map.get($value, "active-color"),

            map.get($value, "disabled-background"),
            map.get($value, "disabled-border"),
            map.get($value, "disabled-color")

            );
          } @else {
              @include bs.button-variant($value, $value);
          }
  }
}

/** Sinequa Floating action button */
.btn-fab {
  border-radius: 99rem;
  padding-left: 1.1rem;
  padding-right: 1.1rem;

  i {
    margin-right: 0;
  }
}

/** Sinequa Squared button */
.btn-square {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}