@use 'abstracts' as *;

/**
 * @sass-export-section="Typography"
 */

// /* New fonts v. 4*/
@include responsive-typography();

@include media-breakpoint-up(sm, $grid-breakpoints) {
  @include responsive-typography('sm-');
}

@include media-breakpoint-up(md, $grid-breakpoints) {
  @include responsive-typography('md-');
}

@include media-breakpoint-up(lg, $grid-breakpoints) {
  @include responsive-typography('lg-');
}

@include media-breakpoint-up(xl, $grid-breakpoints) {
  @include responsive-typography('xl-');
}

@include media-breakpoint-up(xxl, $grid-breakpoints) {
  @include responsive-typography('xxl-');
}

//@end-sass-export-section

/*
TODO: Remove this when we remove the old typography, backwards compatibility for Editors in Episerver sodra.com
*/
#{$typography-prefix}pre-heading {
  @include alt-label-small;

  @include media-breakpoint-up(md, $grid-breakpoints) {
    @include alt-label-medium;
  }
}

h1,
#{$typography-prefix}heading-1 {
  @include display-medium;

  @include media-breakpoint-up(md, $grid-breakpoints) {
    @include display-large();
  }

  @include media-breakpoint-up(lg, $grid-breakpoints) {
    @include display-x-large();
  }
}

h2,
#{$typography-prefix}heading-2 {
  @include display-small();

  @include media-breakpoint-up(md, $grid-breakpoints) {
    @include display-medium;
  }

  @include media-breakpoint-up(lg, $grid-breakpoints) {
    @include display-large;
  }
}

h3,
#{$typography-prefix}heading-3 {
  @include headline-large;

  @include media-breakpoint-up(md, $grid-breakpoints) {
    @include display-small;
  }

  @include media-breakpoint-up(lg, $grid-breakpoints) {
    @include display-medium;
  }
}

h4,
#{$typography-prefix}heading-4 {
  @include headline-medium;

  @include media-breakpoint-up(md, $grid-breakpoints) {
    @include headline-large;
  }
}

h5,
#{$typography-prefix}heading-5 {
  @include headline-small;
}

h6,
#{$typography-prefix}heading-6 {
  @include title-medium;
}

/*
  Body
*/
#{$typography-prefix}body-preamble {
  @include alt-body-medium;

  @include media-breakpoint-up(lg, $grid-breakpoints) {
    @include alt-body-large;
  }

  &--bold {
    font-weight: 600;
  }
}

#{$typography-prefix}body-regular {
  @include body-large;
}

#{$typography-prefix}body-regular-small {
  @include body-small;
}

#{$typography-prefix}body-regular-large {
  @include body-large;
}

#{$typography-prefix}body-regular-extra-small {
  @include body-small;
}