:root {
    --fade-size: 4.5rem;
    --fade-width: 100%;
}

.sidebar {
    --fade-bg: var(--bg-color);
}

.content-fade-edge {
    --fade-bg: var(--bg-color);

    position: fixed;
    left: 0;
    right: 0;
}

.content-fade-edge.top {
    top: 0;
}

.content-fade-edge.bottom {
    bottom: 0;
}

body:not(.close) .content-fade-edge,
body:not(.close) .content-fade-edge::before {
    transform: translateX(calc(var(--global-sidebar-width) / 2));
}

body.close:not(.has-toc) .content-fade-edge,
body.close:not(.has-toc) .content-fade-edge::before {
    transform: translateX(1.25rem);
}

@media screen and (max-width:768px) {
    body.close .content-fade-edge {
        --fade-bg: transparent;
    }

    body:not(.close) .content-fade-edge,
    body:not(.close) .content-fade-edge::before {
        transform: translateX(0);
    }

    body:not(.close):not(.has-toc) .content-fade-edge,
    body:not(.close):not(.has-toc) .content-fade-edge::before {
        transform: translateX(1.25rem);
    }
}

.fade-edge {
    height: 0;
    z-index: 99;
    pointer-events: none;
    --fade-direction: to bottom;
}

.fade-edge.bottom {
    --fade-direction: to top;
}

.sidebar .fade-edge {
    position: sticky;
    left: 0;
    right: 0;
}

.sidebar .fade-edge.top {
    top: 0;
}

.sidebar .fade-edge.bottom {
    bottom: 0;
}

.fade-edge::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: var(--fade-width);
    height: var(--fade-size);
    opacity: 0;
    transition: opacity var(--global-transition-duration-fast);
    background: linear-gradient(var(--fade-direction),
            color-mix(in srgb, var(--fade-bg) 90%, transparent) 0%,
            color-mix(in srgb, var(--fade-bg) 70%, transparent) 35%,
            color-mix(in srgb, var(--fade-bg) 50%, transparent) 65%,
            color-mix(in srgb, var(--fade-bg) 30%, transparent) 85%,
            color-mix(in srgb, var(--fade-bg) 10%, transparent) 95%,
            transparent 100%);
}

.fade-edge.bottom::before {
    bottom: 0;
}

.fade-edge.show::before {
    opacity: 1;
}

body.image-viewer-open .fade-edge::before {
    opacity: 0 !important;
    transition: none;
}