/**
 * Responsize typography settings.
 *
 * Changes the typography to react responsively based on screen size.
 *
 * Set $enable-responsize-typography to activate.
 */

// Declare default variables.
$enable-responsive-typography: false !default;
$responsive-typography-base: $font-size-base !default;
$responsive-typography-sm: $responsive-typography-base * 1.1 !default;
$responsive-typography-md: $responsive-typography-base * 1.2 !default;
$responsive-typography-lg: $responsive-typography-base * 1.3 !default;
$responsive-typography-xl: $responsive-typography-base * 1.4 !default;

@if $enable-responsive-typography {
  html {
    @include media-breakpoint-up(sm) {
      font-size: $responsive-typography-sm;
    }

    @include media-breakpoint-up(md) {
      font-size: $responsive-typography-md;
    }

    @include media-breakpoint-up(lg) {
      font-size: $responsive-typography-lg;
    }

    @include media-breakpoint-up(xl) {
      font-size: $responsive-typography-xl;
    }

    font-size: $responsive-typography-base;
  }
}