@use "sass:map";
@use "sass:meta";
@use "../lib/mixin";
@use "../settings";

/*
Font size

The font-size module.

Weight: -87

Style guide: #{settings.$util-prefix}.font-size
*/

/*
Modifiers

The font-size modifiers .
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--font-size-xsmall`.

Weight: -100

Markup: <p class="#{settings.$prefix}-text  {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="#{settings.$prefix}-text  {{modifier_class}}">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>

#{settings.$util-prefix}--font-size-xsmall - Extra small font size.
#{settings.$util-prefix}--font-size-small - Small font size.
#{settings.$util-prefix}--font-size-medium - Medium font size.
#{settings.$util-prefix}--font-size-large - Large font size.
#{settings.$util-prefix}--font-size-xlarge - Extra large font size.
#{settings.$util-prefix}--font-size-2xlarge - 2 extra large font size.
#{settings.$util-prefix}--font-size-3xlarge - 3 extra large font size.
#{settings.$util-prefix}--font-size-4xlarge - 4 extra large font size.

Style guide: #{settings.$util-prefix}.font-size.builtin
*/
.#{settings.$util-prefix}--font-size {
  $pkg: settings.$pkg;
  $presets: settings.$font-size-presets;

  @each $name, $font-size in $presets {
    &-#{$name} {
      @include mixin.by-breakpoints() {
        --font-size: var(--#{$pkg}-font-size-#{$name});

        font-size: var(--font-size);
      }
    }
  }
}