@import config

.fab-slideshow
    background-color: #000000
    position: relative
    &-image-box
        &-list
            overflow: hidden
            transition: height $transition-speed
            & &-img
                display: inline-block
                vertical-align: middle
            &-slider
                white-space: nowrap
                transition: margin-left $transition-speed * 2
        &-buttons
            position: absolute
            top: 10px
            right: 10px
            padding: 10px 30px
            background-color: rgba(0, 0, 0, $button-opacity-hover)
            border-radius: 6px
            &-play, &-pause, &-fullscreen, &-normalscreen
                cursor: pointer
                border: none
                margin-left: 25px
                height: 25px
                width: 25px
                background-color: $button-color
                background-position: 50%
                background-size: cover
                background-repeat: no-repeat
                border-radius: 6px
                opacity: $button-opacity
                transition: opacity $transition-speed
                &:first-child
                    margin-left: 0
                &:focus
                    outline: none
                &:hover
                    opacity: $button-opacity-hover
            &-play
                background-image: url('./images/play.svg')
            &-pause
                background-image: url('./images/pause.svg')
            &-fullscreen
                background-image: url('./images/arrow-expand-all.svg')
            &-normalscreen
                background-image: url('./images/arrow-compress-all.svg')
        &-description
            &-content
            &-button
        &-button
            &-prev, &-next
                position: absolute
                height: 100%
                width: 50%
                top: 0
                border: none
                background: transparent
                &:focus
                    outline: none
                &-icon
                    background: url('./images/chevron-down.svg') 50% no-repeat
                    background-size: cover
                    width: 80px
                    height: 50px
                    cursor: pointer
                    opacity: $button-opacity
                    transition: opacity $transition-speed
                &:hover &-icon
                    opacity: $button-opacity-hover
            &-prev
                left: 0
                &-icon
                    transform: rotate(90deg)
            &-next
                right: 0
                &-icon
                    transform: rotate(270deg)
                    float: right

@media only screen and (max-width: 425px)
    .fab-slideshow
        &-image-box
            &-button
                &-prev, &-next
                    &-icon
                        position: relative
                        width: 20px
                        height: 35px
                &-prev
                    &-icon
                        margin-left: -30px
                &-next
                    &-icon
                        margin-right: -30px