h1, h2, h3, h4, h5, h6 {
  @extend %head;
}

@each $size, $items in get("element.head.size") {
  @each $head, $value in $items {
    $selector: if($size==medium, $head, $head + "." + $size);
    #{$selector} {
      @extend %#{$head}-#{$size};
    }
  }
}

p {
  @extend %p-medium;

  font-weight: 400;

  @each $size, $value in get("element.paragraph.size") {
    &.#{$size} {
      @extend %p-#{$size};
    }
  }
}

.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8 {
  @extend %gtypo;
}

@each $size, $items in get("element.g-typography.size") {
  @each $head, $value in $items {
    $selector: if($size==medium, $head, $head + "." + $size);
    .#{$selector} {
      @extend %#{$head}-#{$size};
    }
  }
}

@each $color, $value in get("color.list") {
  .text-#{"" + $color} {
    color: var(--#{$color});
  }
}
