// Font imports
@font-face {
  font-family: theinhardt-regular;
  src: url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Regular.woff2') format('woff2'),
  url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Regular.woff') format('woff');
  font-weight: regular;
  font-display: swap;
}
@font-face {
  font-family: theinhardt-medium;
  src: url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Medium.woff2') format('woff2'),
  url('~@highdigital/vuet/public/assets/storybook/fonts/Theinhardt-Medium.woff') format('woff');
  font-weight: medium;
  font-display: swap;
}

// Typography sizes
$typography-map: (
  "extra-small": var(--font-size-extra-small),
  "small": var(--font-size-small),
  "regular": var(--font-size-regular),
  "big": var(--font-size-big)
);
// Use it to set component font styles
@function _font(
  $element,
  $font-weight,
  $font-size,
  $line-height,
  $font-family
) {
  @return var(#{$element}-weight, $font-weight)
    var(#{$element}-size, $font-size) /
    var(#{$element}-line-height, $line-height)
    var(#{$element}-family, $font-family);
}
@mixin font($element, $font-weight, $font-size, $line-height, $font-family) {
  font: var(
    #{$element},
    _font($element, $font-weight, $font-size, $line-height, $font-family)
  );
}