/* ==========================================================================
   Notification 组件样式
   用于临时提示通知
   ========================================================================== */

/* Notification 基础样式 */
.notification {
    position: fixed;
    z-index: var(--z-index-tooltip);
    pointer-events: none;
    /*max-width: 400px;*/
}

/* Notification 定位 */
.notification--top-right {
    top: var(--size-6);
    right: var(--size-6);
}

.notification--top-left {
    top: var(--size-6);
    left: var(--size-6);
}

.notification--top-center {
    top: var(--size-6);
    left: 50%;
    transform: translateX(-50%);
}

.notification--bottom-right {
    bottom: var(--size-6);
    right: var(--size-6);
}

.notification--bottom-left {
    bottom: var(--size-6);
    left: var(--size-6);
}

.notification--bottom-center {
    bottom: var(--size-6);
    left: 50%;
    transform: translateX(-50%);
}

.notification--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 通知项样式 */
.notification-item {
    pointer-events: auto;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 动画效果 */
@keyframes notification-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notification-slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes notification-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes notification-slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes notification-slide-in-top {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notification-slide-out-top {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes notification-slide-in-bottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notification-slide-out-bottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes notification-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes notification-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes notification-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.8) translate(-50%, -50%);
    }
    to {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
    }
}

@keyframes notification-zoom-out {
    from {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translate(-50%, -50%);
    }
}

/* 滑入动画类 */
.notification-slide-in-right {
    animation: notification-slide-in-right 0.3s ease-out;
}

.notification-slide-in-left {
    animation: notification-slide-in-left 0.3s ease-out;
}

.notification-slide-in-top {
    animation: notification-slide-in-top 0.3s ease-out;
}

.notification-slide-in-bottom {
    animation: notification-slide-in-bottom 0.3s ease-out;
}

.notification-fade-in {
    animation: notification-fade-in 0.3s ease-out;
}

.notification-zoom-in {
    animation: notification-zoom-in 0.3s ease-out;
}

/* 滑出动画类 */
.notification-slide-out-right {
    animation: notification-slide-out-right 0.3s ease-out;
}

.notification-slide-out-left {
    animation: notification-slide-out-left 0.3s ease-out;
}

.notification-slide-out-top {
    animation: notification-slide-out-top 0.3s ease-out;
}

.notification-slide-out-bottom {
    animation: notification-slide-out-bottom 0.3s ease-out;
}

.notification-fade-out {
    animation: notification-fade-out 0.3s ease-out;
}

.notification-zoom-out {
    animation: notification-zoom-out 0.3s ease-out;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .notification--top-right,
    .notification--top-left {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .notification--bottom-right,
    .notification--bottom-left {
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .notification--top-center,
    .notification--bottom-center {
        top: 12px;
        bottom: 12px;
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }
}