@require('./variables.styl')

.k-messages
    position fixed 
    top $message-top
    width 100%
    pointer-events none
    z-index $max-z-index + 1

    // animation
    .animate-enter
    .animate-leave
        opacity 0
        transform $message-transform 
    .animate-enter-active
    .animate-leave-active
        transition all $transition
    .animate-move
        transition transform $transition

.k-message
    text-align center
    width 100%
    > .k-container
        display inline-block
        if $message-box-shadow != none
            box-shadow $message-box-shadow 
        background $message-bg-color
        border-radius $message-border-radius
        margin-bottom $message-margin-bottom 
        pointer-events all
        > .k-wrapper
            position relative
            display inline-block
            > .k-content
                display inline-block
                padding $message-content-padding 
                vertical-align middle
                word-break break-all
                word-wrap break-word
            &.k-with-icon
                padding-left $message-icon-left + unit(14 / $rem, rem)
        > .k-close
            vertical-align middle
            .k-icon:before
                font-size $message-close-font-size 
    .k-message-icon
        position absolute
        left $message-icon-left
        top $message-icon-top 
        if $message-icon-color != inherit
            color $message-icon-color
        &:before
            font-size $message-icon-font-size 

    // type
    for type in danger success warning
        &.k-{type} .k-message-icon
            color lookup('$message-' + type + '-color')


requireTheme('message')