/* TODO: find out if we can include this in tokens by default */
@supports (font-variation-settings: normal) {
  :root,
  [data-mollie-ui-theme] {
    --mollie-ui-font-family-brand: 'InterVariable', -apple-system,
      'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial',
      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  }
}

[class*='mollie-ui'] {
  box-sizing: border-box;
}

[data-mollie-ui-theme] {
  font-family: var(--mollie-ui-font-family-brand);
  font-weight: var(--mollie-ui-font-weight-regular);
  line-height: var(--mollie-ui-line-height-default);
  font-size: var(--mollie-ui-font-size-100);
  background: var(--mollie-ui-color-background-primary);
  color: var(--mollie-ui-color-typography-primary);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[class*='mollie-ui-typography-']:where([class*='-number']) {
  --mollie-ui-default-font-variant: lining-nums tabular-nums;
  --mollie-ui-default-letter-spacing: var(--mollie-ui-letter-spacing-dense);
}