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

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

	&.smoke-visible {
		.dialog {
			//reset styles: because the system assigns its own
			background : inherit;
			border     : inherit;
			.box-shadow(0 0 0 transparent);
		}
	}

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

		// 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 : #ffffff;
		.inline-block();
		.border-radius(@state-border-radius);
		.box-shadow(3px 3px 25px fade(#000000, 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 {
	}
}