:import {
  -st-from: "../core/CoreText/Text.st.css";
  -st-default: Text;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
  D10, D20, D50,
  G10,P10,
  R10,
  WHITE,
}

:import {
  -st-from: "../../typography.st.css";
  -st-named: fontLight, fontRoman;
}

.root {
  -st-extends: Text;
  -st-states: 
    size(enum(small, medium)),
    secondary,
    skin(enum(standard, success, error, premium)),
    light,
    bold;

  font-family: value(fontLight);
}

.root:not(:ellipsis) {
  white-space: pre-line;
}

.root:size(medium), .root:size(medium):secondary {
  font-size: 16px;
  line-height: 24px;
}

.root:size(small), .root:size(small):secondary {
  font-size: 14px;
  line-height: 18px;
}

.root:size(medium), .root:size(small) {
  color: value(D10);
}

.root:size(medium):light, .root:size(small):light {
  color: value(WHITE);
}

.root:size(medium):secondary, .root:size(small):secondary {
  color: value(D20);
}

.root:size(medium):secondary:light, .root:size(small):secondary:light {
  color: value(D50);
}

.root:skin(success),
.root:skin(success):light,
.root:skin(success):secondary {
  color: value(G10);
}

.root:skin(error),
.root:skin(error):light,
.root:skin(error):secondary {
  color: value(R10);
}

.root:skin(premium),
.root:skin(premium):light,
.root:skin(premium):secondary {
  color: value(P10);
}

.root:bold {
  font-family: value(fontRoman);
}