@import "../settings/variables";

@mixin typography($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

// Aliases
@mixin font-tool-header {
  @include typography(20px, 700);
}

@mixin font-h1 {
  @include typography(30px, 200);
}

@mixin font-h2 {
  @include typography(16px, 500);
  text-transform: uppercase;
}

@mixin font-h3 {
  @include typography(15px, 500);
}

@mixin font-form-value {
  @include typography(13px, 400);
}

@mixin font-form-key {
  @include typography(13px, 700);
}

@mixin font-table-value--lg {
  @include typography(13px, 400);
}

@mixin font-table-header--lg {
  @include typography(13px, 700);
}

@mixin font-table-value--sm {
  @include typography(11px, 400);
}

@mixin font-table-header--sm {
  @include typography(11px, 700);
}

@mixin font-notation {
  @include typography(13px, 400);
  font-style: italic;
}

// Utility classes
.font-tool-header {
  @include font-tool-header;
}
.font-h1 {
  @include font-h1;
}
.font-h2 {
  @include font-h2;
}
.font-h3 {
  @include font-h3;
}
.font-form-value {
  @include font-form-value;
}
.font-form-key {
  @include font-form-key;
}
.font-table-value--lg {
  @include font-table-value--lg;
}
.font-table-header--lg {
  @include font-table-header--lg;
}
.font-table-value--sm {
  @include font-table-value--sm;
}
.font-table-header--sm {
  @include font-table-header--sm;
}
.font-notation {
  @include font-notation;
}