.typography{
    margin: 0;
}

$typography-types: ("body1", "body2", "caption", "button", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "overline");

@each $type in $typography-types {
    .typography-#{$type} {
        font-size: var(--typography-#{$type}-size);
        font-family: var(--typography-#{$type}-family);
        font-weight: var(--typography-#{$type}-weight);
        line-height: var(--typography-#{$type}-lineheight);
        letter-spacing: var(--typography-#{$type}-letterspacing);
        text-transform: var(--typography-#{$type}-text-transform);;
    }
}

.typography-srOnly {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
}

.typography-align-left {
    text-align: left;
}

.typography-align-center {
    text-align: center;
}

.typography-align-right {
    text-align: right;
}

.typography-align-justify {
    text-align: justify;
}

.typography-nowrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.typography-gutterbottom {
    margin-bottom: 0.35em;
}

.typography-paragraph {
    margin-bottom: 16px;
}

.typography-display-inline {
    display: inline;
}

.typography-display-block {
    display: block;
}