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

.k-dialog-wrapper
    position absolute
    z-index $max-z-index 
    top 0
    left 0
    width 100%
    // overlay
    > .k-overlay
        position fixed
        top 0
        left 0
        width 100%
        height 100%
        background #000
        opacity 0.5 

.k-dialog
    position absolute 
    width $dialog-width 
    border-radius $dialog-border-radius 
    background $dialog-bg-color 
    font-size $dialog-font-size
    color $dialog-color
    max-width 100%

    // header
    .k-header
        padding 0 $dialog-padding
        border-bottom $dialog-title-border 
        position relative
        .k-title
            height $dialog-title-height
            line-height $dialog-title-height
            font-size $dialog-title-font-size
            color $dialog-title-color
            display inline-block
        .k-close
            position absolute
            right $dialog-close-right 
            top $dialog-close-top 
            &.k-btn
                .k-icon 
                    font-size $dialog-close-icon-font-size

    // body
    .k-body
        padding $dialog-body-padding

    // footer
    .k-footer
        text-align right
        padding $dialog-footer-padding
        .k-btn
            margin-left $dialog-footer-btn-margin 

    // drag
    &.k-dragging
        cursor move 
        user-select none

    // animation
    &.animate-enter-active
    &.animate-leave-active
    &.animate-appear-active
        transition all $transition
    &.animate-enter
    &.animate-leave
    &.animate-appear
        transform $dialog-transform 
        opacity 0

    // size
    for size in large small mini
        &.k-{size}
            width lookup('$dialog-' + size + '-width')

// alert dialog
.k-alert-dialog
    .k-dialog
        > .k-body
            margin-top $dialog-alert-body-margin-top
            padding $dialog-alert-padding 
            text-align center
            position relative
            z-index 1
        > .k-header
        > .k-footer
            border none
    .k-tip-icon
        text-align center
        margin-bottom $dialog-alert-tip-icon-margin-bottom
        .k-icon
            font-size $dialog-alert-tip-icon-font-size
            line-height $dialog-alert-tip-icon-line-height 
    for type in 'success' 'warning' 'error' 'confirm'
        // error is a built-in function, we must use string
        &.k-{type}
            .k-tip-icon
                color lookup('$dialog-alert-' + type + '-tip-icon-color')
    // with title
    &.k-with-title
        .k-dialog
            > .k-body
                margin-top $dialog-alert-title-body-margin-top
                text-align left
        .k-tip-icon
            float left
            .k-icon
                font-size $dialog-alert-title-tip-icon-font-size
        .k-content-wrapper
            overflow hidden
            padding-left $dialog-alert-wrapper-padding-left
            > .k-title
                line-height $dialog-alert-tip-icon-line-height
                font-size $dialog-alert-title-font-size 


requireTheme('dialog')