/**
 * Bootstrap buttons
 */

@use "../settings" as *;
@use "../tools" as *;

// We block Bootstrap building the theme-colors buttons since we want to tweak them.
// stylelint-disable-next-line scss/dollar-variable-default
$stored-theme-colors: $theme-colors;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: ();
@import "bootstrap/scss/buttons";
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: $stored-theme-colors;

.btn {
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), #{$focus-ring-opacity});
  @include edgel-link-hover-decoration();
  @include edgel-focus-outline();
}

.btn-link {
  @include edgel-base-link-decoration();
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($link-hover-color)};

  &:hover {
    --#{$prefix}link-color-rgb: #{to-rgb($link-hover-color)};
    --#{$prefix}link-decoration-opacity: #{$link-decoration-hover-opacity};
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include edgel-button-variant($value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include edgel-button-outline-variant($value);
  }
}

.btn-search {
  @include button-variant(
    $brand-color,
    $brand-color,
    $white,
    $white,
    $brand-color,
    $brand-color,
    $white,
    $brand-color,
    $brand-color
  );

  width: 2em;
  background-image: escape-svg($uoe-btn-search-icon);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 45%;

  &:active,
  &:focus-visible,
  &:hover {
    background-image: escape-svg($uoe-btn-search-icon-active);
  }
}

.btn-contact {
  @include edgel-button-variant($brand-color);
  @include edgel-focus-outline();

  display: block;
  padding-top: $breadcrumb-padding-y;
  padding-bottom: $breadcrumb-padding-y;
  @include padding-left(space(5));
  @include padding-right(space(5));
  margin-top: $main-content-spacer;
  @include font-size($breadcrumb-font-size);
  border-width: 0;
}

.btn-check[disabled] + .btn,
.btn-check:disabled + .btn {
  --#{$prefix}btn-color: var(--#{$prefix}btn-disabled-color);
  --#{$prefix}btn-bg: var(--#{$prefix}btn-disabled-bg);
  --#{$prefix}btn-border-color: var(--#{$prefix}btn-disabled-border-color);
  --#{$prefix}btn-active-color: var(--#{$prefix}btn-disabled-checked-color);
  --#{$prefix}btn-active-bg: var(--#{$prefix}btn-disabled-checked-bg);
  --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-disabled-checked-border-color);
}

.btn-check:focus-visible + .btn {
  outline: 2px solid;
  outline-offset: -2px;
}

.btn-group .btn {
  --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-bg);
}

@import "bootstrap/scss/button-group";