/**
 * Frontend Styles
 */
@import "./variables";

@mixin printHeadingNumbered($level) {
	$selector: "";
	$content: "";

	h#{$level}.is-style-numbered {
		@if $level + 1 <= 6 {
			counter-reset: h#{$level + 1};
		}

		counter-increment: h#{$level};
	}

	@for $i from $level through 2 {
		@if $selector != "" {
			$selector: " ~ " + $selector;
		}
		@if $content != "" {
			$content: " \".\" " + $content;
		}

		$selector: "h#{$i}.is-style-numbered" + $selector;
		$content: "counter(h#{$i})" + $content;

		#{$selector}::before {
			content: #{$content};
		}
	}
}

.is-style-numbered::before {
	margin: 0;
	margin-right: var(--gkt-numbered-headings__margin-right);
}

// Styled h2
h2.is-style-numbered::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gkt-numbered-headings--h2-number__width);
	height: var(--gkt-numbered-headings--h2-number__height);
	line-height: var(--gkt-numbered-headings--h2-number__line-height);
	color: var(--gkt-numbered-headings--h2-number__color);
	background-color: var(--gkt-numbered-headings--h2-number__background-color);
	border-radius: var(--gkt-numbered-headings--h2-number__border-radius);
}

.entry-content {
	counter-reset: h2;
}

// Add numbers
@include printHeadingNumbered(2);
@include printHeadingNumbered(3);
@include printHeadingNumbered(4);
@include printHeadingNumbered(5);
@include printHeadingNumbered(6);