@use './user.scss';
@use './system.scss';
@use './element.scss';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#app {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* 隐藏全局滚动条 */
}

.app-container {
    width: 100vw;
    height: 100vh;
    display: flex;

    .layout {
        width: 100%;
        display: flex;
        flex: 1;

        aside {
            width: 200px;
            height: 100%;
            border-right: solid 1px var(--el-menu-border-color);
            flex: 0 0 auto;
        }

        .main-container {
            width: calc(100% - 200px);
            flex: 1 1 auto;
            height: 100%;

            main {
                padding: 12px;
                overflow: auto;
                height: 100%;
                width: 100%;
                box-sizing: border-box;
            }
        }
    }
}


// 全局通知样式
.global-notification {
    left: 50%;
    transform: translateX(-50%);

    // 2. 重写动画：从顶部淡入（取消右侧滑入）
    &.el-notification-fade-enter-active,
    &.el-notification-fade-leave-active {
        transition: all 0.3s ease-out !important;
        transform: translate(-50%, -150%) !important;
    }
}

/* 页面级过渡动画样式（name="fade" 对应前缀 fade-） */
/* 1. 进入/离开的初始状态 */
.global-enter-from,
.global-leave-to {
    opacity: 0;
    /* 初始透明 */
    transform: translateX(20px);
    /* 初始右移20px */
}

/* 2. 进入/离开的过渡过程 */
.global-enter-active,
.global-leave-active {
    transition: all 0.5s ease;
    /* 过渡时长、缓动效果 */
}

/* 3. 进入完成/离开开始的状态 */
.global-enter-to,
.global-leave-from {
    opacity: 1;
    /* 最终不透明 */
    transform: translateX(0);
    /* 最终回到原位 */
}