@use "sass:map";

@use "../typo/variables";
@use "../functions";

@mixin typo($style, $target-name: null) {
  @if not map.has-key(variables.$typography-styles, $style) {
    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$typography-styles)}";
  }

  @if $target-name != null {
    font-family: var(--u-font-family, #{functions.get-font-family-var()});
  } @else {
    font-family: var(--u-font-family);
  }

  $props: map.get(variables.$typography-styles, $style);

  @each $key, $value in $props {
    @if $target-name != null {
      #{$key}: var(--u-#{$target-name}-#{$key}, var(--u-#{$style}-#{$key}, #{$value}));
    } @else {
      #{$key}: var(--u-#{$style}-#{$key});
    }
  }
}


@mixin typo-prop($style, $prop, $target-name: null) {
  @if not map.has-key(variables.$typography-styles, $style) {
    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$typography-styles)}";
  }

  $props: map.get(variables.$typography-styles, $style);

  $value: map.get($props, $prop);

  @if $target-name != null {
    #{$prop}: var(--u-#{$target-name}-#{$prop}, var(--u-#{$style}-#{$prop}, #{$value}));
  } @else {
    #{$prop}: var(--u-#{$style}-#{$prop});
  }
}