////
/// @group typography
////

/// Gets the global variable value for a provided typography style name. This
/// assumes that the global variable exists already.
///
/// @access private
/// @param {String} style - The typography style name to return a variable for
/// @return {Map} a map of the style properties from the global typography
/// variable.
@function rmd-typography-get-global-variable($style) {
  @if $style == 'headline-1' {
    @return $rmd-typography-styles-headline-1;
  } @else if $style == 'headline-2' {
    @return $rmd-typography-styles-headline-2;
  } @else if $style == 'headline-3' {
    @return $rmd-typography-styles-headline-3;
  } @else if $style == 'headline-4' {
    @return $rmd-typography-styles-headline-4;
  } @else if $style == 'headline-5' {
    @return $rmd-typography-styles-headline-5;
  } @else if $style == 'headline-6' {
    @return $rmd-typography-styles-headline-6;
  } @else if $style == 'subtitle-1' {
    @return $rmd-typography-styles-subtitle-1;
  } @else if $style == 'subtitle-2' {
    @return $rmd-typography-styles-subtitle-2;
  } @else if $style == 'body-1' {
    @return $rmd-typography-styles-body-1;
  } @else if $style == 'body-2' {
    @return $rmd-typography-styles-body-2;
  } @else if $style == 'caption' {
    @return $rmd-typography-styles-caption;
  } @else if $style == 'button' {
    @return $rmd-typography-styles-button;
  } @else if $style == 'overline' {
    @return $rmd-typography-styles-overline;
  }

  @return ();
}

/// A utility function to help merge typography styles together with global
/// definition overrides.
///
/// @access private
/// @param {Map} base-styles - The base styles to merge with
/// @param {Map} additional-styles - Any additional styles to merge with
/// @return {Map} a Map of the base-styles and additional styles merged together
@function rmd-typography-set-styles($base-styles, $additional-styles) {
  @each $style, $style-props in $additional-styles {
    $style-props: map-merge($base-styles, $style-props);

    @if global-variable-exists(rmd-typography-styles-#{$style}) {
      $style-props: map-merge($style-props, rmd-typography-get-global-variable(#{$style}));
    }

    $additional-styles: map-merge($additional-styles, (#{$style}: $style-props));
  }

  @return $additional-styles;
}

/// A small utility function to get the letter spacing based on tracking and
/// font-size
///
/// @access private
/// @param {Number} tracking - The tracking to use
/// @param {Number} font-size - The font size to use
/// @return {Number} the letter spacing value in em
@function rmd-typography-get-letter-spacing($tracking, $font-size) {
  @return $tracking / ($font-size * 16) * 1em;
}

/// The font family to use throughout the entire application.
/// @type String
$rmd-typography-font-family: Roboto, sans-serif !default;

/// The max length a line of text can be on mobile devices.
/// @type Number
$rmd-typography-mobile-max-line-length: 17em !default;

/// The max length a line of text can be on larger screens (mostly desktops or
/// landscape tablets).
/// @type Number
$rmd-typography-desktop-max-line-length: 40em !default;

/// The device width that should be used to swap between the mobile and desktop
/// text container widths.
/// @type Number
$rmd-typography-text-container-breakpoint: 37.5rem !default;

/// The base styles for typography.
/// @type Map
$rmd-typography-base: (
  font-family: $rmd-typography-font-family,
  -moz-osx-font-smoothing: grayscale,
  -webkit-font-smoothing: antialiased,
);

/// The thin font weight to use.
/// @type Number
$rmd-typography-thin: 100 !default;

/// The light font weight to use.
/// @type Number
$rmd-typography-light: 300 !default;

/// The regular font weight to use.
/// @type Number
$rmd-typography-regular: 400 !default;

/// The medium font weight to use.
/// @type Number
$rmd-typography-medium: 500 !default;

/// The bold font weight to use.
/// @type Number
$rmd-typography-bold: 700 !default;

/// The semi-bold font weight to use.
/// @type Number
$rmd-typography-semi-bold: 800 !default;

/// The darkest font weight to use.
/// @type Number
$rmd-typography-black: 900 !default;

/// A Map of all the font weights.
///
/// @type Map
/// @prop {Number} thin [$rmd-typography-thin] - The thin font weight value.
/// @prop {Number} light [$rmd-typography-light] - The light font weight value.
/// @prop {Number} regular [$rmd-typography-regular] - The regular font weight
/// value.
/// @prop {Number} medium [$rmd-typography-medium] - The medium font weight
/// value.
/// @prop {Number} bold [$rmd-typography-bold] - The bold font weight value.
/// @prop {Number} semi-bold [$rmd-typography-semi-bold] - The semi-bold font
/// weight value.
/// @prop {Number} black [$rmd-typography-black] - The black font weight value.
$rmd-typography-font-weights: (
  thin: $rmd-typography-thin,
  light: $rmd-typography-light,
  regular: $rmd-typography-regular,
  medium: $rmd-typography-medium,
  bold: $rmd-typography-bold,
  semi-bold: $rmd-typography-semi-bold,
  black: $rmd-typography-black,
) !default;

/// A list of the "default" font weights that are normally included within an
/// app.  This is really only used for hosting fonts on your own server.
///
/// Each value in this should be one of the keys in
/// `$rmd-typography-font-weights`.
///
/// @type List
$rmd-typography-default-font-weights: light regular medium bold !default;

/// A map of colors that should be added for the `Text` component. If you aren't
/// going to use the `color` prop on the `Text` component, set this value to an
/// empty map to reduce your bundle size by a slight amount.
/// @type Map
$rmd-typography-colors: (
  secondary: text-secondary-on-background,
  hint: text-hint-on-background,
  theme-primary: primary,
  theme-secondary: secondary,
  theme-warning: warning,
  theme-error: error,
) !default;

/// A list of `text-align` styles to generate. If you don't want the helper
/// classes for text alignment, set this to an empty list to reduce your bundle
/// size by a slight amount.
/// @type List
$rmd-typography-alignments: left center right !default;

/// A list of `text-decoration` to apply. If you don't want the helper classes
/// for text decoration, set this to an empty list to reduce your bundle size by
/// a slight amount.
/// @type List
$rmd-typography-decorations: underline overline line-through !default;

/// A list of `text-transform` to apply. If you don't want the helper classes
/// for text transformation, set this to an empty list to reduce your bundle
/// size by a slight amount.
/// @type List
$rmd-typography-transforms: capitalize uppercase lowercase !default;

/// A list of `font-style` to apply. If you don't want the helper classes for
/// the font styles, set this to an empty list to reduce your bundle size by a
/// slight amount.
/// @type List
$rmd-typography-font-styles: normal italic oblique !default;

/// A Map of font weights to a font file suffix for a Google font.
///
/// @type Map
/// @prop {String} thin ['-Thin'] - The thin font weight suffix.
/// @prop {String} light ['-Light'] - The light font weight suffix.
/// @prop {String} regular ['-Regular'] - The regular font weight suffix.
/// @prop {String} medium ['-Medium'] - The medium font weight suffix.
/// @prop {String} bold ['-Bold'] - The bold font weight suffix.
/// @prop {String} semi-bold ['-SemiBold'] - The semi-bold font weight suffix.
/// @prop {String} black ['-Black'] - The black font weight suffix.
$rmd-typography-google-font-weight-suffixes: (
  thin: '-Thin',
  light: '-Light',
  regular: '-Regular',
  medium: '-Medium',
  bold: '-Bold',
  semi-bold: '-SemiBold',
  black: '-Black',
) !default;

/// A Map of all the typography styles in react-md
///
/// @type Map
/// @prop {Map} headline-1 - The styles for a headline-1
/// @prop {Map} headline-2 - The styles for a headline-2
/// @prop {Map} headline-3 - The styles for a headline-3
/// @prop {Map} headline-4 - The styles for a headline-4
/// @prop {Map} headline-5 - The styles for a headline-5
/// @prop {Map} headline-6 - The styles for a headline-6
/// @prop {Map} subtitle-1 - The styles for a subtitle-1
/// @prop {Map} subtitle-2 - The styles for a subtitle-2
/// @prop {Map} body-1 - The styles for a body-1
/// @prop {Map} body-2 - The styles for a body-2
/// @prop {Map} button - The styles for a button
/// @prop {Map} caption - The styles for a caption
/// @prop {Map} overline - The styles for a overline
$rmd-typography-styles: rmd-typography-set-styles(
  $rmd-typography-base,
  (
    headline-1: (
      font-size: 6rem,
      line-height: 6rem,
      font-weight: map-get($rmd-typography-font-weights, light),
      letter-spacing: rmd-typography-get-letter-spacing(-1.5, 6),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-2: (
      font-size: 3.75rem,
      line-height: 3.75rem,
      font-weight: map-get($rmd-typography-font-weights, light),
      letter-spacing: rmd-typography-get-letter-spacing(-0.5, 3.75),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-3: (
      font-size: 3rem,
      line-height: 3.125rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: normal,
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-4: (
      font-size: 2.125rem,
      line-height: 2.5rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.25, 2.125),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-5: (
      font-size: 1.5rem,
      line-height: 2rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: normal,
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-6: (
      font-size: 1.25rem,
      line-height: 2rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(0.25, 1.25),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    subtitle-1: (
      font-size: 1rem,
      line-height: 1.75rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.15, 1),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    subtitle-2: (
      font-size: 0.875rem,
      line-height: 1.375rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(0.1, 0.875),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    body-1: (
      font-size: 1rem,
      line-height: 1.5rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.5, 0.875),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    body-2: (
      font-size: 0.875rem,
      line-height: 1.25rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.25, 0.875),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    caption: (
      font-size: 0.75rem,
      line-height: 1.25rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.4, 0.75),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    button: (
      font-size: 0.875rem,
      line-height: 2.25rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(1.25, 0.875),
      text-decoration: none,
      text-transform: uppercase,
    ),
    overline: (
      font-size: 0.75rem,
      line-height: 2rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(2, 0.75),
      text-decoration: none,
      text-transform: uppercase,
    ),
  )
);

/// A Map of all the "themeable" parts of the typography package. Every key in
/// this map will be used to create a css variable to dynamically update the
/// values of the icon as needed.
/// @type Map
$rmd-typography-theme-values: (
  line-width: $rmd-typography-desktop-max-line-length,
  mobile-line-width: $rmd-typography-mobile-max-line-length,
  desktop-line-width: $rmd-typography-desktop-max-line-length,
) !default;