@layer components {
  p[role="alert"],
  p[role="status"],
  section[role="alert"],
  section[role="status"] {
    border-left: 0.25rem solid;
    p:last-child,
    ul:last-child {
      margin-bottom: 0;
    }
    padding: 1rem;
    margin-bottom: 1rem;
  }

  p[role="alert"],
  section[role="alert"] {
    background-color: color-mix(in srgb, var(--color-base-error) 15%, transparent);
    border-color: var(--color-base-error);
  }

  p[role="status"],
  section[role="status"] {
    background-color: color-mix(in srgb, var(--color-base-notice) 15%, transparent);
    border-color: var(--color-base-notice);
  }

  p[role="status"].success,
  section[role="status"].success {
    background-color: color-mix(in srgb, var(--color-base-success) 15%, transparent);
    border-color: var(--color-base-success);
  }
  p[role="status"].warning,
  section[role="status"].warning {
    background-color: color-mix(in srgb, var(--color-base-warning) 15%, transparent);
    border-color: var(--color-base-warning);
  }
}