.SideSwitchTimeline {
    --buttonSize: 128px;
    --buttonSizeScale: 1;
    --buttonSizeActual: calc(var(--buttonSize) * var(--textSizeMultiplier) * var(--buttonSizeScale));
    /*包含回頂部的按鈕*/
    --buttonCounts: 4;
    --buttonBetweenSpace: 0px;
    --buttonBetweenSpaceActual: calc(var(--buttonBetweenSpace) * var(--textSizeMultiplier) * var(--buttonSizeScale));
    position: sticky;
    display: block;
    height: 0;
    left: 0;
    right: 0;
    pointer-events: none;

    bottom: 0;

    z-index: 100;
}

.SideSwitchTimeline .SideSwitchTimelineMain {
    position: absolute;
    display: block;

    bottom: 0;

    width: var(--selectHeaderWidth);
    transform: translateX(-50%);
    left: 50%;
}


.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer {
    --shrinkBtnSizeRatio: 0.25;
    --shrinkBtnSizeActual: calc(var(--buttonSizeActual) * var(--shrinkBtnSizeRatio));
    position: absolute;
    transform: translateX(100%);
    right: var(--shrinkBtnSizeActual);
    bottom: 0;

    display: flex;
    flex-direction: column;
    min-height: 80%;
    height: calc(var(--buttonSizeActual) * var(--buttonCounts) + var(--buttonBetweenSpaceActual) * (var(--buttonCounts) - 1));
    max-height: 100%;
}

.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .jumpBtn {
    height: var(--buttonSizeActual);
    max-height: calc(100% / var(--buttonCounts));
    pointer-events: auto;
}

.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .jumpBtn+.jumpBtn {
    margin-top: var(--buttonBetweenSpaceActual);
}

.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .jumpBtn .jumpBtnImg {
    height: 100%;
    width: auto;
}

/*Back to top section*/
.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .backToTopSectionSpace {
    content: "";
    flex: 1;
}

.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .backToTopBtn{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;

    pointer-events: auto;
    cursor: pointer;

    --buttonSize: 97px;
    --buttonSizeActual: calc(var(--buttonSize) * var(--textSizeMultiplier) * var(--buttonSizeScale));
    width: var(--buttonSizeActual);
    height: var(--buttonSizeActual);
    max-height: calc(100% / var(--buttonCounts));
    align-self: center;
}

.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .backToTopBtn img{
    position: absolute;
    display: block;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .backToTopBtn img.clicked{
    opacity: 0;
}
.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .backToTopBtn:active img.clicked{
    opacity: 1;
}
.SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer .backToTopBtn:active img.non-clicked{
    opacity: 0;
}

/*-----------English Variation-----------*/
.SideSwitchTimeline.eng {
    --buttonSize: 110px;
    --buttonBetweenSpace: 18px;
}


/*-------------------small tablet & mobile (width <= 650px)------------------*/
/*通常版型會轉為側邊欄收縮或簡化的設計*/

@media (max-width: 650px) {
    .SideSwitchTimeline {
        --buttonSizeScale: 0.8;
    }

    .SideSwitchTimeline .SideSwitchTimelineMain .buttonsContainer {
        --shrinkBtnSizeRatio: 0.75;
    }
}