:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: BadgeStyle;
}

:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: Badge;
}

:import {
  -st-from: "../../typography.st.css";
  -st-named: fontMedium;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
  B10,
  D20,
  G10,
  O10,
  R10,
  Y10,
WHITE;
}

.root {
  -st-extends: Badge;
  -st-states: skin(string), wide;
}

.text {
  font-family: value(fontMedium);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
  color: currentColor;
  text-transform: uppercase;
}

.icon {
  width: 12px;
  height: 12px;
}

.root:skin(general) {
  -st-mixin: BadgeStyle(
    backgroundColor value(D20),
    borderColor value(D20)
  );
}

.root:skin(standard) {
  -st-mixin: BadgeStyle(
    backgroundColor value(B10),
    borderColor value(B10)
  );
}

.root:skin(danger) {
  -st-mixin: BadgeStyle(
    backgroundColor value(R10),
    borderColor value(R10)
  );
}

.root:skin(warning) {
  -st-mixin: BadgeStyle(
    backgroundColor value(Y10),
    borderColor value(Y10)
  );
}

.root:skin(urgent) {
  -st-mixin: BadgeStyle(
    backgroundColor value(O10),
    borderColor value(O10)
  );
}

.root:skin(success) {
  -st-mixin: BadgeStyle(
    backgroundColor value(G10),
    borderColor value(G10)
  );
}

.root:skin(general),
.root:skin(standard),
.root:skin(danger),
.root:skin(warning),
.root:skin(urgent),
.root:skin(success) {
  min-width: 18px;
  border-radius: 12px;
  border: initial;
  height: 18px;
  padding: 2px;
}

.root:wide {
  padding: 2px 6px;
}

.root:wide .text {
  letter-spacing: 1px;
}