@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../common/mixins" as *;
@use "mixins" as *;

// adduse

.dx-theme-fluent-typography {
  background-color: $base-typography-bg;

  @include dx-base-typography();

  h1 {
    font-weight: 600;
    font-size: $fluent-h1-font-size;
  }

  h2 {
    font-weight: 600;
    font-size: $fluent-h2-font-size;
  }

  h3 {
    font-weight: 600;
    font-size: $fluent-h3-font-size;
  }

  h4 {
    font-weight: 600;
    font-size: $fluent-h4-font-size;
  }

  h5 {
    font-weight: 700;
    font-size: $fluent-h5-font-size;
  }

  h6 {
    font-weight: 500;
    font-size: $fluent-h6-font-size;
  }

  .dx-font-xl {
    font-size: $fluent-xl-font-size;
  }

  .dx-font-l {
    font-size: $fluent-l-font-size;
  }

  .dx-font-m {
    font-size: $fluent-m-font-size;
  }

  .dx-font-s {
    @include dx-s-font-mixin();
  }

  small,
  .dx-font-xs {
    font-size: $fluent-xs-font-size;
  }

  a {
    color: $typography-link-color;
  }
}