@mixin el-typography {
  body {
    color: el-theme(text-basic-color);
    font-family: el-theme(text-paragraph-font-family);
    font-size: el-theme(text-paragraph-font-size);
    font-weight: el-theme(text-paragraph-font-weight);
    line-height: el-theme(text-paragraph-line-height);
  }

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: el-theme(text-basic-color);
  }

  @each $size in (1, 2, 3, 4, 5, 6) {
    h#{$size},
    .h#{$size} {
      font-size: el-theme(text-heading-#{$size}-font-size);
      font-family: el-theme(text-heading-#{$size}-font-family);
      font-weight: el-theme(text-heading-#{$size}-font-weight);
      line-height: el-theme(text-heading-#{$size}-line-height);
    }
  }

  .subtitle,
  .subtitle-2 {
    color: el-theme(text-basic-color);
  }

  .subtitle {
    font-family: el-theme(text-subtitle-font-family);
    font-size: el-theme(text-subtitle-font-size);
    font-weight: el-theme(text-subtitle-font-weight);
    line-height: el-theme(text-subtitle-line-height);
  }

  .subtitle-2 {
    font-family: el-theme(text-subtitle-2-font-family);
    font-size: el-theme(text-subtitle-2-font-size);
    font-weight: el-theme(text-subtitle-2-font-weight);
    line-height: el-theme(text-subtitle-2-line-height);
  }

  p,
  .paragraph {
    color: el-theme(text-basic-color);
    font-family: el-theme(text-paragraph-font-family);
    font-size: el-theme(text-paragraph-font-size);
    font-weight: el-theme(text-paragraph-font-weight);
    line-height: el-theme(text-paragraph-line-height);
  }

  .paragraph-2 {
    color: el-theme(text-basic-color);
    font-family: el-theme(text-paragraph-2-font-family);
    font-size: el-theme(text-paragraph-2-font-size);
    font-weight: el-theme(text-paragraph-2-font-weight);
    line-height: el-theme(text-paragraph-2-line-height);
  }

  a {
    color: el-theme(link-text-color);
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;

    &:focus {
      color: el-theme(link-text-focus-color);
    }

    &:hover {
      color: el-theme(link-text-hover-color);
    }

    .link-control,
    .link-control:hover {
      color: el-theme(text-control-color);
    }

    .link-alternate,
    .link-alternate:hover {
      color: el-theme(text-alternate-color);
    }
  }

  .label {
    color: el-theme(text-hint-color);
    font-family: el-theme(text-label-font-family);
    font-size: el-theme(text-label-font-size);
    font-weight: el-theme(text-label-font-weight);
    line-height: el-theme(text-label-line-height);
  }

  .caption {
    font-family: el-theme(text-caption-font-family);
    font-size: el-theme(text-caption-font-size);
    font-weight: el-theme(text-caption-font-weight);
    line-height: el-theme(text-caption-line-height);
  }

  .caption-2 {
    font-family: el-theme(text-caption-2-font-family);
    font-size: el-theme(text-caption-2-font-size);
    font-weight: el-theme(text-caption-2-font-weight);
    line-height: el-theme(text-caption-2-line-height);
  }

  .caption,
  .caption-2 {
    color: el-theme(text-hint-color);

    @each $status in el-get-statuses() {
      &.status-#{$status} {
        color: el-theme(text-#{$status}-color);
      }
    }
  }

  li {
    color: el-theme(list-item-text-color);
    font-family: el-theme(list-item-font-family);
    font-size: el-theme(list-item-font-size);
    font-weight: el-theme(list-item-font-weight);
    line-height: el-theme(list-item-line-height);
  }

  .text-basic {
    color: el-theme(text-basic-color);
  }
  .text-alternate {
    color: el-theme(text-alternate-color);
  }
  .text-control {
    color: el-theme(text-control-color);
  }
  .text-disabled {
    color: el-theme(text-disabled-color);
  }
  .text-hint {
    color: el-theme(text-hint-color);
  }

  @each $status in el-get-statuses() {
    .text-#{$status} {
      color: el-theme(color-#{$status}-default);
    }
  }
}