.typo_slider.typo_slider_active .typo_slider_track  {
    transition: transform 1s ease;
    will-change: transform;
}

.typo_slider_prev, 
.typo_slider_next {
    background-color: rgba(255,255,255,0.9);
    font-size: 1em; color: var(--typo-color-black);
    width: 2.5em; height: 2.5em;
    transform: translate(0,0);
    top: auto; left: auto; right: auto;
}
.typo_slider_prev { bottom: 1em; right: 4em;}
.typo_slider_next { bottom: 1em; right: 1em;}
.typo_slider:has(.gap):not([class*="_arrow_position"]) .typo_slider_prev { bottom: 2em; right: 5em;}
.typo_slider:has(.gap):not([class*="_arrow_position"]) .typo_slider_next { bottom: 2em; right: 2em;}

.typo_slider_prev:after,
.typo_slider_next:after {
    content: ''; position: absolute;
    top: 50%; left: 50%; 
    width: 0.75em; height: 0.75em;
    border-top: 0.125em solid currentColor;
    border-left: 0.125em solid currentColor;
}
.typo_slider_prev:after {
    transform: translate(-35%,-50%) rotate(-45deg);
}
.typo_slider_next:after {
    transform: translate(-65%,-50%) rotate(-225deg);
}

.default_arrow_position .typo_slider_prev { top: 50%; left: 1px; box-shadow: 0 0 1px rgba(0,0,0,0.2); transform: translate(0,-50%);}
.default_arrow_position .typo_slider_next { top: 50%; right: 1px; box-shadow: 0 0 1px rgba(0,0,0,0.2); transform: translate(0,-50%)}

.top_inner_arrow_position .typo_slider_prev { top: 1em; right: 4em; bottom: auto;}
.top_inner_arrow_position .typo_slider_next { top: 1em; right: 1em; bottom: auto;}
.typo_slider.top_inner_arrow_position:has(.gap) .typo_slider_prev { top: 2em; right: 5em;}
.typo_slider.top_inner_arrow_position:has(.gap) .typo_slider_next { top: 2em; right: 2em;}

.typo_slider.top_arrow_position {padding-top: 3em;}
.typo_slider.top_arrow_position .typo_slider_prev { bottom: auto; top: 0; right: 4em; border: 0.125rem solid #000; background-color: transparent;}
.typo_slider.top_arrow_position .typo_slider_next { bottom: auto; top: 0; right: 1em; border: 0.125rem solid #000; background-color: transparent;}

.typo_slider.bottom_arrow_position {padding-bottom: 3em;}
.typo_slider.bottom_arrow_position .typo_slider_prev { bottom: 0; top: auto; right: 4em; border: 0.125rem solid #000; background-color: transparent;}
.typo_slider.bottom_arrow_position .typo_slider_next { bottom: 0; top: auto; right: 1em; border: 0.125rem solid #000; background-color: transparent;}


/***************************************************************************
* Image Slider
****************************************************************************/
.typo_slider .image_item img {
    height: 20em; width: auto; max-width: none;
    border-radius: 0.375em;
}

.typo_slider .image {
    width: 100%;
}