wix-style-react/dist/src/TrendIndicator/TrendIndicator.st.css

wix-style-react

@st-import [
  --wds-font-size-100,
  --wds-font-weight-bold,
  --wds-font-family-default,
  --wds-font-line-height-100,
  --wds-font-letter-spacing-100,
] from "@wix/design-system-tokens/all.st.css";

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D40, G10, R10;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: wsr-font-family, wsr-font-weight-bold, wsr-caption-font-size-1, wsr-caption-line-height-1;
}

.root {
  -st-states: skin(enum(neutral, positive, negative));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  max-width: 100%;
}

.root:skin(neutral) {
  color: value(D40);
}

.root:skin(positive) {
  color: value(G10);
}

.root:skin(negative) {
  color: value(R10);
}

.caption {
  font-family: var(--wds-font-family-default, value(wsr-font-family));
  font-weight: var(--wds-font-weight-bold, value(wsr-font-weight-bold));
  font-size: var(--wds-font-size-100, value(wsr-caption-font-size-1));
  line-height: var(--wds-font-line-height-100, value(wsr-caption-line-height-1));
  letter-spacing: var(--wds-font-letter-spacing-100, 1px);

  color: currentColor;
  height: 12px;
}

.icon {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* st-namespace-reference="../../../src/TrendIndicator/TrendIndicator.st.css" */