@use '../../variables' as *;
@use '../../compat-tokens-mixins' as compatMixins;

.sky-theme-modern {
  .sky-font-body-default {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-body-m);
    font-weight: var(--sky-font-weight-body-m);
  }

  .sky-font-body-sm {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-body-s);
    font-weight: var(--sky-font-weight-body-s);
  }

  .sky-font-body-lg {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-body-l);
    font-weight: var(--sky-font-weight-body-l);
  }

  .sky-font-data-label {
    color: var(--sky-color-text-deemphasized);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-data_label);
    font-weight: var(--sky-font-weight-data_label);
  }

  .sky-font-field-label {
    color: var(--sky-color-text-deemphasized);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-data_label);
    font-weight: var(--sky-font-weight-data_label);
  }

  .sky-font-deemphasized {
    color: var(--sky-color-text-deemphasized);
    font-family: var(--sky-font-family-primary);
    font-style: var(--sky-font-style-deemphasized-style);
    font-weight: var(--sky-font-style-deemphasized-weight);
    font-size: inherit;
  }

  .sky-font-emphasized {
    font-family: var(--sky-font-family-primary);
    font-size: inherit;
    font-weight: var(--sky-font-weight-emphasized);
  }

  .sky-font-hint-text-s {
    color: var(--sky-color-text-deemphasized);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-hint-s);
    font-style: var(--sky-font-style-hint-s-style);
    font-weight: var(--sky-font-weight-hint-s);
    letter-spacing: var(--sky-font-letter_spacing-hint-s);
    line-height: var(--sky-font-line_height-hint-s);
  }

  .sky-font-hint-text-m {
    color: var(--sky-color-text-deemphasized);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-hint-m);
    font-style: var(--sky-font-style-hint-m-style);
    font-weight: var(--sky-font-weight-hint-m);
    line-height: var(--sky-font-line_height-hint-m);
  }

  .sky-font-display-1 {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-display-1);
    font-weight: var(--sky-font-weight-display-1);
  }

  .sky-font-display-2 {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-display-2);
    font-weight: var(--sky-font-weight-display-2);
  }

  .sky-font-display-3,
  .sky-headline {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-display-3);
    font-weight: var(--sky-font-weight-display-3);
  }

  .sky-font-display-4 {
    color: var(--sky-color-text-default);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-display-4);
    font-weight: var(--sky-font-weight-display-4);
  }
}

@include compatMixins.sky-modern-v2($encapsulate: false) {
  .sky-font-body-default {
    line-height: var(--sky-font-line_height-body-m);
  }

  .sky-font-body-sm {
    line-height: var(--sky-font-line_height-body-s);
  }

  .sky-font-body-lg {
    line-height: var(--sky-font-line_height-body-l);
  }

  .sky-font-data-label {
    line-height: var(--sky-font-line_height-data_label);
  }

  .sky-font-field-label {
    line-height: var(--sky-font-line_height-data_label);
  }

  .sky-font-display-1 {
    line-height: var(--sky-font-line_height-display-1);
  }

  .sky-font-display-2 {
    line-height: var(--sky-font-line_height-display-2);
  }

  .sky-font-display-3,
  .sky-headline {
    line-height: var(--sky-font-line_height-display-3);
  }

  .sky-font-display-4 {
    line-height: var(--sky-font-line_height-display-4);
  }
}
