.div-wrapper {
    --wbg-color: #ffffff;
    --w-color: #1f1f1f;
    --wborder-color: #f1f0f0;
    --wfilter-bg: #f5f5f5;
    --wtype-bg: #ffffff;

    &.dark {
        --wbg-color: rgba(0, 155, 233, 0.1);
        --w-color: #ffffff;
        --wborder-color: rgba(12, 154, 255, 0.15);
        --wfilter-bg: #0b588e;
        --wtype-bg: #0168b0;
    }
    width: 100%;
    background: var(--wbg-color);
    border-radius: 16px;
    color: var(--w-color);
    position: relative;
    font-size: 16px;
    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;

    &-head {
        padding: 12px 16px;
        border-bottom: 1px solid var(--wborder-color);
    }

    .extra {
        position: absolute;
        right: 16px;
        top: 8px;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 14px;

        .extra-type {
            width: 64px;
            height: 32px;
            background: var(--wfilter-bg);
            border-radius: 8px;
            padding: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4px;
            &-item {
                width: 100%;
                height: 100%;
                border-radius: 6px;
                padding-left: 8px;
                cursor: pointer;
                svg {
                    width: 14px;
                    height: 14px;
                    margin-bottom: -2px;
                }

                &.active {
                    background: var(--wtype-bg);
                    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
                }
            }
        }
    }

    &-content {
        width: 100%;
        height: calc(100% - 51px);
        padding: 16px;
        font-size: 14px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
