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

// scss-docs-start btn-variant-mixin
@mixin button-variant(
  $background,
  $border,
  $color, // OUDS mod: no default value
  $hover-background: $ouds-button-color-bg-default-hover, // OUDS mod: instead of calculated default value
  $hover-border: $ouds-button-color-border-default-hover, // OUDS mod: instead of calculated default value
  $hover-color: $ouds-button-color-content-default-hover, // OUDS mod: instead of calculated default value
  $active-background: $ouds-button-color-bg-default-pressed, // OUDS mod: instead of calculated default value
  $active-border: $ouds-button-color-border-default-pressed, // OUDS mod: instead of calculated default value
  $active-color: $ouds-button-color-content-default-pressed, // OUDS mod: instead of calculated default value
  $disabled-background: $ouds-button-color-bg-default-disabled, // OUDS mod: instead of `$background`
  $disabled-border: $ouds-button-color-border-default-disabled, // OUDS mod: instead of `$border`
  $disabled-color: $ouds-button-color-content-default-disabled, // OUDS mod: instead of `color-contrat($disabled-background)`
  $focus-background: $ouds-button-color-bg-default-focus, // OUDS mod
  $focus-border: $ouds-button-color-border-default-focus, // OUDS mod
  $focus-color: $ouds-button-color-content-default-focus, // OUDS mod
  $loading-background: $ouds-button-color-bg-default-loading, // OUDS mod
  $loading-border: $ouds-button-color-border-default-loading, // OUDS mod
  $loading-color: $ouds-button-color-content-default-loading, // OUDS mod
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  // OUDS mod: no --#{$prefix}btn-focus-shadow-rgb
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  // OUDS mod: no --#{$prefix}btn-active-shadow
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
  --#{$prefix}btn-focus-color: #{$focus-color}; // OUDS mod
  --#{$prefix}btn-focus-bg: #{$focus-background}; // OUDS mod
  --#{$prefix}btn-focus-border-color: #{$focus-border}; // OUDS mod
  --#{$prefix}btn-loading-color: #{$loading-color}; // OUDS mod
  --#{$prefix}btn-loading-bg: #{$loading-background}; // OUDS mod
  --#{$prefix}btn-loading-border-color: #{$loading-border}; // OUDS mod
}
// scss-docs-end btn-variant-mixin

// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  // OUDS mod: no --#{$prefix}btn-focus-shadow-rgb
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  // OUDS mod: no --#{$prefix}btn-active-shadow
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin

// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin

// TODO: We should probably make it more inclusive than just button.
// OUDS mod: embed an icon as mask-image in a button
// scss-docs-start btn-icon
@mixin button-icon(
  $icon,
  $width: $spacer,
  $height: $width,
  $size: $width $height,
  $pseudo: "before",
  $selector: &,
  $position: 50%
) {
  min-width: $width;
  min-height: $height;

  @at-root #{$selector} {
    &::#{$pseudo} {
      display: block;
      min-width: inherit;
      min-height: inherit;
      content: "";
      background-color: currentcolor;
      mask: #{$icon} no-repeat #{$position} / #{$size};
    }
  }
}
// scss-docs-end btn-icon