/**
 * Typography utilities print
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$typography: null !default;
$typography-print: null !default;

/*
* Headings
*/
.ecl-u-type-heading-1,
%ecl-heading-1 {
  color: map.get($typography, 'heading-color');
  font: map.get($typography-print, 'heading1') !important;
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
  font-weight: map.get($theme, 'font-weight', 'bold') !important;
  margin: map.get($typography-print, 'heading-margin');
}

.ecl-u-type-heading-2,
%ecl-heading-2 {
  color: map.get($typography, 'heading-color');
  font: map.get($typography-print, 'heading2') !important;
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
  font-weight: map.get($theme, 'font-weight-print', 'bold') !important;
  margin: map.get($typography-print, 'heading-margin');
}

.ecl-u-type-heading-3,
%ecl-heading-3 {
  color: map.get($typography, 'heading-color');
  font: map.get($typography-print, 'heading3') !important;
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
  font-weight: map.get($theme, 'font-weight-print', 'bold') !important;
  margin: map.get($typography-print, 'heading-margin');
}

.ecl-u-type-heading-4,
%ecl-heading-4 {
  color: map.get($typography, 'heading-color');
  font: map.get($typography-print, 'heading4') !important;
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
  font-weight: map.get($theme, 'font-weight-print', 'bold') !important;
  margin: map.get($typography-print, 'heading-margin');
}

.ecl-u-type-heading-5,
%ecl-heading-5 {
  color: map.get($typography, 'heading-color');
  font: map.get($typography-print, 'heading5') !important;
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
  font-weight: map.get($theme, 'font-weight-print', 'bold') !important;
  margin: map.get($typography-print, 'heading-margin');
}

.ecl-u-type-heading-6,
%ecl-heading-6 {
  color: map.get($typography, 'heading-color');
  font: map.get($typography-print, 'heading6') !important;
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
  font-weight: map.get($theme, 'font-weight-print', 'bold') !important;
  margin: map.get($typography-print, 'heading-margin');
}

/*
* Paragraph
*/
.ecl-u-type-paragraph,
.ecl-u-type-paragraph-m,
%ecl-paragraph {
  color: map.get($typography, 'text-color');
  font: map.get($theme, 'font-print', 'm') !important;
}

.ecl-u-type-paragraph-lead {
  color: map.get($typography, 'text-color');
  font: map.get($theme, 'font-print', 'xl') !important;
}

.ecl-u-type-paragraph-s {
  color: map.get($typography, 'text-color');
  font: map.get($theme, 'font-print', 's') !important;
}

.ecl-u-type-paragraph-xs {
  color: map.get($typography, 'text-color');
  font: map.get($theme, 'font-print', 'xs') !important;
}

/*
* Font size
*/
.ecl-u-type-xs {
  font: map.get($theme, 'font-print', 'xs') !important;
}

.ecl-u-type-s {
  font: map.get($theme, 'font-print', 's') !important;
}

.ecl-u-type-m {
  font: map.get($theme, 'font-print', 'm') !important;
}

.ecl-u-type-l {
  font: map.get($theme, 'font-print', 'l') !important;
}

.ecl-u-type-xl {
  font: map.get($theme, 'font-print', 'xl') !important;
}

.ecl-u-type-2xl {
  font: map.get($theme, 'font-print', '2xl') !important;
}

.ecl-u-type-3xl {
  font: map.get($theme, 'font-print', '3xl') !important;
}

.ecl-u-type-4xl {
  font: map.get($theme, 'font-print', '4xl') !important;
}

.ecl-u-type-5xl {
  font: map.get($theme, 'font-print', '5xl') !important;
}

.ecl-u-type-6xl {
  font: map.get($theme, 'font-print', '6xl') !important;
}

.ecl-u-type-prolonged-xs {
  font: map.get($theme, 'font-prolonged-print', 'xs') !important;
}

.ecl-u-type-prolonged-s {
  font: map.get($theme, 'font-prolonged-print', 's') !important;
}

.ecl-u-type-prolonged-m {
  font: map.get($theme, 'font-prolonged-print', 'm') !important;
}

.ecl-u-type-prolonged-l {
  font: map.get($theme, 'font-prolonged-print', 'l') !important;
}

.ecl-u-type-prolonged-xl {
  font: map.get($theme, 'font-prolonged-print', 'xl') !important;
}

/*
* Font colour
*/
@each $key, $value in map.get($theme, 'color') {
  @if $key == 'white' or $key == 'black' {
    .ecl-u-type-color-#{$key} {
      color: map.get($theme, 'color', $key) !important;
    }
  } @else {
    .ecl-u-type-color-#{$key} {
      color: var(--ecl-color-#{$key}) !important;
    }
  }
}

/*
* Font style
*/
.ecl-u-type-regular {
  font-weight: map.get($theme, 'font-weight-print', 'regular') !important;
}

.ecl-u-type-bold {
  font-weight: map.get($theme, 'font-weight-print', 'bold') !important;
}

.ecl-u-type-capitalize {
  text-transform: capitalize !important;
}

.ecl-u-type-lowercase {
  text-transform: lowercase !important;
}

.ecl-u-type-uppercase {
  text-transform: uppercase !important;
}

.ecl-u-type-overline {
  text-decoration: overline !important;
}

.ecl-u-type-underline {
  text-decoration: underline !important;
}

.ecl-u-type-strike {
  text-decoration: line-through !important;
}

.ecl-u-type-none {
  text-decoration: none !important;
}

/*
* Font family
*/
.ecl-u-type-family {
  font-family: #{map.get($theme, 'font-family-print', 'default')} !important;
}

.ecl-u-type-family-alt {
  font-family: #{map.get($theme, 'font-family-print', 'alt')} !important;
}

/*
* Text align
*/
.ecl-u-type-align-left {
  text-align: left !important;
}

.ecl-u-type-align-right {
  text-align: right !important;
}

.ecl-u-type-align-center {
  text-align: center !important;
}
