/* HTML Elements - Headings */
////
/// @group HTML_Elements-Headings
/// HTML Elements - Headings (h1 to h6 and font-size-display)

/// Default h1, .heading1-6 and font-size-display styles
h1,
.heading1,
h2,
.heading2,
h3,
.heading3,
h4,
.heading4,
h5,
.heading5,
h6,
.heading6,
.font-size-display {
	font-weight: var(--font-semi-bold);
	line-height: 1.25;
	margin: 0;
}

/// Default h1 and .heading1-6 sizes
h,
.heading {
	@each $type, $value in $osui-typography-heading-sizes {
		&#{$type} {
			font-size: var(--font-size-h#{$type});
		}
	}
}

/// Default size display value
.font-size-display {
	font-size: var(--font-size-display);
}

// Default .font-size-h1-6 values
@each $type, $value in $osui-typography-heading-sizes {
	.font-size-h#{$type} {
		font-size: var(--font-size-h#{$type});
	}
}

///
.tablet {
	@each $type, $value in $osui-typography-heading-sizes {
		h#{$type},
		.heading#{$type} {
			@if $type < 4 {
				font-size: calc(var(--font-size-h#{$type}) - 2px);
			} @else {
				font-size: calc(var(--font-size-h#{$type}) - 1px);
			}
		}
	}

	.font-size-display {
		font-size: calc(var(--font-size-display) - 2px);
	}
}

///
.phone {
	@each $type, $value in $osui-typography-heading-sizes {
		h#{$type},
		.heading#{$type} {
			@if $type < 4 {
				font-size: calc(var(--font-size-h#{$type}) - 4px);
			} @else {
				font-size: calc(var(--font-size-h#{$type}) - 2px);
			}
		}
	}

	.font-size-display {
		font-size: calc(var(--font-size-display) - 4px);
	}
}