@use '../variables' as variables;

@mixin typography() {
  [data-unitone-layout~="-root\:typography"] {
    font-size: #{ variables.$root-font-size };
  }

  [data-unitone-layout~="-typography"],
  [data-unitone-layout~="-typography\:em"],
  [data-unitone-layout~="-typography\:rem"] {
    @include variables.typography();
  }

  [data-unitone-layout~="-typography\:em"] {
    @include variables.typography-em();
  }

  [data-unitone-layout~="-fluid-typography"] {
    @include variables.fluid-typography();
  }
}