.page-right-tools-widgets-span-appear {
    transform: translate(0, 0);
    transition-duration: 500ms;
}

.page-right-tools-widgets-span-disappear {
    transform: translate(52px, 0);
    transition-duration: 500ms;
}

.page-right-tools-widgets-span {
    z-index: 999;
}

.page-right-tools-widgets-span:hover {
    transform: scale(1.2);
    transition-duration: 100ms;
}

.page-right-tools-widgets-span>svg:hover {
    background-color: var(--global-theme-color-blur, #ea6f5a1a);
}

.page-right-tools-widgets-span>svg {
    cursor: pointer;
    border-radius: var(--global-widget-border-radius, 0.3em);
}

.color-picker-popup-div {
    border: 1px solid var(--theme-color, #ea6f5a);
    height: 170px;
    width: 200px;
    border-radius: var(--global-el-border-radius, 10px);
    background-color: var(--global-theme-color-blur, #ea6f5a1a);
    text-align: center;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.color-picker-slider {
    width: 80%;
    margin-top: 10px;
    border-radius: var(--global-el-border-radius, 10px);
    appearance: none;
    height: 5px;
    background-color: var(--theme-color, #ea6f5a);
}

.color-picker-slider::-webkit-slider-runnable-track {
    background-color: var(--global-theme-color-blur, #ea6f5a1a);
    height: 5px;
    border-radius: var(--global-el-border-radius, 10px);
}

.color-picker-slider::-webkit-slider-thumb {
    appearance: none;
    position: relative;
    height: 20px;
    width: 10px;
    margin-top: -7px;
    background-color: var(--theme-color, #ea6f5a);
    border-radius: 3px;
    cursor: pointer;
    transition: transform 0.1s;
}

.color-picker-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.color-picker-preset-color-list-div {
    margin: 30px 8px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.color-picker-preset-color-btn-div {
    width: 25px;
    height: 30px;
    margin: 3px 5px 7px 3px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.1s;
}

.color-picker-preset-color-btn-div:hover {
    transform: scale(1.1);
}

.color-picker-popup-span-appear {
    transform: translate(0, 0);
    transition-duration: 1s;
}

.color-picker-popup-span-disappear {
    transform: translate(270px, 0);
    transition-duration: 1s;
}

.scroll-to-top:hover {
    transform: scale(1.2);
    transition-duration: 100ms;
}

.scroll-to-top svg {
    cursor: pointer;
    border-radius: var(--global-widget-border-radius, 0.3em);
}

.scroll-to-top svg:hover {
    background-color: var(--global-theme-color-blur, #ea6f5a1a);
}

.canvas-hide {
    transform: translate(1000px, 0);
}

.read-progress {
    --p: 0;
    --thickness: 3px;
    --ring-border: var(--theme-color, #ea6f5a);
    --bw: 1px;

    display: grid;
    place-items: center;
    flex: none;
    cursor: pointer;
    border-radius: var(--global-widget-border-radius, 0.3em);
}

.read-progress:hover {
    background-color: var(--global-theme-color-blur, #ea6f5a1a);
}

.read-progress::before {
    cursor: pointer;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* 外描边 */
        radial-gradient(farthest-side,
            transparent calc(100% - var(--bw)),
            var(--ring-border) calc(100% - var(--bw)),
            var(--ring-border) 100%),
        /* 内描边 */
        radial-gradient(farthest-side,
            transparent calc(100% - var(--thickness)),
            var(--ring-border) calc(100% - var(--thickness)),
            var(--ring-border) calc(100% - var(--thickness) + var(--bw)),
            transparent calc(100% - var(--thickness) + var(--bw))),
        /* 进度 + 轨道 */
        conic-gradient(var(--theme-color, #ea6f5a) calc(var(--p) * 1%), transparent 0);
    -webkit-mask: radial-gradient(farthest-side,
            #0000 calc(100% - var(--thickness)),
            #000 calc(100% - var(--thickness)));
    mask: radial-gradient(farthest-side,
            #0000 calc(100% - var(--thickness)),
            #000 calc(100% - var(--thickness)));
}

.read-progress .num {
    position: relative;
    font-size: 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    cursor: pointer;
}

.progress-num-hide {
    right: -1000px;
}