/**
 * 统一的通知样式
 * 与OneNav主题登录页相同的通知效果
 */

/* 通知容器 */
.alert-system {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    bottom: 10px;
    right: 0px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 999999;
}

/* 通知主体 */
.alert-body {
    display: flex;
    align-items: center;
    font-size: 0px;
    max-height: 200px;
    min-width: 200px;
    max-width: 360px;
    text-align: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 10px;
    padding: 0px 20px;
    opacity: .2;
    transform: translateX(110%) scaleY(0);
    transition: .3s;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}

/* 通知显示状态 */
.alert-body.show {
    transform: translateX(0) scaleY(1);
    font-size: 14px;
    padding: 8px 20px;
    opacity: 1;
    transition: .5s;
}

/* 通知图标 */
.alert-body i {
    font-size: 1.525em;
    margin-right: 8px;
}

/* 提示框样式 */
.tips-box {
    display: inline-block;
    border-radius: var(--theme-border-radius-md, 8px);
    vertical-align: middle;
    padding: .3em .6em;
    text-align: center;
    color: var(--this-color, #666);
    background: var(--this-bg, rgba(136, 136, 136, .1));
    border: 1px solid var(--this-border, transparent);
    box-shadow: var(--this-shadow, none);
}

/* 确保通知文本颜色继承自父元素 */
.alert-body span {
    color: var(--this-color, #666);
}

/* 图标字体动画 */
.icon-spin {
    animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* 通知文本 */
.alert-body span {
    flex: 1;
    color: inherit;
}

/* 背景色类 */
.vc-blue {
    --this-color: #daeeff;
    --this-hover-color: #ffffff;
    --this-bg: #2997f7;
    --this-shadow-bg: rgba(41, 151, 247, 0.7);
}

.vc-violet {
    --this-color: #dde4ff;
    --this-hover-color: #ffffff;
    --this-bg: #5c7cff;
    --this-shadow-bg: rgba(92, 124, 255, 0.7);
}

.vc-yellow {
    --this-color: #fff6f0;
    --this-hover-color: #ffffff;
    --this-bg: #ff6f06;
    --this-shadow-bg: rgba(255, 111, 6, 0.7);
}

.vc-red {
    --this-color: #ffe7eb;
    --this-hover-color: #ffffff;
    --this-bg: #f1404b;
    --this-shadow-bg: rgba(241, 64, 75, 0.7);
}

.vc-gray {
    --this-color: #dbe7f3;
    --this-hover-color: #ffffff;
    --this-bg: #717b85;
    --this-shadow-bg: rgba(113, 123, 133, 0.7);
}

/* 深色模式适配 */
.io-black-mode .alert-system {
    bottom: 10px;
    right: 0px;
}

.io-black-mode .alert-body {
    color: #fff;
}

.io-black-mode .tips-box:not([class*="vc-"]) {
    --this-color: #999;
    --this-bg: rgba(136, 136, 136, .1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .alert-system {
        right: 10px;
    }
    
    .alert-body {
        max-width: 90%;
    }
}