/* ==================================
   #HEADINGS
   ================================== */

/* Variables
   ========================================================================== */

$au-heading-1: var(--au-h1) !default;
$au-heading-1-medium: var(--au-h1-medium) !default;
$au-heading-1-small: var(--au-h1-small) !default;
$au-heading-2: var(--au-h2) !default;
$au-heading-2-small: var(--au-h2-small) !default;
$au-heading-3: var(--au-h3) !default;
$au-heading-3-small: var(--au-h3-small) !default;
$au-heading-4: var(--au-h4) !default;
$au-heading-5: var(--au-h5) !default;
$au-heading-6: var(--au-h6) !default;
$au-heading-functional: var(--au-h-functional) !default;
$au-heading-functional-small: var(--au-h-functional-small) !default;

/* Component
   ========================================================================== */

.au-c-heading {
  color: var(--au-gray-900);
  font-family: var(--au-font);
  font-weight: var(--au-medium);
}

.au-c-heading--1 {
  @include au-font-size($au-heading-1-small);

  @include mq(small) {
    @include au-font-size($au-heading-1-medium);
  }

  @include mq(medium) {
    @include au-font-size($au-heading-1);
  }
}

.au-c-heading--2 {
  @include au-font-size($au-heading-2-small);

  @include mq(small) {
    @include au-font-size($au-heading-2);
  }
}

.au-c-heading--3 {
  @include au-font-size($au-heading-3-small);

  @include mq(small) {
    @include au-font-size($au-heading-3);
  }
}

.au-c-heading--4 {
  @include au-font-size($au-heading-4);
}

.au-c-heading--5 {
  @include au-font-size($au-heading-5);
}

.au-c-heading--6 {
  @include au-font-size($au-heading-6);
}

.au-c-heading--functional {
  @include au-font-size($au-heading-functional-small);
  color: var(--au-gray-700);

  @include mq(small) {
    @include au-font-size($au-heading-functional);
  }
}