@layer components {
  .flash {
    align-items: center;
    background: #abd2e1;
    border: var(--border-heavy);
    color: var(--color-black);
    display: flex;
    font-weight: 600;
    gap: var(--space-3);
    margin: var(--space-2) 0.75rem 0;
    padding: var(--space-2) var(--space-3);
  }

  .flash--alert {
    background: var(--color-danger);
  }

  .flash--notice {
    background: var(--color-green);
  }

  .flash__label {
    border-right: 1px solid rgb(5 5 5 / 40%);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    padding-right: var(--space-3);
  }
}