body
    padding: 0
    margin: 0

.slippery
    margin: 0 auto
    position: relative
    overflow: hidden
    list-style: none
    padding: 0
    &__wrapper
        position: relative
        width: 100%
        height: 100%
        z-index: 1
        display: flex
        justify-content: space-between
        box-sizing: content-box
        transform: translateX(0)
    &__item
        width: 100%
        align-self: flex-start
        font-size: 40px
        flex-shrink: 0
        // for mozilla
        user-select: none
        img
            display: block
            max-width: 100%
            width: 100%
    &__nav
        position: absolute
        top: 20%
        left: 0
        z-index: 2
        width: 100%
        transform: translate(0, -20%)
    &__nav-button
        position: absolute
        background-color: transparent
        border: 0
        color: #25b5a9
        font-size: 100px
        line-height: 1
        top: 0
        outline: 0
        transition: color .15s linear
        &:hover
            &:not(.slider__nav-button--disabled)
                cursor: pointer
                color: darken(#25b5a9, 5%)
        &--prev
            left: 0
        &--next
            right: 0
        &--disabled
            color: gray
            &:hover
                cursor: not-allowed
    &__dots
        list-style-type: none
        padding: 0
        margin: 0 -5px
        display: flex
        position: absolute
        z-index: 2
        bottom: 20px
        left: 50%
        transform: translate(-50%, 0)
    &__dots-item
        width: 10px
        height: 10px
        background-color: #25b5a9
        border-radius: 50%
        margin: 0 5px
        cursor: pointer
        opacity: .5
        transition: color .15s linear
        &:hover
            &:not(.slider__dots-item--active)
                opacity: 1
        &--active
            opacity: 1
            cursor: default