// Override for element level styles in global/heading.less
.typography::after {
  content: none;
}

.typography__headline1 {
  margin: 0 0 0.834em;

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

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

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

  @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);
  }
}

.typography__headline2 {
  margin: 0 0 0.5em;

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

  // TODO: This is a hack to override global h2 divider line
  &::after {
    visibility: hidden;
  }

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

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

.typography__headline3 {
  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h3);
  font-weight: var(--fontWeight--headline-h3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  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;
  }

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

.typography__headline4 {
  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h4);
  font-weight: var(--fontWeight--headline-h4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  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;
  }

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

.typography__headline5 {
  margin: 0 0 0.5em;

  font-family: var(--fontFamily--headline);
  font-size: var(--fontSize--headline-h5);
  font-weight: var(--fontWeight--headline-h5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  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;
  }

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

.typography__bodyCopyS {
  max-width: 826px;
  margin: 0 0 1.5em;

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

.typography__bodyCopyS strong,
.typography__bodyCopySB {
  max-width: 826px;

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

.typography__bodyCopyM {
  max-width: 826px;
  margin: 0 0 1.5em;

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

.typography__bodyCopyM strong,
.typography__bodyCopyMB {
  max-width: 826px;

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

.typography__bodyCopyL {
  max-width: 826px;
  margin: 0 0 1.5em;

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

.typography__bodyCopyL strong,
.typography__bodyCopyLB {
  max-width: 826px;

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

.typography--left {
  text-align: left;
}

.typography--center {
  text-align: center;
}

.typography--right {
  text-align: right;
}

.typography--primary {
  color: rgb(var(--foreground--neutral-full-default--light));
}
.typography--secondary {
  color: rgb(var(--foreground--neutral-high-default--light));
}
.typography--tertiary {
  color: rgb(var(--foreground--neutral-medium-default--light));
}
.typography--inverted {
  color: rgb(var(--foreground--neutral-full-default--dark));
}

.typography--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typography--divider {
  overflow: hidden;

  &::after {
    content: '';

    display: inline-block;

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

    vertical-align: middle;

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