@use "../settings/defaults";

.ff {
    @each $family in banner, input, main, title {
        &-#{$family} {
            font-family: var(--ff-#{$family});
        }
    }
}

.fs {
    @each $size in defaults.$SIZES {
        &-#{$size} {
            font-size: var(--fs-#{$size});
        }
    }
}

.fw {
    @each $weight in 100, 400, 700, 900, lighter, normal, bold, bolder {
        &-#{$weight} {
            font-weight: $weight;
        }
    }
}

.txt {
    @each $alignement in left, center, right, justify {
        &-#{$alignement} {
            text-align: $alignement;
        }
    }

    @each $transformation in capitalize, full-width, lowercase, uppercase {
        &-#{$transformation} {
            text-transform: $transformation;
        }
    }
}

.typ {
    &-article {
        font-family: var(--ff-title);
        font-size: var(--fs-sm);
        font-weight: normal;
        line-height: 1.5;
        text-align: justify;
    }

    &-banner {
        font-family: var(--ff-title);
        font-size: var(--fs-xl);
    }

    &-normal {
        font-family: var(--ff-main);
        font-size: var(--fs-sm);
        font-weight: normal;
    }

    &-subtitle {
        font-family: var(--ff-title);
        font-size: var(--fs-md);
        font-weight: bold;
    }

    &-title {
        font-family: var(--ff-title);
        font-size: var(--fs-lg);
        font-weight: bold;
    }
}