@use "../../base/font" as ft;
@use "../../base/mixins/meta-class" as mc;
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");

@include mc.meta("qo-font-family-primary", (font-family: ft.$font-family-primary));
@include mc.meta("qo-font-family-secondary", (font-family: ft.$font-family-secondary));

@include mc.meta("qo-font-xxs", (font-size: ft.$font-size-xxs, line-height: ft.$line-height-xxs));
@include mc.meta("qo-font-xs", (font-size: ft.$font-size-xs, line-height: ft.$line-height-xs));
@include mc.meta("qo-font-sm", (font-size: ft.$font-size-sm, line-height: ft.$line-height-sm));
@include mc.meta("qo-font-md", (font-size: ft.$font-size-md, line-height: ft.$line-height-md));
@include mc.meta("qo-font-lg", (font-size: ft.$font-size-lg, line-height: ft.$line-height-lg));
@include mc.meta("qo-font-xl", (font-size: ft.$font-size-xl, line-height: ft.$line-height-xl));
@include mc.meta("qo-font-xxl", (font-size: ft.$font-size-xxl, line-height: ft.$line-height-xxl));

@include mc.meta("qo-font-weight-light", (font-weight: ft.$font-weight-light));
@include mc.meta("qo-font-weight-regular", (font-weight: ft.$font-weight-regular));
@include mc.meta("qo-font-weight-medium", (font-weight: ft.$font-weight-medium));
@include mc.meta("qo-font-weight-semibold", (font-weight: ft.$font-weight-semibold));
@include mc.meta("qo-font-weight-bold", (font-weight: ft.$font-weight-bold));
@include mc.meta("qo-font-weight-extrabold", (font-weight: ft.$font-weight-extrabold));

.qo-validation {
  font-size: ft.$font-size-md;
  line-height: ft.$line-height-md;
  font-weight: ft.$font-weight-light;
  margin-top: 2px;
}

h4 {
  font-size: ft.$font-size-md;
  line-height: ft.$line-height-md;
  font-family: ft.$font-family-primary;
  font-weight: ft.$font-weight-medium;
}