// **************************
// Typography
// **************************
@mixin mui-text($mui-name) {
  $mui-styles: map-get($mui-mui-text-styles, $mui-name);

  font-weight: map-get($mui-styles, "font-weight");
  font-size: map-get($mui-styles, "font-size");
  line-height: map-get($mui-styles, "line-height");

  @if $mui-name == "button" {
    text-transform: uppercase;
  }
}


$mui-mui-text-styles: (
  "display4": (
    "font-weight": 300,
    "font-size": mui-rem(112px),
    "line-height": mui-rem(112px)
  ),
  "display3": (
    "font-weight": 400,
    "font-size": mui-rem(56px),
    "line-height": mui-rem(56px)
  ),
  "display2": (
    "font-weight": 400,
    "font-size": mui-rem(45px),
    "line-height": mui-rem(48px)
  ),
  "display1": (
    "font-weight": 400,
    "font-size": mui-rem(34px),
    "line-height": mui-rem(40px)
  ),
  "headline": (
    "font-weight": 400,
    "font-size": mui-rem(24px),
    "line-height": mui-rem(32px)
  ),
  "title": (
    "font-weight": 400,
    "font-size": mui-rem(20px),
    "line-height": mui-rem(28px)
  ),
  "subhead": (
    "font-weight": 400,
    "font-size": mui-rem(16px),
    "line-height": mui-rem(24px)
  ),
  "body2": (
    "font-weight": 500,
    "font-size": mui-rem(14px),
    "line-height": mui-rem(24px)
  ),
  "body1": (
    "font-weight": 400,
    "font-size": mui-rem(14px),
    "line-height": mui-rem(20px)
  ),
  "caption": (
    "font-weight": 400,
    "font-size": mui-rem(12px),
    "line-height": mui-rem(16px)
  ),
  "menu": (
    "font-weight": 500,
    "font-size": mui-rem(13px),
    "line-height": mui-rem(17px)
  ),
  "button": (
    "font-weight": 500,
    "font-size": mui-rem(14px),
    "line-height": mui-rem(18px)
  )
);