// base
@use '../fontsize';
@use 'sass:string';
@use '../weight';
@use '../lineheight';
@import 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap';

// font family
@mixin font-family {
  font-family: figtree, arial, sans-serif;
}

// ============================================================
// Public mixins
// ============================================================

// font title, BASE
@mixin font-title($suffix: '') {
  @include font-family;

  font-size: -get-title-font-size($suffix);
  text-transform: -get-text-transform($suffix);
  font-weight: weight.$semibold;
}

// font subtitle, base
@mixin font-subtitle($suffix: '') {
  @include font-family;

  font-size: -get-subtitle-font-size($suffix);
  text-transform: -get-text-transform($suffix);
  font-weight: weight.$medium;
}

// font body
@mixin font-body($suffix: '') {
  @include font-family;

  font-size: -get-body-font-size($suffix);
  font-weight: weight.$regular;
}

// ============================================================
// Private helper functions: compute CSS values via functions.
// Keeps @each loops out of mixins to avoid mixed-decls warnings,
// so that we don't need to worry about css nest {} sequence issues.
// ============================================================

@function -get-title-font-size($suffix) {
  $temp-font-size: fontsize.$s16;
  $suffixes: string.split($suffix, '-');

  @each $s in $suffixes {
    @if $s == 'xxxlarge' {
      $temp-font-size: fontsize.$s64;
    } @else if $s == 'xxlarge' {
      $temp-font-size: fontsize.$s48;
    } @else if $s == 'xlarge' {
      $temp-font-size: fontsize.$s32;
    } @else if $s == 'large' {
      $temp-font-size: fontsize.$s24;
    } @else if $s == 'medium' {
      $temp-font-size: fontsize.$s20;
    } @else if $s == 'small' {
      $temp-font-size: fontsize.$s14;
    } @else if $s == 'xsmall' {
      $temp-font-size: fontsize.$s12;
    } @else if $s == 'xxsmall' {
      $temp-font-size: fontsize.$s10;
    } @else if $s == 'xxxsmall' {
      $temp-font-size: fontsize.$s8;
    }
  }

  @return $temp-font-size;
}

@function -get-subtitle-font-size($suffix) {
  $temp-font-size: fontsize.$s14;
  $suffixes: string.split($suffix, '-');

  @each $s in $suffixes {
    @if $s == 'xxxlarge' {
      $temp-font-size: fontsize.$s48;
    } @else if $s == 'xxlarge' {
      $temp-font-size: fontsize.$s32;
    } @else if $s == 'xlarge' {
      $temp-font-size: fontsize.$s24;
    } @else if $s == 'large' {
      $temp-font-size: fontsize.$s20;
    } @else if $s == 'medium' {
      $temp-font-size: fontsize.$s16;
    } @else if $s == 'small' {
      $temp-font-size: fontsize.$s12;
    } @else if $s == 'xsmall' {
      $temp-font-size: fontsize.$s10;
    } @else if $s == 'xxsmall' {
      $temp-font-size: fontsize.$s8;
    }
  }

  @return $temp-font-size;
}

@function -get-body-font-size($suffix) {
  $temp-font-size: fontsize.$s12;
  $suffixes: string.split($suffix, '-');

  @each $s in $suffixes {
    @if $s == 'large' {
      $temp-font-size: fontsize.$s14;
    } @else if $s == 'small' {
      $temp-font-size: fontsize.$s10;
    }
  }

  @return $temp-font-size;
}

@function -get-text-transform($suffix) {
  $temp-text-transform: none;
  $suffixes: string.split($suffix, '-');

  @each $s in $suffixes {
    @if $s == 'upper' {
      $temp-text-transform: uppercase;
    } @else if $s == 'lower' {
      $temp-text-transform: lowercase;
    }
  }

  @return $temp-text-transform;
}