@use 'sass:color';
@use 'sass:map';
@use 'sprucecss/scss/spruce' as *;

.alert {
  align-items: center;
  border: 1px solid;
  border-radius: config('border-radius-lg', $display);
  display: flex;
  gap: spacer('m');
  justify-content: space-between;
  line-height: config('line-height-md', $typography);
  padding: 1em 1.25em;

  @each $name, $value in map.get($colors, 'alert') {
    @at-root .alert--#{$name} {
      @include set-css-variable((
        --base-color-text: color.scale($value, $lightness: -50%),
        --base-color-heading: color.scale($value, $lightness: -50%),
        --base-color-link: color.scale($value, $lightness: -50%),
        --base-color-link-hover: color.scale($value, $lightness: -30%),
        --base-color-strong: color.scale($value, $lightness: -50%)
      ));
      background-color: color.scale($value, $lightness: 95%);

      border-color: color.scale($value, $lightness: 85%);
      color: color.scale($value, $lightness: -50%);
    }

    @at-root .alert--#{$name} .alert__close {
      background-color: color.scale($value, $lightness: -30%);
      color: color.scale($value, $lightness: 90%);
    }
  }

  &__caption {
    @include layout-stack('xxs');
  }

  &__close {
    @include clear-btn;
    @include transition;
    align-items: center;
    border-radius: config('border-radius-sm', $display);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: config('icon-padding', $btn-sm, false);

    &:hover,
    &:focus {
      opacity: 0.75;
    }

    svg {
      --size: #{config('icon-size', $btn-sm, false)};
      block-size: var(--size);
      inline-size: var(--size);
    }
  }
}

<h2>Danger</h2>
<div class="alert alert--danger" role="alert">Hello, this is a danger type alert message</div>
<div class="alert alert--danger" role="alert">
    <div class="alert__caption">
        <p>
            <strong>Hello, this is a danger type alert message</strong>
        </p>
        <p>Nunc vitae dui in nunc mattis tincidunt. Nulla eleifend imperdiet odio eget semper.</p>
    </div>
    <button class="alert__close" aria-label="Close alert">
        <svg aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>
<h2>Info</h2>
<div class="alert alert--info" role="alert">Hello, this is an info type alert message</div>
<div class="alert alert--info" role="alert">
    <div class="alert__caption">
        <p>
            <strong>Hello, this is an info type alert message</strong>
        </p>
        <p>Nunc vitae dui in nunc mattis tincidunt. Nulla eleifend imperdiet odio eget semper.</p>
    </div>
    <button class="alert__close" aria-label="Close alert">
        <svg aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>
<h2>Success</h2>
<div class="alert alert--success" role="alert">Hello, this is a success type alert message</div>
<div class="alert alert--success" role="alert">
    <div class="alert__caption">
        <p>
            <strong>Hello, this is a success type alert message</strong>
        </p>
        <p>Nunc vitae dui in nunc mattis tincidunt. Nulla eleifend imperdiet odio eget semper.</p>
    </div>
    <button class="alert__close" aria-label="Close alert">
        <svg aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>
<h2>Warning</h2>
<div class="alert alert--warning" role="alert">Hello, this is a warning type alert message</div>
<div class="alert alert--warning" role="alert">
    <div class="alert__caption">
        <p>
            <strong>Hello, this is a warning type alert message</strong>
        </p>
        <p>Nunc vitae dui in nunc mattis tincidunt. Nulla eleifend imperdiet odio eget semper.</p>
    </div>
    <button class="alert__close" aria-label="Close alert">
        <svg aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    </button>
</div>