// TODO: Temporary, remove for Typography component

h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  clear: both;

  margin: 0 0 0.834em;

  font-family: var(--fontFamily--headline);
    font-size: var(--fontSize--headline-h1);
    font-weight: var(--fontWeight--headline-h1);
    line-height: var(--lineHeight--headline-h1);
    color: rgb(var(--foreground--blue-medium-default--light));
    letter-spacing: var(--letterSpacing--headline-h1);

  strong {
      font-weight: var(--fontWeight--headline-h1);
      color: rgb(var(--foreground--green-medium-default--light));
  }

  &:nth-child(n+2) {
      margin-top: 0.834em;
  }

  @media @screen-sm {
    font-family: var(--fontFamily--headline);
    font-size: var(--fontSize--headline-h1--sm);
    font-weight: var(--fontWeight--headline-h1--sm);
    line-height: var(--lineHeight--headline-h1--sm);
    letter-spacing: var(--letterSpacing--headline-h1--sm);
  }
}

h2 {
  overflow: hidden;

  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h2);
  font-weight: var(--fontWeight--headline-h2);
  line-height: var(--lineHeight--headline-h2);
  color: rgb(var(--foreground--blue-medium-default--light));
  letter-spacing: var(--letterSpacing--headline-h2);

  &::after {
      content: "";

      display: inline-block;

      width: 100%;
      margin-right: -100%;
      margin-left: 15px;

      vertical-align: middle;

      border-bottom: 1px solid rgb(var(--border--neutral-low-default--light));
  }

  &:nth-child(n+2) {
      margin-top: 1.5em;
  }
}

h3 {
  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h3);
  font-weight: var(--fontWeight--headline-h3);
  line-height: var(--lineHeight--headline-h3);
  color: rgb(var(--foreground--neutral-full-default--light));
  letter-spacing: var(--letterSpacing--headline-h3);

  &:nth-child(n+2) {
      margin-top: 1.7em;
  }
}

h4 {
  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h4);
  font-weight: var(--fontWeight--headline-h4);
  line-height: var(--lineHeight--headline-h4);
  color: rgb(var(--foreground--neutral-full-default--light));
  letter-spacing: var(--letterSpacing--headline-h4);

  &:nth-child(n+2) {
      margin-top: 0.834em;
  }
}

h5,
h6 {
  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h5);
  font-weight: var(--fontWeight--headline-h5);
  line-height: var(--lineHeight--headline-h5);
  color: rgb(var(--foreground--neutral-full-default--light));
  letter-spacing: var(--letterSpacing--headline-h5);

  &:nth-child(n+2) {
      margin-top: 1em;
  }
}