@layer components {
  .flash {
    --flash-text: var(--color-info-text);
    --flash-bg: var(--color-info-bg);
    --flash-border: var(--color-info-border);

    padding: var(--space-4);
    color: var(--flash-text);
    background-color: var(--flash-bg);
    border: var(--border-width) solid var(--flash-border);
    border-radius: var(--radius);

    & a {
      color: inherit;
      font-weight: bold;
    }
  }

  .flash--success {
    --flash-text: var(--color-success-text);
    --flash-bg: var(--color-success-bg);
    --flash-border: var(--color-success-border);
  }

  .flash--error {
    --flash-text: var(--color-danger-text);
    --flash-bg: var(--color-danger-bg);
    --flash-border: var(--color-danger-border);
  }

  .flash--alert {
    --flash-text: var(--color-warning-text);
    --flash-bg: var(--color-warning-bg);
    --flash-border: var(--color-warning-border);
  }
}