.PicSliderSwitcher {
    position: relative;
    display: flex;
    flex-direction: row;
    --btnWidth: 34;
    --mobileBtnWidth: 28;
}

/*btn(響應式過小會壞掉)*/

.PicSliderSwitcher .prev,
.PicSliderSwitcher .next {
    width: calc(var(--btnWidth) * 1px * var(--textSizeMultiplier));
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    display: block;
    object-fit: contain;
}

.PicSliderSwitcher .prev::after,
.PicSliderSwitcher .next::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    opacity: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.PicSliderSwitcher .prev {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/B_左.png");
}

.PicSliderSwitcher .prev::after {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/B_左(點選).png");
}

.PicSliderSwitcher .next {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/B_右.png");
}

.PicSliderSwitcher .next::after {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/B_右(點選).png");
}


.PicSliderSwitcher .prev:active,
.PicSliderSwitcher .next:active {
    background-image: unset !important;
}

.PicSliderSwitcher .prev:active::after,
.PicSliderSwitcher .next:active::after {
    opacity: 1;
}

/*pic*/
.PicSliderSwitcher .picsContainer {
    --shadowOffsetX: 5px;
    --shadowOffsetY: 10px;
    --shadowOffsetXActual: calc(var(--shadowOffsetX) * var(--pageContainerWidthScale));
    --shadowOffsetYActual: calc(var(--shadowOffsetY) * var(--pageContainerWidthScale));

    margin: 0 calc(15px * var(--textSizeMultiplier));
    padding-right: var(--shadowOffsetXActual);
    padding-bottom: var(--shadowOffsetYActual);
    flex: 1;
}

.PicSliderSwitcher .picsContainer .clickablePic {
    --ratio: calc(3/4);
    background-color: #fff;
    box-shadow: var(--shadowOffsetXActual) var(--shadowOffsetYActual) 0 #50666380;
}

.PicSliderSwitcher .picsContainer .clickablePic img {
    --picBorderOrigin: 10px;
}

/*another skin*/

.PicSliderSwitcher.another1 {
    --btnWidth: 30;
    --mobileBtnWidth: 24;
}

.PicSliderSwitcher.another1 .prev {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/C_左.png");
}

.PicSliderSwitcher.another1 .prev::after {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/C_左(點選).png");
}

.PicSliderSwitcher.another1 .next {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/C_右.png");
}

.PicSliderSwitcher.another1 .next::after {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/C_右(點選).png");
}

.PicSliderSwitcher.another1 .picsContainer {
    padding: 0;
}

.PicSliderSwitcher.another1 .picsContainer .clickablePic {
    box-shadow: none;
}


/*another 2 skin*/

.PicSliderSwitcher.another2 {
    --btnWidth: 40;
    --mobileBtnWidth: 30;
}

.PicSliderSwitcher.another2 .prev {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/A_右.png");
}

.PicSliderSwitcher.another2 .prev::after {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/A_右(點選).png");
}

.PicSliderSwitcher.another2 .next {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/A_左.png");
}

.PicSliderSwitcher.another2 .next::after {
    background-image: url("../../../images/historyMenu_Sub/subContentUnits/PicSliderSwitcher/A_左(點選).png");
}

.PicSliderSwitcher.another2 .picsContainer {
    padding: 0;
}

.PicSliderSwitcher.another2 .picsContainer .clickablePic {
    border: solid #729e98 1.5px;
}

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

@media (max-width: 650px) {

    .PicSliderSwitcher .prev,
    .PicSliderSwitcher .next {
        width: calc(var(--mobileBtnWidth) * 1px);
    }

    .PicSliderSwitcher .picsContainer {
        --shadowOffsetX: calc(3px * var(--pageScale-toMobileResize));
        --shadowOffsetY: calc(5px * var(--pageScale-toMobileResize));
    }

    .PicSliderSwitcher .picsContainer .clickablePic img {
        --userBorderMultiplier: var(--pageScale-toMobileResize);
        --picBorderOrigin: 4px;
    }

    /*another 2 skin*/
    .PicSliderSwitcher.another2 .picsContainer .clickablePic {
        border-width: 1px;
    }
}