//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// page-alerts module
// Use page alerts to notify users of important information and state changes to the page.
//
// Content:
// - Generic page alert styling
// - Generic page alert icon position styling
// - Page alert error
// - Page alert warning
// - Page alert success
// - Page alert info
// - Page alert screen-reader only
//--------------------------------------------------------------------------------------------------------------------------------------------------------------


@import '_globals.scss';
@import '_print.scss';


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// Page alert defaults to info
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
.au-page-alerts {
	@include AU-space( padding, 1unit );
	@include AU-fontgrid( sm );
	position: relative;
	border: solid 3px $AU-color-info;
	@include AU-space( border-left-width, 3unit );
	border-radius: $AU-border-radius;
	word-wrap: break-word;

	* + & {
		@include AU-space( margin-top, 1unit );
	}

	&:before,
	&:after {
		content: ' ';
		position: absolute;
		top: 50%;
		@include AU-space( left, -2.25unit );
		@include AU-space( width, 1.5unit );
		@include AU-space( height, 1.5unit );
		@include AU-space( margin-top, -0.75unit );
		@include AU-space( border-left-width, -0.75unit );
		display: block;
		background-repeat: no-repeat;
		background-color: $AU-color-background;

		.ie8 &,
		.lt-ie8 & {
			background: none;
			text-align: center;
			background-color: $AU-color-foreground-text;
			color: #fff;
			font-weight: bold;
		}
	}

	&:after {
		background-color: transparent;
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-foreground-text }" d="M11 17.8h2v-8h-2v8zm0-11.6v2h2v-2h-2z"/>' +
			'</svg>');
		.ie8 &,
		.lt-ie8 & {
			content: 'i';
		}
	}

	&:before {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-info }" d="M0,0v24h24V0H0z M12,23C5.9,23,1,18.1,1,12C1,5.9,5.9,1,12,1s11,4.9,11,11C23,18.1,18.1,23,12,23z"/>' +
			'</svg>');
	}

	// alt
	&.au-page-alerts--alt:before {
		background-color: $AU-color-background-shade;
	}

	// dark
	&.au-page-alerts--dark:before {
		background-color: $AU-colordark-background;
	}

	&.au-page-alerts--dark:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-colordark-foreground-text }" d="M11 17.8h2v-8h-2v8zm0-11.6v2h2v-2h-2z"/>' +
			'</svg>');
	}

	// alt dark
	&.au-page-alerts--alt.au-page-alerts--dark:before {
		background-color: $AU-colordark-background-shade;
	}
}


/**
 * Page alert success
 */
.au-page-alerts--success {
	border-color: $AU-color-success;

	&:before {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-success }" d="M0,0v24h24V0H0z M12,23C5.9,23,1,18.1,1,12C1,5.9,5.9,1,12,1s11,4.9,11,11C23,18.1,18.1,23,12,23z"/>' +
			'</svg>');
	}

	&:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-foreground-text }" d="M10.4 16.9l-4.7-4.7 1.4-1.4 3.3 3.3 6.3-6.3 1.4 1.4z"/>' +
			'</svg>');

		.ie8 &,
		.lt-ie8 & {
			content: '✓';
		}
	}

	&.au-page-alerts--dark:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-colordark-foreground-text }" d="M10.4 16.9l-4.7-4.7 1.4-1.4 3.3 3.3 6.3-6.3 1.4 1.4z"/>' +
			'</svg>');
	}
}


/**
 * Page alert warning.
 */
.au-page-alerts--warning {
	border-color: $AU-color-warning;

	&:before {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-warning }" d="M0,24h24v-3.2H0V24z M12,0l12,20.8V0H12z M0,0v20.8L12,0H0z"/>' +
			'</svg>');
	}

	&:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-foreground-text }" d="M11 17h2v-2h-2v2zm0-8.6v5h2v-5h-2z"/>' +
			'</svg>');

		.ie8 &,
		.lt-ie8 & {
			content: '!';
		}
	}

	&.au-page-alerts--dark:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-colordark-foreground-text }" d="M11 17h2v-2h-2v2zm0-8.6v5h2v-5h-2z"/>' +
			'</svg>');
	}
}


/**
 * Page alert error.
 */
.au-page-alerts--error {
	border-color: $AU-color-error;

	&:before {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-error }" d="M0,0v24h24V0H0z M22.9,16.6L16.5,23H7.4L1,16.5V7.4L7.4,1h9.2l6.3,6.4V16.6z"/>' +
			'</svg>');
	}

	&:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-color-foreground-text }" d="M17 8.4L15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17l3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6z"/>' +
			'</svg>');

		.ie8 &,
		.lt-ie8 & {
			content: '!';
		}
	}

	&.au-page-alerts--dark:after {
		background-image: AU-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
				'<path fill="#{ $AU-colordark-foreground-text }" d="M17 8.4L15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17l3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6z"/>' +
			'</svg>');
	}
}


/**
 * Screen-reader only class for interlinking error messages and corresponding form elements.
 */
.au-page-alerts__sronly {
	@include AU-sronly;
}