.app-scroll-paging {
    height: 100%;
    // 颜色变量
    // 激活时展示颜色
    --app-scroll-paging-active-color: var(--ion-color-primary);

    .app-scroll-paging-content {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    ::-webkit-scrollbar {
        background: transparent;
        width: 0;
        height: 0;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 0;
        box-shadow: none;
        border: 0;
        background-color: #cecece;
    }

    ::-webkit-scrollbar-track {
        border-radius: 0;
        box-shadow: none;
        border: 0;
    }

}

.paging-item-content {

    .badge {
        margin-top: -6px;
        margin-left: 22px;
        position: absolute;
    }
}

.app-scroll-paging-top {
    @extend .app-scroll-paging;

    .app-scroll-paging-tab.top,
    .app-scroll-paging-tab.bottom {
        white-space: nowrap;
        overflow: auto;
        width: 100%;
        height: 36px;
        scroll-behavior: smooth;

        .paging-item {
            display: inline-flex;

            .paging-item-content {
                display: inline-flex;
                height: 100%;
                padding: 8px 12px;
            }
        }

        .active {
            color: var(--app-scroll-paging-active-color, #3880ff);
            border-bottom: 3px solid var(--app-scroll-paging-active-color, #3880ff);
        }
    }
    
    .move {
        display: flex;

        .paging-item {
            display: flex !important;
            flex-grow: 1;
            justify-content: center;
        }
    }

    .app-scroll-paging-content {
        height: calc(100% - 36px);
        overflow-y: auto;
        overflow-x: hidden;
    }

}

.app-scroll-paging-left {
    @extend .app-scroll-paging;
    display: flex;

    .app-scroll-paging-tab.left,
    .app-scroll-paging-tab.right {
        overflow-y: auto;
        overflow-x: hidden;
        width: 6rem;
        height: 100%;
        scroll-behavior: smooth;
        background-color: #e3e3e3;

        .paging-item {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;

            .paging-item-content {
                padding: 0px 3px 0px 12px;
                width: 100%;
            }
        }

        .active {
            background-color: var(--app-scroll-paging-active-background-color, white);
            border-left: 3px solid var(--app-dominant-color);
            // .paging-item-content {
            //     border-left: 5px solid var(--app-dominant-color);
            // }
        }
    }

    .app-scroll-paging-content {
        width: calc(100% - 6rem);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.app-scroll-paging-right {
    @extend .app-scroll-paging-left;

    flex-direction: row-reverse;

    .active {

        .paging-item-content {
            border-left: 0px !important;
            border-right: 5px solid var(--app-dominant-color);
        }
    }
}

.app-scroll-paging-bottom {
    @extend .app-scroll-paging-top;
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    .app-scroll-paging-tab.top,
    .app-scroll-paging-tab.bottom {
        .active {
            color: var(--app-scroll-paging-active-color, #0cd1e8);
            border-bottom: 0px;
            border-top: 3px solid var(--app-scroll-paging-active-color, #0cd1e8);
        }
    }

    .app-scroll-paging-content {
        height: calc(100% - 36px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}