$typography: $prefix + "typography";

.#{$typography} {
    @apply text-base dark:text-white;

    &-size-h1 {
        @apply text-5xl font-extrabold;
    }

    &-size-h2 {
        @apply text-4xl font-bold;
    }

    &-size-h3 {
        @apply text-3xl font-bold;
    }

    &-size-h4 {
        @apply text-2xl font-bold;
    }

    &-size-h5 {
        @apply text-xl font-bold;
    }

    &-size-h6 {
        @apply text-lg font-bold;
    }

    &-size-extra-small {
        @apply text-xs;
    }

    &-size-small {
        @apply text-sm;
    }

    &-size-large {
        @apply text-lg;
    }

    &-size-extra-large {
        @apply text-xl;
    }

    &-weight-thin {
        @apply font-thin;
    }

    &-weight-extra-light {
        @apply font-extralight;
    }

    &-weight-normal {
        @apply font-normal;
    }

    &-weight-medium {
        @apply font-medium;
    }

    &-weight-semi-bold {
        @apply font-semibold;
    }

    &-weight-bold {
        @apply font-bold;
    }

    &-weight-extra-bold {
        @apply font-extrabold;
    }

    &-weight-black {
        @apply font-black;
    }

    @each $key in (left, center, right, justify, start, end) {
        &-align-#{$key} {
            @apply text-#{$key};
        }
    }

    @each $key, $value in $colors {
        &-color-#{$key} {
            @apply text-#{$value}-500 dark:text-#{$value}-400;
        }
    }
}