/* ==========================================================================
   Notification System
   California Design System (designsystem.webstandards.ca.gov)
   ========================================================================== */

#notification-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
}

.notification {
    width: 100%;
    padding: var(--s-2) var(--s-4);
    color: var(--white);
    font-size: 1rem;
    font-weight: var(--font-weight-6);
    font-family: var(--site-font);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    line-height: var(--font-lineheight-3);
    border-bottom: var(--border-1) solid rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.notification a {
    color: var(--white);
    text-decoration: underline;
}

.notification a:hover {
    color: var(--cagov-highlight);
}

.notification a:focus-visible {
    outline: var(--focus-width) solid var(--cagov-highlight);
    outline-offset: var(--focus-offset);
}

.notification.is-entering,
.notification.is-leaving {
    opacity: 0;
}

/* --- Notification Types (CA Design System status colors) --- */

.notification.success {
    background-color: var(--success-700);
    border-left: var(--border-1) solid transparent;
}

.notification.error,
.notification.danger {
    background-color: var(--danger-700);
    border-left: var(--border-1) solid transparent;
}

.notification.warning {
    background-color: var(--accent1-700);
    border-left: var(--border-1) solid transparent;
}

.notification.info {
    background-color: var(--primary-700);
    border-left: var(--border-1) solid transparent;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .notification {
        transition: none !important;
    }

    .notification.is-entering,
    .notification.is-leaving {
        opacity: 1;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .notification {
        padding: var(--s-2);
        font-size: 1rem;
    }
}