@use 'sass:map';
////
/// @group modules.typography
////

@use '../utils' as *;
@use 'type-size' as *;
@use 'config' as *;

@function type-style($name, $base-prop: '__base', $type-styles: null) {
    $type-styles: if-null($type-styles, get('typography.type-styles'));

    $style: map.get($type-styles, $name);

    @if (not $style) {
        @error '[type-style] Could not find a style named #{$name} in the type-styles.';
        @return null;
    }

    $base-name: map.get($style, $base-prop);
    $base: if(sass($base-name): type-style($base-name) ; else: null);

    @if ($style and $base) {
        @return map.merge($base, $style);
    }

    @if ($base) {
        @return $base;
    }

    @if ($style) {
        @return $style;
    }

    @return null;
}

@mixin type-style($name, $base-prop: '__base', $type-styles: null) {
    $type-styles: if-null($type-styles, get('typography.type-styles'));
    @include css-map(type-style($name, $base-prop, $type-styles), $ignore: '__');
}

@mixin type-styles($type-styles, $base-prop: '__base', $selector-prop: '__selector', $root: '') {
    @each $name, $props in $type-styles {
        $selector: $name;

        @if (map.has-key($props, $selector-prop)) {
            $selector: map.get($props, $selector-prop);
        }

        #{$root}#{$selector} {
            @include type-style($name, $type-styles: $type-styles);
        }
    }
}