// Fonts and typography.
//
// Styleguide 1.3



// Font for <h2> header
$font-main-header-size: 3rem !default;
$font-main-header-size-down: 2rem !default;
@mixin font-main-header {
  font-size: $font-main-header-size;
  font-weight: bold;
  @include media-breakpoint-down(md) {
    font-size: $font-main-header-size-down;
  }
}

// Font for <h1> or bigger <h2>
$font-main-header-big-size: 3.44rem !default;
$font-main-header-big-size-down-md: 2.5rem !default;
$font-main-header-big-size-down-sm: 2.5rem !default;
$font-main-header-big-margin-bottom: 0.8rem !default;
@mixin font-main-header-big {
  font-weight: 900;
  margin-bottom: $font-main-header-big-margin-bottom;
  font-size: $font-main-header-big-size;
  @include media-breakpoint-down(md) {
    font-size: $font-main-header-big-size-down-md;
  }
  @include media-breakpoint-down(sm) {
    font-size: $font-main-header-big-size-down-sm;
  }
}

// Font for subtitle below main title, typically <h3>
$font-main-subtitle-size: $font-size-mdlg !default;
$font-main-subtitle-size-down-sm: $font-size-sm !default;
@mixin font-subtitle {
  font-size: $font-main-subtitle-size;
  @include media-breakpoint-down(sm) {
    font-size: $font-main-subtitle-size-down-sm;
  }
}

// Button font
$font-main-button-size: $font-size-mdsm !default;
$font-main-button-size-down-sm: $font-size-vsm !default;
@mixin font-button {
  font-size: $font-main-button-size;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1rem;
  @include media-breakpoint-down(sm) {
    font-size: $font-main-button-size-down-sm;
  }
  &:hover {
    text-decoration: none;
  }
}

// Standard <p> font
$font-main-standard-size: $font-size-base !default;
$font-main-standard-size-down-md: $font-size-mdsm !default;
$font-main-standard-size-down-sm: $font-size-sm !default;
@mixin font-body-standard {
  font-size: $font-main-standard-size;
  @include media-breakpoint-down(md) {
    font-size: $font-main-standard-size-down-md;
  }
  @include media-breakpoint-down(sm) {
    font-size: $font-main-standard-size-down-sm;
  }
}

// Font for <a> links
@mixin font-links {
  @include font-body-standard;
}

@mixin text-transform($transform: none) {
  @if $transform == none {
    // we transform up only
    // if you have to transfer to none somewhere
    // then this is a but, please report
  } @else {
    text-transform: $transform;
  }
}

// Font for subtitle links
$font-subtitle-font-size: $font-size-sm !default;
$font-subtitle-font-weight: bolder !default;
$font-subtitle-letter-spacing: 1.4px !default;
$font-subtitle-line-height: 1.5 !default;
@mixin font-subtitle-small-link {
  font-size: $font-subtitle-font-size;
  letter-spacing: $font-subtitle-letter-spacing;
  line-height: $font-subtitle-line-height;
  font-weight: $font-subtitle-font-weight;
}

// Font for small box titles
$font-box-title-padding-bottom: 20px !default;
$font-box-title-font-small-title: 2rem !default;
$font-box-title-font-large-title: 3rem !default;
$font-box-title-line-height: 1.2 !default;
$font-box-title-max-lines: 2 !default;
@mixin font-small-box-title {
  @include font-main-header();
  width: 100%;
  margin-bottom: $font-box-title-padding-bottom;
  text-align: center;

  font-size: $font-box-title-font-small-title;
  display: block;
  display: -webkit-box;
  max-height: $font-box-title-line-height * $font-box-title-max-lines * $font-box-title-font-small-title;
  -webkit-line-clamp: $font-box-title-max-lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  @include media-breakpoint-up(xl) {
    font-size: $font-box-title-font-large-title;
    max-height: $font-box-title-line-height * $font-box-title-max-lines * $font-box-title-font-large-title;
  }
}
