@use "../01-abstract/variables" as *;

/**
 * Heading - Used in src/scss/06-blocks/core/_heading.scss
 *
 * @author Milan Ricoul
 *
 * @param $name
 * @param $style
 *
 * Examples :
 *
 *      .my-heading {
 *          @include heading(h3);
 *      }
 *
 *
 * Examples for use heading style variation (depend of projects):
 * https://github.com/BeAPI/beapi-frontend-framework/pull/247
 *
 *      mixin :
 *      @if $name == h3 {
 *          font-size: var(--heading--font-size-h3);
 *          line-height: var(--heading--line-height-h3);
 *
 *          @if $style == uppercase {
 *              text-transform: uppercase;
 *          }
 *
 *          @if $style == bold {
 *              font-weight: 700;
 *          }
 *      }
 *
 *      scss :
 *      .my-heading-uppercase {
 *          @include heading(h3, "uppercase");
 *      }
 *
 *      .my-heading-bold {
 *          @include heading(h3, "bold");
 *      }
 *
 */

@mixin heading($name: h1, $style: default) {
	font-family: $font-family-primary;
	font-weight: 400;

	@if $name == h1 {
		font-size: var(--heading--font-size-h1);
		line-height: var(--heading--line-height-h1);
	}

	@if $name == h2 {
		font-size: var(--heading--font-size-h2);
		line-height: var(--heading--line-height-h2);
	}

	@if $name == h3 {
		font-size: var(--heading--font-size-h3);
		line-height: var(--heading--line-height-h3);
	}

	@if $name == h4 {
		font-size: var(--heading--font-size-h4);
		line-height: var(--heading--line-height-h4);
	}

	@if $name == h5 {
		font-size: var(--heading--font-size-h5);
		line-height: var(--heading--line-height-h5);
	}

	@if $name == h6 {
		font-size: var(--heading--font-size-h6);
		line-height: var(--heading--line-height-h6);
	}
}
