// =============================================================================
// :: Section
// =============================================================================
/**
 * Scope defined for visualising the section layout in the layout section of
 * the styleguides.
 *
 * IMPORTANT!!!
 * This creates boxes to create a VISUALISATION of the layout and is not and
 * should DEFINITLY NOT be used in the styleguide itself.
 */

// =============================================================================
// :: Root
// =============================================================================
.s-bp-section {

	* {
		font-size: $font-size;
		line-height: $line-height;
		font-weight: $font-weight-normal;

		color: $text-color;
	}

	.l-section,
	.l-section__header,
	.l-section__content,
	.l-section__footer,
	.l-section__footer p,
	.l-section__title,
	.l-section__actions {
		padding: 3rem;

		border: 0.1rem dashed $border-color;

		transition:
			color 0.2s ease-in-out,
			border-color 0.2s ease-in-out;

		&:hover {
			color: $primary-color;
			border-color: $primary-color;
		}
	}

	.l-section,
	.l-section__header,
	.l-section__content,
	.l-section__footer {
		margin-top: 3rem;
	}

	.l-section {
		padding-right: 3rem;
		padding-left: 3rem;

		border: 0.1rem dashed $border-color;
	}
}