// compile
@import "variables/typography";

:root {
  --md-base-font: 'Roboto', 'Noto';
  --md-font-stack: var(--md-base-font), sans-serif;

  @each $style, $size, $weight, $spacing, $line-height, $color in $md-typography {
    --md-#{$style}-font-size: #{$size}px;
    --md-#{$style}-font-weight: #{$weight};
    --md-#{$style}-letter-spacing: #{$spacing}px;
    --md-#{$style}-line-height: #{$line-height}px;
  }
}

@each $style, $size, $weight, $spacing, $line-height, $color in $md-typography {
  .md-#{$style} {
    margin: 0 0 var(--md-side-margin) 0;
    font-family: var(--md-font-stack);
    font-size: var(--md-#{$style}-font-size);
    font-weight: var(--md-#{$style}-font-weight);
    letter-spacing: var(--md-#{$style}-letter-spacing);
    line-height: var(--md-#{$style}-line-height);
    color: var(--md-#{$color}-text);
  }
}

.md-button,
.md-flat-button,
.md-raised-button,
.md-tab { text-transform: uppercase; }