@layer components {
  [role="alert"] {
    --bg-amount: 8%;

    position: relative;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    font-size: var(--text-7);

    [data-theme="dark"] & {
      --bg-amount: 20%;
    }

    &[data-variant] {
      border: none;
    }

    &[data-variant="error"],
    &[data-variant="danger"] {
      color: var(--danger);
      background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent);

      & a {
        color: var(--danger);
      }
    }

    &[data-variant="success"] {
      color: var(--success);
      background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);

      & a {
        color: var(--success);
      }
    }

    &[data-variant="warning"] {
      color: var(--warning);
      background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent);

      & a {
        color: var(--warning);
      }
    }
  }
}