
// Info Block
//
// A block for sharing status information.
//
// .block-info - This is an information block.
// .block-help - This is a help block.
// .block-alert - This is an alert block.
// .block-success - This is a success block. Well done!
// .block-error - This is an error block.
// .block-announcement - This is an announcement block.
//
// Markup:
// <div class="{{modifier_class}}">Info relevant to the block goes in here!</div>
//
// Styleguide Blocks.status
.block-info,
.block-help,
.block-alert,
.block-success,
.block-error,
.block-announcement {

	background: $black;
	color: $white;
	padding: $grid-line-height $grid-gutter $grid-line-height ( $grid-gutter * 3 );
	position: relative;
	box-shadow: $border-shadow;
	margin-bottom: $grid-line-height;

	&:before {

		font-family: var( --font-monospace );
		// Defaults to info icon.
		content: '\2139\FE0F';
		position: absolute;
		top: $grid-line-height;
		left: $grid-gutter;
		font-size: 1.5rem;
		line-height: inherit;

	}

	> *:last-child {

		margin-bottom: 0;

	}

}

.block-alert {

	&:before {

		content: '\26A0\FE0F';

	}

}

.block-success {

	&:before {

		content: '\2705';

	}

}

.block-help {

	&:before {

		content: '\2753';

	}

}

.block-error {

	&:before {

		content: '\26D4';

	}

}

.block-announcement {

	&:before {

		content: '\1F4E3';

	}

}

// Intro Block
//
// A larger font size to give a bit more emphasis to an article introduction.
//
// Markup:
// <div class="block-intro">This is the intro to a block and it stands out really nicely I think.</div>
//
// Styleguide Blocks.intro
.block-intro {

	@include modular-scale( delta );

}

// Border Blocks
//
// Add a bit of oompf to your blocks to make them stand out a bit more.
//
// .block-border - The common shadow border.
// .block-border-dashed - A less common dashed border.
//
// Markup:
// <div class="{{modifier_class}}"></div>
//
// Styleguide Blocks.border
.block-border {

	padding: $grid-line-height $grid-gutter;
	border: $border-width solid currentColor;
	box-shadow: $border-shadow;

}

.block-border-dashed {

	padding: $grid-line-height $grid-gutter;
	border: $border-width dashed currentColor;

}