scss/_alert.scss

@use "sass:map";
@use "config" as *;
@use "theme" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;

// scss-docs-start alert-variables
$alert-padding-y:               $spacer !default;
$alert-padding-x:               $spacer !default;
$alert-margin-bottom:           1rem !default;
$alert-border-radius:           var(--#{$prefix}border-radius) !default;
$alert-link-font-weight:        $font-weight-bold !default;
$alert-border-width:            var(--#{$prefix}border-width) !default;
$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables

@layer components {
  .alert {
    // scss-docs-start alert-css-vars
    --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
    --#{$prefix}alert-padding-x: #{$alert-padding-x};
    --#{$prefix}alert-padding-y: #{$alert-padding-y};
    --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
    --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
    --#{$prefix}alert-border-color: transparent;
    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
    --#{$prefix}alert-border-radius: #{$alert-border-radius};
    --#{$prefix}alert-link-color: inherit;
    // scss-docs-end alert-css-vars

    position: relative;
    padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
    // margin-bottom: var(--#{$prefix}alert-margin-bottom);
    color: var(--#{$prefix}alert-color);
    background-color: var(--#{$prefix}alert-bg);
    border: var(--#{$prefix}alert-border);
    @include border-radius(var(--#{$prefix}alert-border-radius));
  }

  // Headings for larger alerts
  .alert-heading {
    // Specified to prevent conflicts of changing $headings-color
    color: inherit;
  }

  // Provide class for links that match alerts
  .alert-link {
    font-weight: $alert-link-font-weight;
    color: var(--#{$prefix}alert-link-color);
  }


  // Dismissible alerts
  //
  // Expand the right padding and account for the close button's positioning.

  .alert-dismissible {
    padding-inline-end: $alert-dismissible-padding-r;

    // Adjust close link position
    .btn-close {
      position: absolute;
      top: 0;
      right: 0;
      z-index: $stretched-link-z-index + 1;
      padding: $alert-padding-y * 1.25 $alert-padding-x;
    }
  }
}