wix-style-react/dist/src/Themes/businessDashboard/components/Tag.st.css

wix-style-react

@st-namespace "BMTag";

:import {
  -st-from: "../../../Tag/Tag.st.css";
  -st-default: Tag;
}

:import {
  -st-from: '../foundations/colors.st.css';
  -st-named: D20, D55, B05, D80, B50, D10;
}

.root {
  -st-extends: Tag;
}

.root:size(medium) {
  max-height: 28px;
  padding: 4px 12px;
  border-radius: 4px;
}

.root:size(medium):theme(lightOutlined) {
  border: 1px solid value(D55);
  background-color: value(D80);
}

.root:size(medium):theme(lightOutlined)::text {
  color: value(D10);
}

.root:clickable:size(medium):theme(lightOutlined):hover,
.root:clickable:size(medium):theme(lightOutlined):active {
  border-color: value(B05);
  background-color: value(D80) !important;
}

.root:clickable:size(medium):theme(lightOutlined):hover::text,
.root:clickable:size(medium):theme(lightOutlined):active::text {
  color: value(B05);
}

.root:size(medium):theme(lightOutlined):focus {
  box-shadow: 0px 0px 0px 2px value(B50);
  outline: none;
}

/* light theme */
.root:size(medium):theme(light) {
  background-color: value(D80);
}

.root:size(medium):theme(light)::text {
  color: value(D10);
}

.root:clickable:size(medium):theme(light):hover {
  background-color: value(B50);
}

/* st-namespace-reference="../../../../../src/Themes/businessDashboard/components/Tag.st.css" */