wix-style-react/src/CounterBadge/CounterBadge.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, D10, D20, D80, G10, O10, R10, Y10, B30;
}

:import {
  -st-from: '../Foundation/stylable/shadows.st.css';
  -st-named: shadow30;
}

:import {
  -st-from: '../Text/Text.st.css';
  -st-default: Text;
}

:import {
  -st-from: '../Text/Caption.st.css';
  -st-default: Caption;
}

.root {
  -st-states: longNumber, custom, showShadow,
    skin(enum(general, standard, danger, warning, urgent, success, neutralStandard, light)),
    size(enum(small,medium));
  border-radius: 18px;
  color: value(D80);
  display: flex;
  width: fit-content;
  text-align: center;
  box-sizing: content-box;
}

.text {
  -st-extends: Text;
}

.caption {
  -st-extends: Caption;
}

.numberContent {
  display: flex;
  align-items: center;
  gap: 1px;
}

.root:size(small) {
  height: 18px;
  min-width: 6px;
  padding: 0 6px;
}

.root:size(medium) {
  height: 24px;
  min-width: 8px;
  padding: 0 8px;
}

.root:size(medium):longNumber {
  padding: 0 6px 0 8px;
}

.root:skin(general) {
  background-color: value(D20);
}

.root:skin(standard) {
  background-color: value(B10);
}

.root:skin(neutralStandard) {
  background-color: value(B30);
}

.root:skin(neutralStandard) .text,
.root:skin(neutralStandard) .caption {
  color: value(D20);
}

.root:skin(danger) {
  background-color: value(R10);
}

.root:skin(warning) {
  background-color: value(Y10);
}

.root:skin(urgent) {
  background-color: value(O10);
}

.root:skin(success) {
  background-color: value(G10);
}

.root:skin(light) {
  background-color: value(D80);
}

.root:skin(light) .text,
.root:skin(light) .caption {
  color: value(D10);
}

.text,
.caption {
  margin: auto;
}

.root:size(small) .caption {
  min-width: 6px;
}

.root:size(medium) .text {
  min-width: 8px;
}

.root:custom {
  position: relative;
}

.root:size(small):custom {
  height: 18px;
}

.root:size(medium):custom {
  height: 24px;
}

.root:custom svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.root:size(small):custom svg {
  height: 12px;
  width: 12px;
}

.root:size(medium):custom svg {
  height: 16px;
  width: 16px;
}

.root:showShadow {
  box-shadow: value(shadow30);
}