Alerts

function appendAlert(message, type, typeVisuallyHidden) {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    '  <span class="alert-icon">',
    `    <span class="visually-hidden">${typeVisuallyHidden}</span>`,
    '  </span>',
    `  <p>${message}</p>`,
    '  <button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">',
    '    <span class="visually-hidden">Close</span>',
    '  </button>',
    '</div>'
  ].join('')

  document.getElementById('liveAlertPlaceholder').append(wrapper)

  // Create `.btn-close` tooltip after `innerHTML` has been modified
  const btnClose = wrapper.querySelector('.btn-close')
  const tooltip = new boosted.Tooltip(btnClose)
  btnClose.addEventListener('click', () => {
    tooltip.hide()
  })
}

if (document.getElementById('liveAlertBtn')) {
  document.getElementById('liveAlertBtn').addEventListener('click', () => {
    appendAlert('Nice, you triggered this alert message!', 'success', 'Success')
  })
}

--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
@include rfs($font-size-base, --#{$prefix}alert-font-size); // Boosted mod
--#{$prefix}alert-line-height: #{$line-height-base}; // Boosted mod
--#{$prefix}alert-color: #{$alert-color}; // Boosted mod
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
// Boosted mod: no `--#{$prefix}alert-link-color`
--#{$prefix}alert-logo-size: #{$alert-logo-size}; // Boosted mod
--#{$prefix}alert-icon-size: #{$alert-icon-size}; // Boosted mod
--#{$prefix}alert-icon-margin-y: #{$alert-icon-margin-y}; // Boosted mod
--#{$prefix}alert-link-font-weight: #{$alert-link-font-weight}; // Boosted mod
--#{$prefix}alert-heading-font-weight: #{$alert-heading-font-weight}; // Boosted mod
--#{$prefix}alert-dismissible-padding-right: #{$alert-dismissible-padding-r}; // Boosted mod
--#{$prefix}alert-btn-close-offset: #{$alert-btn-close-offset}; // Boosted mod

--#{$prefix}alert-padding-x: 0;
--#{$prefix}alert-padding-y: #{$alert-padding-sm};
--#{$prefix}alert-margin-bottom: 0;
@include rfs($font-size-sm, --#{$prefix}alert-font-size);
--#{$prefix}alert-line-height: #{$line-height-sm};
--#{$prefix}alert-border: 0;
--#{$prefix}alert-logo-size: #{$alert-logo-size-sm};
--#{$prefix}alert-icon-size: #{$alert-icon-size-sm};
--#{$prefix}alert-btn-close-offset: #{$alert-btn-close-offset-sm};

$alert-padding-y:                   1rem;
$alert-padding-x:                   $spacer;
$alert-margin-bottom:               $spacer;
$alert-color:                       var(--#{$prefix}body-color); // Boosted mod
$alert-border-radius:               var(--#{$prefix}border-radius);
$alert-link-font-weight:            null; // Boosted mod
$alert-heading-font-weight:         $font-weight-bold; // Boosted mod
$alert-border-width:                var(--#{$prefix}border-width);

// Boosted mod
$alert-padding-sm:                  $spacer * .5;
$alert-icons: (
  "success": var(--#{$prefix}success-icon),
  "info":    escape-svg($info-icon),
  // Create a list for this warning icon to indicate that the mask needs to be replaced by a background image
  // Be aware that the background of the icon won't change anymore
  // Note: `true` parameter is only used to create a list, it could be empty (e.g. `(escape-svg($warning-icon),)`)
  "warning": (escape-svg($warning-icon-filled), true),
  "danger":  var(--#{$prefix}error-icon)
);
$alert-logo-size:                   add($spacer * .5, 1rem);
$alert-logo-size-sm:                add(1rem, 1px);
$alert-icon-size:                   3rem;
$alert-icon-size-sm:                $alert-icon-size * .5;
$alert-icon-margin-y:               $spacer * .1;
$alert-btn-close-offset:            .5rem;
$alert-btn-close-offset-sm:         $spacer * .25;
// End mod

$alert-dismissible-padding-r:       $alert-padding-y * 3; // 3x covers width of x plus default padding on either side

@mixin alert-variant($background, $border, $color, $background-image) { // Boosted mod
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border: #{$border}; // Boosted mod
  // Boosted mod: no --#{$prefix}alert-link-color

  // Boosted mod
  .alert-icon::before {
    mask-image: $background-image;
  }
  // End mod

  // Boosted mod: no $enable-gradients test

  // Boosted mod: no .alert-link
}

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $alert-colors {
  .alert-#{$state} {
    // Boosted mod: no --#{$prefix}alert-color
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    // Boosted mod: no `--#{$prefix}alert-link-color`
    // Boosted mod
    @if type-of(map-get($alert-icons, $state)) == "list" {
      --#{$prefix}alert-icon-bg-image: #{nth(map-get($alert-icons, $state), 1)};

      .alert-icon::before {
        background: var(--#{$prefix}alert-icon-bg-image) no-repeat top left / var(--#{$prefix}alert-logo-size);

        /* rtl:raw:
        background-position: top right;
        */
        mask: none;
      }
    } @else {
      --#{$prefix}alert-icon-bg-image: #{map-get($alert-icons, $state)};
    }
    // End mod
  }
}