@require('./variables.styl')
@require('../button/variables.styl')

.k-carousel
    height $carousel-height
    position relative
    overflow hidden
    .k-indicator
        position absolute
        left 50%
        transform translateX(-50%)
        bottom $carousel-indicator-bottom
        .k-dot
            height $carousel-indicator-height
            float left
            margin $carousel-dot-margin
            cursor pointer
            padding-top $carousel-dot-padding-top
            &:before
                content ''
                display block
                width $carousel-dot-width
                height $carousel-dot-height
                background $carousel-dot-bg-color
                opacity $carousel-dot-opacity
                transition width $carousel-transition 
            &.k-active:before
                opacity $carousel-dot-active-opacity
                width $carousel-dot-active-width
    > .k-btn
        position absolute
        background $carousel-arrow-bg-color 
        top 50%
        margin-top -($btn-large-height / 2)
        color $carousel-arrow-color 
        opacity $carousel-arrow-opacity
        &:hover
            color #fff
            opacity $carousel-arrow-hover-opacity !important
            background $carousel-arrow-bg-color
    > .k-prev
        left $carousel-arrow-left 
    > .k-next
        right $carousel-arrow-right 

    // hover
    &.k-hover
        > .k-btn
            opacity 0
        &:hover
            > .k-btn
                opacity $carousel-arrow-opacity
    // never
    &.k-never
        > .k-btn
            display none


    &.k-slide
        > .k-wrapper
            transition transform $carousel-transition
            white-space nowrap
    &.k-stop
        > .k-wrapper
            transition none

    // fade
    &.k-fade
        .k-carousel-item
            position absolute
.k-carousel-item
    width 100%
    height 100%
    display inline-block

    // fade
    &.k-fade-enter-active
    &.k-fade-leave-active
        transition opacity $carousel-transition
    &.k-fade-enter
    &.k-fade-leave
        opacity 0


requireTheme('carousel')