$typography-fontSize: ( 3xl: 1.75em, 2xl: 1.50em, xl: 1.25em, l: 1.10em, n: 1.00em, s: 0.875em, xs: 0.75em, 2xs: 0.65em, 3xs: 0.50em );
$typography-fontStyle: ( n: normal, i: italic, o: oblique, inh: inherit );
$typography-fontWeight: ( th: 200, lt: 300, nm: 400, md: 500, sb: 600, bd: 700 );
$typography-lineHeight: ( l: 1.50, n: 1, s: 1.25 );
$typography-textAlign: ( c: center, l: left, r: right, j: justify );
$typography-textTransform: ( c: capitalize, l: lowercase, u: uppercase );
$typography-whiteSpace: ( nw: nowrap, );

$typography: (
    fs: ( font-size: $typography-fontSize ),
    fst: ( font-style: $typography-fontStyle ),
    fw: ( font-weight: $typography-fontWeight ),
    lh: ( line-height: $typography-lineHeight ),
    ta: ( text-align: $typography-textAlign ),
    tt: ( text-transform: $typography-textTransform ),
    ws: ( white-space: $typography-whiteSpace ),
);

@each $class, $array in $typography {
    .#{$class}\: {
        @include isMedia() using ($mc, $mb) {
            @include isProp($array) using ($declaration, $values) {
                @include isMap($values, $mc) using ($key, $val) {
                    #{$declaration}: $val;
                }
            }
        }
    }
}