@mixin card-typography($categories: (
    title: 'h6',
    title-small: 'subtitle-2',
    subtitle: 'subtitle-2',
    content: 'body-2')
) {
    $title: map.get($categories, 'title');
    $title-small: map.get($categories, 'title-small');
    $subtitle: map.get($categories, 'subtitle');
    $content: map.get($categories, 'content');

    %igx-card-header-title {
        @include type-style($title) {
            margin: 0;
        }
    }

    %igx-card-header-title--small {
        @include type-style($title-small) {
            margin: 0;
        }
    }

    %igx-card-header-subtitle {
        @include type-style($subtitle){
            margin: 0;
        }
    }

    %igx-card-content > *:not(igx-icon) {
        @include type-style($content) {
            margin: 0;
        }
    }
}

$light-card: extend(
    $default-elevation-card,
    (
        ... other props,

        typography: (
            title: (
                large: (
                    value: 'h6',
                ),
                small: (
                    value: 'subtitle-2',
                ),
            ),
            subtitle: (
                value: 'subtitle-2',
            ),
            content: (
                value: 'body-2',
            ),
        )
    )
);