.splide
    button
        appearance: none
        background: transparent
        border: 0
    &__arrow
        position: absolute
        top: 50%
        svg
            display: none
        &--prev
            @include icon(arrow-left)
            right: 100%
        &--next
            @include icon(arrow-right)
            left: 100%
    &__pagination
        display: flex
        list-style: none
        margin: 0
        padding: 0
        button
            display: block
            height: 48px
            padding: 0
            width: 48px
            &::before
                background-color: rgba($link-color, 0.3)
                border-radius: 50%
                content: ""
                display: block
                height: 10px
                margin: auto
                transition: background 0.3s ease
                width: 10px
            &:hover
                &::before
                    background-color: rgba($link-color, 0.6)
            &.is-active
                &::before
                    background-color: $link-color

    &__autoplay
        bottom: 0
        position: absolute
        right: 0
        &.is-active
            .splide__play
                display: none
            .splide__pause
                display: inline-block

    &__pause,
    &__play
        height: 48px
        padding: 0
        width: 48px

    &__play
        @include icon-block(play)

    &__pause
        @include icon-block(pause)
        display: none


    &[data-slides-length="1"]
        .splide
            &__autoplay, &__pagination, &__arrow
                display: none