:root{
    --arrowsOpacity: .5;
    --arrowsFlexAlign: center;
    --arrowsFlexJustify: space-between;
    --arrowsPadding: 10px;
    --arrowsDirection: row;
}

.arrows{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: opacity .35s;
}



.inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: var(--arrowsDirection);

    justify-content: var(--arrowsFlexJustify);
    color: var(--colorFore);
}

.vertical .inner{
    flex-direction: column;
}


.left, .right{
    height: 100%;
    display: flex;
    align-items: var(--arrowsFlexAlign);
    justify-content: center;
    cursor: pointer;

    padding: var(--arrowsPadding);
    pointer-events: all;
}

.vertical .left, .vertical .right{
    height: unset;
}

.ui{
    width: 24px;
    height: 24px;
    transition: background-color .3s ease-in-out;
    
    pointer-events: none;
}
.ui circle{
    stroke: none;
    fill: var(--colorBack);
    opacity: var(--arrowsOpacity);
}

.hide{
    opacity: 0;
}