.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: var(--zIndex-mask);
    display: block;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: all;
    touch-action: none;
}

.sidebar {
    // background-color: #fff !important;
    pointer-events: auto;
    width: 9.19rem;
    box-sizing: border-box;
    background-color: rgba(0, 13, 2, 0.8);
    border: 0.126rem solid #08c974;
    border-radius: 0.84rem 0 0 0.84rem;
    // border-right: none;
    border-radius: 0.84rem;
    box-shadow: 0 0.42rem 0.84rem 0.042rem rgba(0, 0, 0, 0.66);
    // height: 61.76rem;
    // height: 53.67rem;
    // bottom: 5.88rem;
    // top: 0.84rem;
    // top: 0;
    top: 50%;
    transform: translateY(-50%);
    position: fixed;
    z-index: var(--zIndex-popup);

    // overflow: auto;

    .sidebarTrigger {
        width: 100%;
        height: 100%;
        // height: 53.67rem;
        position: absolute;
        width: 10.6rem;
        pointer-events: none;
        z-index: var(--zIndex-popup);
        // overflow: visible;

        button {
            position: absolute;
            // left: -2.24rem;
            top: 50%;
            transform: translate(-100%, -50%);
        }

        .burger {
            width: 2.24rem;
            height: 6.4rem;
            position: relative;
            pointer-events: all;

            img {
                width: 0.927rem;
                height: 1.94rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                &.openIcon {
                    transform: translate(-50%, -50%) scale(-1, -1); /* 关键点：合并变换 */
                }
            }

            &--right {
                position: fixed;
                right: 0;
                top: 70%;
                transform: translateY(calc(-50% + 0.84rem));

                &.active {
                    opacity: 0;
                }
            }
        }

        .svg1 {
            color: #08c974;
            width: 2.24rem;
            height: 6.4rem;
            pointer-events: "none";
        }
    }

    .more {
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(
            180deg,
            rgb(8, 201, 116),
            rgb(0, 149, 83) 100%
        );
        border-radius: 0 0 0 0.42rem;
        box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
        height: 1.51rem;
        height: 1.32rem;
        position: absolute;
        // right: 2rem;
        width: 100%;
        bottom: 0.02rem;
        bottom: 0.2rem;
        bottom: 0;
        pointer-events: all;
        width: 9.26rem;
        left: 0;

        .svg2 {
            // position: absolute;
            color: #c2ec9d;
            width: 1rem;
            pointer-events: "none";
        }
    }

    .content {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        // overflow-y: auto;
        // overscroll-behavior: contain; /* 阻止滚动穿透 */
        // -webkit-overflow-scrolling: touch; /* iOS优化 */
        // overflow-y: scroll !important; /* 强制显示滚动条 */

        // height: calc(100% - 1.51rem); /* 减去.more的高度 */
        height: 100%;
        // min-height: unset; /* 移除默认最小高度 */
        overflow-y: auto;
        // scroll-behavior: smooth; /* 平滑滚动 */
        // overscroll-behavior: contain;
        // -webkit-overflow-scrolling: touch;
        padding-top: 0.88rem;
        max-height: 80vh;
        overflow: scroll;
        // padding-bottom: 0.52rem;
        padding-top: 0.36rem;
        .item {
            width: 8.16rem;
            margin-bottom: 0.36rem;
            img {
                width: 8.16rem;
                border-radius: 0.36rem;
            }
        }
    }
}

.open {
    right: 0 !important;
    transition: right 0.1s ease-in-out;
}

.close {
    right: -9.2rem !important;
    transition: right 0.1s ease-in-out;
}

/* 电脑端限制最大字体 */
@media screen and (min-width: 510px) {
    .sidebar {
        position: absolute;
        // top: 0.84rem;
    }
    .open {
        // right: 0 !important;
    }

    .close {
        // right: -9.19rem !important;
    }
}
