@import config
$top-padding: 10px
.fab-slideshow-slider
    height: 50px
    position: relative
    padding-top: $top-padding
    &-touch-scroll
        &#{&}.slider-touch-scroll-enabled
            .slider-touch-scroll
                &-box
                    &:before
                        background: linear-gradient(to right, #000000, transparent)
                    &:after
                        background: linear-gradient(to left, #000000, transparent)
                &-button
                    &-left, &-right
                        transition: opacity $transition-speed
                        opacity: $button-opacity
                        &:before
                            mask-image: url('./images/chevron-down.svg')
                            background-color: #ffffff
                        &:hover
                            opacity: $button-opacity-hover
    &-box
        &-item
            width: auto
            margin: 0 5px
            display: inline-block
            height: 100%
            position: relative
            transition: width $transition-speed
            &-overlay
                position: absolute
                opacity: 0.6
                height: 100%
                width: 100%
                top: 0
                left: 0
                background-color: #000000
                transition: opacity $transition-speed
                cursor: pointer
                &:hover
                    opacity: 0
            &-img
            &-selected &-overlay
                opacity: 0
            &-selected &-img
    $slider-button-width: 50px
    $slider-button-height: 20px
    &-button-toggle
        width: $slider-button-width
        height: $slider-button-height/2
        position: absolute
        top: 0
        left: 50%
        margin-left: 0-$slider-button-width/2
        cursor: pointer
        background-color: $button-color
        opacity: $button-opacity
        border: none
        border-top-left-radius: 6px
        border-top-right-radius: 6px
        transition: opacity $transition-speed
        &:before
            content: ''
            display: block
            width: $slider-button-height
            height: $slider-button-height/2
            background-position: 50% 50%
            background-repeat: no-repeat
            background-image: url('./images/chevron-down.svg')
            transition: transform $transition-speed
            margin: 0 auto
        &:focus
            outline: none
        &:hover
            opacity: $button-opacity-hover
        &#{&}-show:before
            transform: rotate(0)
        &#{&}-hide:before
            transform: rotate(180deg)