@layer components {
  .flash {
    padding: var(--block-space) var(--main-padding);
    font-size: var(--text-footnote);
    text-align: center;
  }

  .flash--notice {
    background: var(--color-badge-success-bg);
    color: var(--color-badge-success-text);
    border-bottom: 1px solid var(--color-ink-lighter);
  }

  .flash--alert {
    background: var(--color-badge-danger-bg);
    color: var(--color-badge-danger-text);
    border-bottom: 1px solid var(--color-negative-50);
  }
}