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

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: caption-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 {
  -st-mixin: caption-1;
  color: currentColor;
  height: 12px;
  letter-spacing: 1px;
}

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