section[data-arranger="flex"][data-arranger-arrows-position="outside"] .slide-arrows,
section[data-arranger="flex"][data-arranger-arrows-position="overlay"] .slide-arrows{
    z-index: 3;
}

section[data-arranger="flex"][data-arranger-arrows-position="none"] .slide-arrows button{
    display:none;
}
section[data-arranger="flex"][data-arranger-arrows-position="outside"] .slide-arrows button,
section[data-arranger="flex"][data-arranger-arrows-position="overlay"] .slide-arrows button{
    position:absolute;
    display:block;
    top:50%;
    z-index:2;
    color:#fff;
    text-transform:uppercase;
    padding:9px 12px;
    background-color:transparent;
    border:2px solid rgba(255,255,255,.5);
    border-radius:4px;
    box-shadow:0 .25em .5em 0 rgba(0,0,0,.1);
    text-shadow:0 .25em .5em rgba(0,0,0,.1);
    opacity:1;
    cursor:pointer;
    transition:opacity 150ms ease,border 300ms ease-in-out;
    transform:translateY(-50%);
    line-height:1
}

section[data-arranger="flex"] .slide-arrows .left-arrow{
    left:2em;
}

section[data-arranger="flex"] .slide-arrows .right-arrow{
    right:2em;
}

section[data-arranger="flex"] {
    --slideshow-arrows-color: 128, 128, 128;
}

section[data-arranger="flex"] .slide-arrows button {
    border-color: rgba(var(--slideshow-arrows-color), 0.5)!important;
}

section[data-arranger="flex"] .slide-arrows svg path{
    fill: rgb(var(--slideshow-arrows-color));
    transition: fill 300ms ease-in-out;
}

section[data-arranger="flex"] .slide-arrows .left-arrow svg {
    transform: rotate(180deg);
}