@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%);
    }
  }

  @each $name, $value in map.get($colors, 'alert') {
    @at-root [data-theme-mode='dark'] .alert--#{$name} {
      background-color: transparent;
      border-color: color.scale($value, $lightness: -30%);
      color: color('text');
    }
  }

  &__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' class='btn__icon'>
            <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' class='btn__icon'>
            <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' class='btn__icon'>
            <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' class='btn__icon'>
            <line x1='18' y1='6' x2='6' y2='18'></line>
            <line x1='6' y1='6' x2='18' y2='18'></line>
        </svg>
    </button>
</div>