@import url("../index.scss");

.typography {
  &.text-heading-xl {
    font-family: theme(digitv2.fontFamily.rc);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.heading-xl.desktop);
    }

    @media (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.heading-xl.tablet);
    }

    @media (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.heading-xl.mobile);
    }
  }

  &.text-heading-l {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.heading-l.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.heading-l.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.heading-l.mobile);
    }
  }
  &.text-heading-m {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.heading-m.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.heading-m.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.heading-m.desktop);
    }
  }
  &.text-heading-s {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.heading-s.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.heading-s.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.heading-s.mobile);
    }
  }
  &.text-heading-xs {
    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.heading-xs.mobile);
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.bold);
      color: theme(digitv2.lightTheme.text-color-primary);
      line-height: theme(digitv2.lineHeight.normal);
    }
  }
  &.text-caption-l {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.medium);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.caption-l.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.caption-l.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.caption-l.mobile);
    }
  }

  &.text-caption-m {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.medium);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.caption-m.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.caption-m.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.caption-m.mobile);
    }
  }

  &.text-caption-s {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.medium);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.caption-s.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.caption-s.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.caption-s.desktop);
    }
  }
  &.text-body-l {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.regular);
    color: theme(digitv2.lightTheme.text-color-primary);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.body-l.desktop);
      line-height: theme(digitv2.lineHeight.line-height-body-l.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.body-l.tablet);
      line-height: theme(digitv2.lineHeight.line-height-body-l.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.body-l.mobile);
      line-height: theme(digitv2.lineHeight.line-height-body-l.mobile);
    }
  }
  &.text-body-s {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.regular);
    color: theme(digitv2.lightTheme.text-color-primary);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.body-s.desktop);
      line-height: theme(digitv2.lineHeight.line-height-body-s.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.body-s.tablet);
      line-height: theme(digitv2.lineHeight.line-height-body-s.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.body-s.mobile);
      line-height: theme(digitv2.lineHeight.line-height-body-s.mobile);
    }
  }
  &.text-body-xs {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.regular);
    color: theme(digitv2.lightTheme.text-color-primary);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.body-xs.desktop);
      line-height: theme(digitv2.lineHeight.line-height-body-xs.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.body-xs.tablet);
      line-height: theme(digitv2.lineHeight.line-height-body-xs.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.body-xs.mobile);
      line-height: theme(digitv2.lineHeight.line-height-body-xs.mobile);
    }
  }
  &.text-label {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.italic);
    font-weight: theme(digitv2.fontWeight.regular);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.label.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.label.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.label.mobile);
    }
  }
  &.text-link {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    color: theme(digitv2.lightTheme.text-color-primary);
    line-height: theme(digitv2.lineHeight.normal);
    text-decoration: theme(digitv2.textDecorationLine.underline);

    @media screen and (min-width: theme(digitv2.screens.desktop)) {
      font-size: theme(digitv2.fontSize.link.desktop);
    }
    @media screen and (min-width: theme(digitv2.screens.tablet)) {
      font-size: theme(digitv2.fontSize.link.tablet);
    }

    @media screen and (min-width: theme(digitv2.screens.mobile)) {
      font-size: theme(digitv2.fontSize.link.mobile);
    }
  }
}