/* /static/cabinet/notification.css */

.notification-container {
    position: fixed;
    top: calc(var(--ui-layout-header-height) + var(--ui-space-toast-offset));
    right: var(--ui-space-5);
    z-index: var(--ui-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    width: 320px;
}

.notification-container.sg-toast-demo {
    position: static;
    width: auto;
}

.notification {
    background-color: var(--ui-toast-bg);
    color: var(--ui-toast-text);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    opacity: 0;
    transform: translateX(100%);
    transition:
        opacity var(--ui-motion-duration-normal) var(--ui-motion-easing-standard),
        transform var(--ui-motion-duration-normal) var(--ui-motion-easing-standard),
        box-shadow var(--ui-motion-duration-normal) var(--ui-motion-easing-standard);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background-color: var(--ui-toast-success-bg);
    color: var(--ui-text-on-accent);
}

.notification.error {
    background-color: var(--ui-toast-error-bg);
    color: var(--ui-text-on-accent);
}

.notification.warning {
    background-color: var(--ui-toast-warning-bg);
    color: var(--ui-text-primary);
}

.notification-icon {
    font-size: 1.2em;
}

.notification-message {
    flex-grow: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-close {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.notification-close:focus-visible {
    box-shadow: var(--ui-focus-ring);
    outline: 0;
}

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

/* Hover эффект */
.notification:hover {
    box-shadow: var(--ui-shadow-toast-hover);
}