@use 'jass_settings';
@use 'typography_settings';
@use "sass:math";

$o: null;
@if typography_settings.$override == yes {
  $o: !important;
}

$c: null;
@if typography_settings.$enable-child-selectors == yes {
  $c: jass_settings.$child-selector-extension;
}

.font-family-, .ff- {
  &monospace, &ms      { font-family: monospace $o;     &#{$c} { @extend .ff-ms; } }
  &sans-serif, &sf     { font-family: sans-serif $o;    &#{$c} { @extend .ff-sf; } }
  &serif, &s           { font-family: serif $o;         &#{$c} { @extend .ff-s; } }
  &cursive, &c         { font-family: cursive $o;       &#{$c} { @extend .ff-c; } }
  &fantasy, &fy        { font-family: fantasy $o;       &#{$c} { @extend .ff-fy; } }
  &system-ui, &sys     { font-family: system-ui $o;     &#{$c} { @extend .ff-sys; } }
  &ui-serif, &us       { font-family: ui-serif $o;      &#{$c} { @extend .ff-us; } }
  &ui-sans-serif, &usf { font-family: ui-sans-serif $o; &#{$c} { @extend .ff-usf; } }
  &ui-monospace, &um   { font-family: ui-monospace $o;  &#{$c} { @extend .ff-um; } }
  &ui-rounded, &ur     { font-family: ui-rounded $o;    &#{$c} { @extend .ff-ur; } }
  &emoji, &e           { font-family: emoji $o;         &#{$c} { @extend .ff-e; } }
  &math, &mt           { font-family: math $o;          &#{$c} { @extend .ff-mt; } }
  &fangsong, &fn       { font-family: fangsong $o;      &#{$c} { @extend .ff-fn; } }
  &inherit, &ih        { font-family: inherit $o;       &#{$c} { @extend .ff-ih; } }
}

@each $font-family-type, $font-families in typography_settings.$fonts {
  $i: 1;
  @each $ff in $font-families {
    @if $ff != none {
      @font-face {
        font-family: #{$ff};
        src: url('../fonts/#{$ff}.eot');
        src: url('../fonts/#{$ff}.eot') format('embedded-opentype'),
        url('../fonts/#{$ff}.woff2') format('woff2'),
        url('../fonts/#{$ff}.woff') format('woff'),
        url('../fonts/#{$ff}.ttf') format('truetype');
        font-style: normal;
      }
      .ff-#{to-lower-case(#{$ff})} {font-family: "#{$ff}", #{$font-family-type} !important;}
    }
  }
  $i: $i + 1;
}

@if typography_settings.$font-size-unit == px {
  @each $fsz in typography_settings.$font-sizes-px {
    .font-size-#{$fsz}, .fz-#{$fsz} {
      $v: $fsz + 0px;
      font-size: $v $o;

      &#{$c} {
        @extend .fz-#{$fsz};
      }
    }
  }
} @else if typography_settings.$font-size-unit == em {
  @each $fsz in typography_settings.$font-sizes-px {
    .font-size-#{$fsz}, .fz-#{$fsz} {
      $v: $fsz + 0em;
      font-size: $v $o;

      &#{$c} {
        @extend .fz-#{$fsz};
      }
    }
  }
}

.font-size-, .fz- {
  &smaller, &smr { font-size: smaller $o;  &#{$c} { @extend .fz-smr; } }
  &larger, &lgr  { font-size: larger $o;   &#{$c} { @extend .fz-lgr; } }
  &-inherit, &ih { font-size: inherit $o;  &#{$c} { @extend .fz-ih; } }
}

$font-weights-normal-fallback: 100,200,300,400,500;
$font-weights-bold-fallback: 600,700,800,900;

@each $fwt in $font-weights-normal-fallback {
.font-weight-#{$fwt}, .fw-#{$fwt} { font-weight: normal $o; font-weight: #{$fwt} $o; &#{$c} { @extend .fw-#{$fwt}; } }
}
@each $fwt in $font-weights-bold-fallback {
.font-weight-#{$fwt}, .fw-#{$fwt} { font-weight: bold $o; font-weight: #{$fwt} $o; &#{$c} { @extend .fw-#{$fwt}; } }
}
.font-weight-, .fw- {
 &lighter, &lr  { font-weight: lighter $o; &#{$c} { @extend .fw-lr; } }
 &bolder, &br   { font-weight: bolder $o;  &#{$c} { @extend .fw-br; } }
 &inherit, &ih  { font-weight: inherit $o; &#{$c} { @extend .fw-ih; } }
}

.font-style-, .fs- {
  &normal, &n   { font-style: normal $o;  &#{$c} { @extend .fs-n; } }
  &italic, &i   { font-style: italic $o;  &#{$c} { @extend .fs-i; } }
  &oblique, &o  { font-style: oblique $o; &#{$c} { @extend .fs-o; } }
  &inherit, &ih { font-style: inherit $o; &#{$c} { @extend .fs-ih; } }
}

.font-variant-, .fv- {
  &normal, &n          { font-variant: normal $o;                     &#{$c} { @extend .fv-n; } }
  &no-common-liga, &nl { font-variant: no-common-ligatures proportional-nums $o; &#{$c} { @extend .fv-nl; } }
  &slashed-zero, &sz   { font-variant-numeric: slashed-zero $o;       &#{$c} { @extend .fv-sz; } }
  &small-caps, &sc     { font-variant: small-caps $o;                 &#{$c} { @extend .fv-sc; } }
  &inherit, &ih        { font-variant: inherit $o;                    &#{$c} { @extend .fv-ih; } }
}

@each $ls in typography_settings.$letter-spacings-px {
  .letter-spacing-#{$ls}px, .ls-#{$ls}px {
    $v: $ls + 0px;
    letter-spacing: $v$o;
    &#{$c} { @extend .ls-#{$ls}px; }
  }
}

@each $ls in typography_settings.$letter-spacings-em {
  .letter-spacing-00#{$ls}em, .ls-00#{$ls}em {
    $v: math.div($ls, 100) + 0em;
    letter-spacing: $v$o;
    &#{$c} { @extend .ls-00#{$ls}em; }
  }
}

.letter-spacing-inherit, .ls-ih { letter-spacing: inherit $o; &#{$c} { @extend .ls-ih; } }

$i: 1;
@each $lh in typography_settings.$line-heights {
  .line-height-#{$i}, .lh-#{$i} {
    $v: $lh + 0em;
    line-height: $v$o;
    &#{$c} { @extend .lh-#{$i}; }
  }
  $i: $i + 1;
}

.text-transform-, .tt- {
  &none, &n       { text-transform: none $o;           &#{$c} { @extend .tt-n; } }
  &cap, &c        { text-transform: capitalize $o;     &#{$c} { @extend .tt-c; } }
  &upper, &u      { text-transform: uppercase $o;      &#{$c} { @extend .tt-u; } }
  &lower, &l      { text-transform: lowercase $o;      &#{$c} { @extend .tt-l; } }
  &fullwidth, &fw { text-transform: full-width $o;     &#{$c} { @extend .tt-fw; } }
  &fullsize, &fs  { text-transform: full-size-kana $o; &#{$c} { @extend .tt-fs; } }
  &inherit, &ih   { text-transform: inherit $o;        &#{$c} { @extend .tt-ih; } }
}

.text-decoration-, .td- {
  &none, &n          { text-decoration: none $o;         &#{$c} { @extend .td-n; } }
  &underline, &u     { text-decoration: underline $o;    &#{$c} { @extend .td-u; } }
  &overline, &o      { text-decoration: overline $o;     &#{$c} { @extend .td-o; } }
  &line-through, &l  { text-decoration: line-through $o; &#{$c} { @extend .td-l; } }
  &wavy, &w          { text-decoration: wavy $o;         &#{$c} { @extend .td-w; } }
  &dotted, &d        { text-decoration: dotted $o;       &#{$c} { @extend .td-d; } }
  &double, &b        { text-decoration: double $o;       &#{$c} { @extend .td-b; } }
  &inherit, &ih      { text-decoration: inherit $o;      &#{$c} { @extend .td-ih; } }
}

.text-align-left, .ta-l {text-align: left $o;       &#{$c} { @extend .ta-l; } }
.text-align-right, .ta-r {text-align: right $o;     &#{$c} { @extend .ta-r; } }
.text-align-center, .ta-c {text-align: center $o;   &#{$c} { @extend .ta-c; } }
.text-align-inherit, .ta-ih {text-align: center $o; &#{$c} { @extend .ta-ih; } }
