@require('./variables.styl')

.k-collapse
    font-size $collapse-font-size
    // left arrow
    &.k-left
        .k-collapse-item
            > .k-title
                .k-arrow
                    float left
                    margin-right $collapse-item-left-arrow-margin-right
                    transform-origin center center 0
    // border
    &.k-border
        border-radius $collapse-border-radius
        padding $collapse-border-padding
        // box-shadow $collapse-border-box-shadow
        border $collapse-border 

.k-collapse-item
    border-bottom $collapse-item-border-bottom
    &:last-of-type
        border-bottom-color transparent
    > .k-title
        height $collapse-item-height
        line-height @height
        cursor pointer
        font-weight bold
        transition color $transition
        .k-arrow
            float right
            height $collapse-item-height
            transition transform $transition
            transform-origin left center 0
    &:not(.k-disabled)
        > .k-title
            &:hover
                color $collapse-item-title-hover-color 
    > .k-content
        overflow hidden
        > .k-wrapper
            overflow hidden
            padding $collapse-item-content-padding
    &.k-active
        > .k-title
            .k-arrow
                transform rotate(90deg)
    // disabled
    &.k-disabled
        color $collapse-item-disabled-color

requireTheme('collapse')