.smoke-base when (@componentsJS-alert){

    .smokebg{
        position : fixed;
        left     : 0;
        right    : 0;
        top      : 0;
        bottom   : 0;
        z-index  : 1000;
        .rgba(#fff, 0.5);
    }

    .dialog{
        position   : fixed;
        z-index    : 1001;
        width      : 100%;
        height     : 100%;
        top        : 0;
        left       : 0;
        text-align : center;

        //reset styles: because the system assigns its own
        background: inherit;
        border: inherit;
        .box-shadow(0 0 0 transparent);

        // Alternate styles
        // -------------------------
        &.primary{
            .dialog-inner{
                color            : @state-primary-color;
                border-color     : @state-primary-border;
                background-color : @state-primary-bg;
            }
        }
        &.success when (@alert-color-success) and (@alert-colors){
            .dialog-inner{
                color            : @state-success-color;
                border-color     : @state-success-border;
                background-color : @state-success-bg;
            }
        }
        &.warning when (@alert-color-warning) and (@alert-colors){
            .dialog-inner{
                color            : @state-warning-color;
                border-color     : @state-warning-border;
                background-color : @state-warning-bg;
            }
        }
        &.error when (@alert-color-error) and (@alert-colors){
            .dialog-inner{
                color            : @state-error-color;
                border-color     : @state-error-border;
                background-color : @state-error-bg;
            }
        }
        &.info when (@alert-color-info) and (@alert-colors){
            .dialog-inner{
                color            : @state-info-color;
                border-color     : @state-info-border;
                background-color : @state-info-bg;
            }
        }

        li{
            margin     : 0;
            list-style : none;

            & + li{
                margin-top : 0.5em;
            }
        }
    }

    .dialog-inner{
        overflow         : auto;
        margin-top       : 15%;
        max-width        : @grid-container-width * 0.75;
        max-height       : 70%;
        font-size        : @font-size-large;
        padding          : 1em 2em;
        border           : 1px solid @gray;
        background-color : #fff;
        .inline-block();
        .border-radius(@state-border-radius);
        .box-shadow(3px 3px 25px fade(#000, 25%));
    }

    .dialog-buttons{
        margin-top : 1em;

        button{
            font-size : 12px;
            .button-color(@button-success-color; @button-success-bg);

            &.cancel{
                margin-right : .5em;
                .button-color(@button-error-color; @button-error-bg);
            }
        }
    }

    // Alert type
    &.smoke-alert{
    }

    &.smoke-confirm{
    }

    &.smoke-prompt{
    }

    &.smoke-quiz{
    }

    &.smoke-signal{
    }
}