@use '@angular/material' as mat;
@use 'colors';
@use 'fonts';

.superheading {
  //super big display text
  font-size: 60px;
  letter-spacing: 2pt;
  text-transform: uppercase;
  text-align: center;
}
.heading {
  font-family: Poppins, Arial, sans-serif;
  letter-spacing: 0.5pt;
  font-weight: 700;
  text-transform: uppercase;
  &.lowercase {
    text-transform: none !important;
  }
}
.subheading {
  font-family: Poppins, Arial, sans-serif;
  letter-spacing: 0.5pt;
  font-weight: 700;
}
.subheading.alt {
  font-family: Roboto, Georgia, serif;
}
.subsubheading {
  font-family: Poppins, Arial, sans-serif;
  letter-spacing: 0.5pt;
  font-weight: normal;
}
.text-label {
  font-family:
    Roboto Condensed,
    Arial,
    sans-serif;
  font-size: 16px;
  vertical-align: middle;
  &:not(.lowercase) {
    text-transform: uppercase;
  }
}
.warning-text {
  font-family: Poppins, Arial, sans-serif;
  color: colors.color(warn);
}
.error-text {
  font-family: Poppins, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: colors.color(error);
}
.hint-text {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  padding: 0 12px;
  letter-spacing: 0.4px;
  .light & {
    color: rgba(0, 0, 0, 0.6);
  }
  .dark & {
    color: rgba(255, 255, 255, 0.6);
  }
}
.placeholder-text {
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: normal;
  .light & {
    color: rgba(0, 0, 0, 0.6);
  }
  .dark & {
    color: rgba(255, 255, 255, 0.6);
  }
}
.mdc-label {
  line-height: 24px;
  padding: 0px !important;
}
.mat-mdc-chip .mat-mdc-chip-action-label {
  font-size: 14px !important;
}
.mdc-button__label,
textarea,
.mat-mdc-menu-item-text {
  letter-spacing: normal !important;
}
textarea {
  font-size: 18px !important;
  font-weight: 400 !important;
  font-family: Roboto, Arial, sans-serif;
}

$custom-typography: mat.m2-define-typography-config(
  $font-family: Roboto,
  $headline-5: mat.m2-define-typography-level(
      32px,
      48px,
      800,
      $letter-spacing: 0.5pt
    ),
  $headline-6: mat.m2-define-typography-level(
      20px,
      32px,
      800,
      $letter-spacing: 0.5pt
    ),
  $body-2: mat.m2-define-typography-level(
      16px,
      24px,
      400,
      $letter-spacing: normal
    ),
);

%typography {
  font-family: Roboto, serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: normal !important;

  h1 {
    @extend .heading;
  }
  h2,
  h3,
  h4 {
    @extend .subheading;
  }
  h5,
  h6 {
    font-size: 18px;
  }

  a:not(.external-link):not(.mat-mdc-button):not(.mat-mdc-outlined-button) {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 2px solid colors.color(balanced-blue);
    &:hover {
      color: colors.color(balanced-blue);
    }
  }

  a.external-link {
    border-bottom: none;
    color: colors.color(link);
    transition: none;
    text-decoration: none;
    &:hover {
      border-bottom: 2px solid colors.color(link);
      color: colors.color(balanced-blue);
    }
  }

  @include mat.typography-hierarchy($custom-typography);
  @include mat.checkbox-typography($custom-typography);
  @include mat.all-component-typographies($custom-typography);
}
