
@st-namespace 'Text-st-css';
@st-import [ --wix-color-5, --wix-color-4 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont ] from '../../common/formatters.st';
@st-import [ srOnly ] from '../internal/WixUiCoreComponents/common/a11y.st.css';

@property st-global(--wut-text-color);
@property st-global(--wut-placeholder-color);

/*
 * The color of the text instead of the default color set by priority
 * @type color
 * @default for [primary] --wix-color-5 [secondary] --wix-color-4
 */
@property st-global(--wix-ui-tpa-text-main-text-color);

/*
 * The font of the text instead of the default font set by typography
 * @type font
 * @default Depends on the typography prop
 */
@property st-global(--wix-ui-tpa-text-main-text-font);

.root {
    -st-states:
      typography(enum(smallTitle, runningText, listText, largeTitle)),
      priority(enum(primary, secondary)),
      mobile;

    --primary-color: createColor(--wix-ui-tpa-text-main-text-color, var(--wix-color-5));
    --secondary-color: createColor(--wix-ui-tpa-text-main-text-color, var(--wix-color-4));
}

.root:priority(primary){
    color: var(--wut-text-color, var(--primary-color));
}

.root:priority(secondary){
    color: var(--wut-placeholder-color, var(--secondary-color));
}

.root:typography(smallTitle) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Page-title', '{ "line-height": "1.33em", "size": "24px" }');
}

.root:typography(runningText) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Body-M', '{ "line-height": "1.5em", "size": "16px" }');
}

.root:typography(listText) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Body-M', '{ "line-height": "2em", "size": "16px" }');
}

.root:typography(largeTitle) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Heading-M', '{ "line-height": "1.25em", "size": "32px" }');
}

.root:mobile:typography(smallTitle) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Page-title', '{ "line-height": "1.4em", "size": "20px" }');
}

.root:mobile:typography(runningText) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Body-M', '{ "line-height": "1.42em", "size": "14px" }');
}

.root:mobile:typography(listText) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Body-M', '{ "line-height": "1.72em", "size": "14px" }');
}

.root:mobile:typography(largeTitle) {
    -st-mixin: createFont(--wix-ui-tpa-text-main-text-font, 'Heading-M', '{ "line-height": "1.33em", "size": "24px" }');
}

.sr-only {
    -st-mixin: srOnly;
}

/* st-namespace-reference="../../../../src/components/Text/Text.st.css" */
    