wix-style-react/dist/src/FieldSet/components/Suffix/Suffix.st.css

wix-style-react

@st-import [
  --wds-field-set-label-font-line-height-tiny,
  --wds-field-set-label-font-line-height-small,

  --wds-field-set-label-font-size-tiny,
  --wds-field-set-label-font-size-small,

  --wds-color-text-placeholder
] from "@wix/design-system-tokens/all.st.css";
@st-import [THEME-TEXT-COLOR-SECONDARY-LIGHT] from "../../../Foundation/stylable/colors.st.css";
@st-import Text from "../../../Text/Text.st.css";

.root {
  -st-states: noLabel, hasInlineElements;
  display: flex;
  max-width: 50%;
  justify-content: flex-end;
}

.root:noLabel {
  max-width: 100%;
}

.charCount {
  -st-states: labelSize(enum(tiny, small));
  -st-extends: Text;
}

.charCount:weight(normal):skin(standard):secondary {
  color: var(--wds-color-text-placeholder, value(THEME-TEXT-COLOR-SECONDARY-LIGHT));
}

.charCount:weight(normal):labelSize(tiny) {
  font-size: var(--wds-field-set-label-font-size-tiny, 12px);
  line-height: var(--wds-field-set-label-font-line-height-tiny, 15px);
}

.charCount:weight(normal):labelSize(small) {
  font-size: var(--wds-field-set-label-font-size-small, 14px);
  line-height: var(--wds-field-set-label-font-line-height-small, 18px);
}

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