@mixin text-color($color) {
    &.uui-text.uui-color-#{$color} {
        --uui-text: var(--uui-text-#{$color});
    }
}

@mixin font-weight($weight) {
    &.uui-font-weight-#{$weight} {
        --uui-text-font-weight: #{$weight};
    }
}

@mixin font-style($style) {
    &.uui-font-style-#{$style} {
        --uui-text-font-style: #{$style};
    }
}

.root {
    --uui-text: var(--uui-color-50);
    --uui-text-size: var(--uui-size);
    --uui-text-font: var(--uui-font);
    --uui-text-font-weight: 400;
    --uui-text-font-style: normal;
    --uui-text-vertical-padding: calc((var(--uui-text-size) - var(--uui-text-line-height, var(--uui-line-height))) / 2);
    //
    font-family: var(--uui-text-font);
    font-weight: var(--uui-text-font-weight);
    font-style: var(--uui-text-font-style);
    color: var(--uui-text);
    padding-top: var(--uui-text-vertical-padding);
    padding-bottom: var(--uui-text-vertical-padding);

    &.line-height {
        line-height: var(--uui-text-line-height, var(--uui-line-height));
    }

    &.font-size {
        font-size: var(--uui-text-font-size, var(--uui-font-size));
    }

    &:global {
        &.uui-size-none {
            --uui-text-size: none;
        }

        &.uui-text.uui-color-white {
            --uui-text: var(--uui-neutral-0);
        }

        @include text-color('primary');
        @include text-color('secondary');
        @include text-color('tertiary');
        @include text-color('disabled');
        @include text-color('info');
        @include text-color('warning');
        @include text-color('critical');
        @include text-color('success');

        @include font-weight(200);
        @include font-weight(300);
        @include font-weight(400);
        @include font-weight(600);
        @include font-weight(700);
        @include font-weight(900);

        @include font-style('normal');
        @include font-style('italic');
    }
}
