@require('./variables.styl')

arrow-long = $tooltip-arrow-width
arrow-short = $tooltip-arrow-width - 2px

.k-tooltip
    display inline-block
.k-tooltip-content
    max-width $tooltip-max-width
    min-width 0
    padding $tooltip-padding
    line-height $tooltip-line-height
    word-wrap break-word
    
    // arrow
    > .k-arrow
        &:before, &
            position absolute
            display block
            border-style solid
            border-color transparent
        &:before
            content ' '
        &.k-center
            left 50%
            margin-left -(arrow-short) 
        &.k-top
        &.k-bottom
            &:before, &
                border-width arrow-long arrow-short
            &:before
                left -(arrow-short)
        &.k-top
            top -(2 * arrow-long) 
            &:before
                top -(arrow-long - 1px)
        &.k-bottom
            bottom -(2 * arrow-long)
            &:before
                bottom -(arrow-long - 1px)
        &.k-middle
            top 50%
            margin-top -(arrow-short)
        &.k-left
        &.k-right
            &:before, &
                border-width arrow-short arrow-long
            &:before
                top -(arrow-short)
        &.k-left
            left -(2 * arrow-long)
            &:before
                left -(arrow-long - 1px)
        &.k-right
            right -(2 * arrow-long)
            &:before
                right -(arrow-long - 1px) 


    &.k-cannot-hover
        pointer-events none

    // confirm
    .k-buttons
        padding-top $tooltip-confirm-buttons-padding-top
        .k-btn:last-of-type
            margin-left $tooltip-confirm-buttons-gutter

    // theme 
    generate(theme)
        if theme == 'dark'
            $border-color = $tooltip-dark-arrow-border-color
            $bg-color = $tooltip-dark-bg-color
            $color = $tooltip-dark-color
        else
            $border-color = $tooltip-arrow-border-color
            $bg-color = $tooltip-bg-color
            $color = $tooltip-color
        &.k-{theme}
            background $bg-color 
            color $color
            > .k-arrow
                &.k-top
                    border-bottom-color $border-color
                    &:before
                        border-bottom-color $bg-color 
                &.k-bottom
                    border-top-color $border-color
                    &:before
                        border-top-color $bg-color
                &.k-left
                    border-right-color $border-color
                    &:before
                        border-right-color $bg-color
                &.k-right
                    border-left-color $border-color
                    &:before
                        border-left-color $bg-color
    generate('dark')
    generate('light')
    

requireTheme('tooltip')