// =============================================================================
// :: Heading
// =============================================================================
/**
 * Heading styles defined to give any component the possibility to extend from
 * a certain style. When an element uses the same styling as a heading, this
 * does not mean it is a H1-H6.
 */

// =============================================================================
// :: H1
// =============================================================================
@mixin extend-h1-base() {
	font-family: $font-family-primary;
	font-size: $font-size-2x-large;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;


	@include respond-at(get-breakpoint("tablet")) {
		font-size: $font-size-5x-large;
	}
}

// =============================================================================
// :: H2
// =============================================================================
@mixin extend-h2-base() {
	font-family: $font-family-primary;
	font-size: $font-size-2x-large;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;

	@include respond-at(get-breakpoint("tablet")) {
		font-size: $font-size-4x-large;
	}
}

// =============================================================================
// :: H3
// =============================================================================
@mixin extend-h3-base() {
	font-family: $font-family-primary;
	font-size: $font-size-1x-large;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;

	@include respond-at(get-breakpoint("tablet")) {
		font-size: $font-size-3x-large;
	}
}

// =============================================================================
// :: H4
// =============================================================================
@mixin extend-h4-base() {
	font-family: $font-family-primary;
	font-size: $font-size-1x-large;
	font-weight: $font-weight-bold;
	line-height: $line-height-1x-large;
}

// =============================================================================
// :: H5
// =============================================================================
@mixin extend-h5-base() {
	font-family: $font-family-primary;
	font-weight: $font-weight-normal;
}

// =============================================================================
// :: H6
// =============================================================================
@mixin extend-h6-base() {
	font-family: $font-family-primary;
	font-weight: $font-weight-normal;
}

// =============================================================================
// :: Extends
// =============================================================================
@mixin extend-heading-decorator() {

	&::after {
		content: "";

		display: block;
		width: 3rem;
		height: 0.3rem;

		margin-top: 2rem;

		background-color: $text-color-base;
		border-radius: 0.15rem;

		@include respond-at(get-breakpoint("tablet")) {
			width: 5rem;
			height: 0.5rem;

			margin-top: 4rem;

			border-radius: 0.25rem;
		}
	}
}

@mixin extend-heading-decorator--white() {

	&::after {
		content: "";

		display: block;
		width: 3rem;
		height: 0.3rem;

		margin-top: 2rem;

		background-color: $background-color-base;
		border-radius: 0.15rem;

		@include respond-at(get-breakpoint("tablet")) {
			width: 5rem;
			height: 0.5rem;

			margin-top: 4rem;

			border-radius: 0.25rem;
		}
	}
}