@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';

$families: 'sans', 'light', 'link', 'crossed-out', 'mono';
$purposes: 'display', 'headline', 'title', 'label', 'body';
$sizes: 's', 'm', 'l';

.typography {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0;

  overflow-wrap: break-word;

  @each $family in $families {
    &[data-family='#{$family}'] {
      @each $purpose in $purposes {
        &[data-purpose='#{$purpose}'] {
          @each $size in $sizes {
            &[data-size='#{$size}'] {
              @include styles-theme-variables.composite-var(styles-theme-variables.$theme-variables, $family, $purpose, $size)
            }
          }
        }
      }
    }
  }
}