/*
 * Typography
 *
 * The font-family properties are defined in the properties.scss file, like:
 * --sb-font-family-default:
 *
 */

// Font usage
.dnb-typo-regular {
  font-family: var(--sb-font-family-default);
  font-weight: normal;
  font-style: normal;
}

.dnb-typo-medium {
  font-family: var(--sb-font-family-default);
  font-weight: var(--sb-font-weight-medium);
  font-style: normal;
}

.dnb-typo-bold {
  font-family: var(--sb-font-family-default);
  font-weight: var(--sb-font-weight-bold);
  font-style: normal;
}

$fonts-path: '../../../../assets/fonts/sbanken' !default;

// Maison
@font-face {
  font-family: MaisonNeueHeadings;
  src: url('#{$fonts-path}/MaisonNeue.woff2'),
    url('#{$fonts-path}/MaisonNeue.woff'),
    url('#{$fonts-path}/MaisonNeue.woff2');
  font-weight: normal; // have to be the same as: --sb-font-weight-regular
  font-style: normal;
  font-display: fallback;
}

// Std and Regular
@font-face {
  font-family: Roboto;
  src: url('#{$fonts-path}/Roboto-Regular.woff2'),
    url('#{$fonts-path}/Roboto-Regular.woff'),
    url('#{$fonts-path}/Roboto-Regular.ttf');
  font-weight: normal; // have to be the same as: --sb-font-weight-regular
  font-style: normal;
  font-display: fallback;
}

// Medium
@font-face {
  font-family: Roboto;
  src: url('#{$fonts-path}/Roboto-Medium.woff2'),
    url('#{$fonts-path}/Roboto-Medium.woff'),
    url('#{$fonts-path}/Roboto-Medium.ttf');
  font-weight: 500; // have to be the same as: --sb-font-weight-medium
  font-style: normal;
  font-display: fallback;
}

// Bold
@font-face {
  font-family: Roboto;
  src: url('#{$fonts-path}/Roboto-Bold.woff2'),
    url('#{$fonts-path}/Roboto-Bold.woff'),
    url('#{$fonts-path}/Roboto-Bold.ttf');
  font-weight: 700; // have to be the same as: --sb-font-weight-bold
  font-style: normal;
  font-display: fallback;
}