.notifications-container {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 2);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
    width: min(22rem, calc(100vw - var(--spacing-unit) * 4));
    pointer-events: none;
}

.notification {
    padding: calc(var(--spacing-unit) * 0.85) calc(var(--spacing-unit) * 1.25);
    border-radius: var(--spacing-unit);
    background: var(--color-primary);
    color: white;
    box-shadow: var(--box-shadow);
    font-size: calc(var(--font-size-base) - 1px);
    line-height: 1.35;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
    word-break: break-word;
    width: 100%;
    text-align: center;
}

.notification--visible {
    opacity: 1;
    transform: translateY(0);
}

.notification--leaving {
    opacity: 0;
    transform: translateY(1rem);
}

.notification--success {
    background: var(--color-primary);
}

.notification--error {
    background: #c62828ee;
}