/*
 * Flash Messages
 * Notification/alert messages
 */

@layer components {
  /* Base flash message */
  .flash {
    padding: var(--block-space);
    margin-bottom: var(--block-space);
    box-shadow: var(--shadow);
  }

  .flash__inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--main-padding);
  }

  .flash__message {
    font-size: var(--text-normal);
  }

  /* Notice (success) */
  .flash--notice {
    background-color: var(--color-gray-lighter);
  }

  .flash--notice .flash__message {
    color: var(--color-gray-darker);
  }

  /* Alert (error) */
  .flash--alert {
    background-color: var(--color-gray-lightest);
  }

  .flash--alert .flash__message {
    color: var(--color-gray-darker);
  }

  /* Success with border */
  .flash--success {
    background-color: var(--color-positive-light);
    border-left: 4px solid var(--color-green);
  }

  .flash--success .flash__message {
    color: var(--color-positive-dark);
  }

  /* Error with border */
  .flash--error {
    background-color: var(--color-negative-light);
    border-left: 4px solid var(--color-red);
  }

  .flash--error .flash__message {
    color: var(--color-negative-dark);
  }

  /* Warning with border */
  .flash--warning {
    background-color: var(--color-warning-light);
    border-left: 4px solid var(--color-red-light);
  }

  .flash--warning .flash__message {
    color: var(--color-warning-dark);
  }

  /* Info with border */
  .flash--info {
    background-color: var(--color-green-lightest);
    border-left: 4px solid var(--color-green-light);
  }

  .flash--info .flash__message {
    color: var(--color-green-darkest);
  }

  /* Flash with close button */
  .flash--dismissible {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flash__close {
    padding: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 150ms ease;
  }

  @media (any-hover: hover) {
    .flash__close:hover {
      opacity: 1;
    }
  }

  .flash__close .icon {
    width: var(--icon-md);
    height: var(--icon-md);
  }

}