@layer components {
  /* Flash messages are a line of text under the header rule, not a colored band */
  .flash {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-8);
    font-weight: var(--font-medium);
    color: var(--color-text);
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);

    p {
      margin: 0;
    }

    a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

    button {
      position: absolute;
      right: var(--space-4);
    }

    svg path {
      stroke: currentColor;
    }

    &.alert {
      color: var(--color-error);
    }
  }
}