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

wix-style-react

@st-namespace "BMIconButton";

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

:import {
  -st-from: '../foundations/colors.st.css';
  -st-named: B05, B10, B40, B50, D10, D20, D30, D55, D70, D80, D10-30, D10-40, D80-70, D10-50;
}

.root {
  -st-extends: IconButton;
  background-color: value(B10);
  border-color: value(B10);
  color: value(D80);
}

.root:focus-visible {
  box-shadow: 0 0 0 3px value(B40);
}

.root:hover {
  background-color: value(B05);
  border-color: value(B05);
  color: value(D80);
}

.root:active {
  background-color: value(B10);
  border-color: value(B10);
  color: value(D80);
}

.root:size(small) {
  width: 28px;
  height: 28px;
}

.root:size(medium) {
  width: 28px;
  height: 28px;
}

.root:size(large) {
  width: 44px;
  height: 44px;
}

.root:disabled {
  background-color: value(D70);
  border-color: value(D70);
  color: value(D10-40);
}

/* Skin: Standard - Secondary */
.root:priority(secondary) {
  border: solid 1px value(D55);
  background: transparent;
  color: value(B10);
}

.root:priority(secondary):hover {
  color: value(B05);
  border-color: transparent;
  border-color: value(B05);
}

.root:priority(secondary):active {
  border: solid 1px value(D55);
  background: transparent;
  color: value(B10);
}

.root:priority(secondary):disabled {
  background-color: transparent;
  border-color: value(D55);
  color: value(D10-40);
}

/* Skin: inverted */
.root:skin(inverted),
.root:skin(inverted):priority(secondary) {
  border: none;
  background-color: value(D80);
  color: value(B10);
}

.root:skin(inverted):hover,
.root:skin(inverted):priority(secondary):hover {
  color: value(D80);
  border-color: transparent;
  background-color: value(B05);
}

.root:skin(inverted):active,
.root:skin(inverted):priority(secondary):active {
  border: none;
  background-color: value(D80);
  color: value(B10);
}

.root:skin(inverted):disabled {
  background-color: value(D70);
  border-color: transparent;
  color: value(D10-40);
}

/* Skin: light */
.root:skin(light),
.root:skin(light):priority(secondary) {
  border: none;
  background-color: value(D80);
  color: value(D10);
}

.root:skin(light):hover,
.root:skin(light):priority(secondary):hover {
  color: value(B05);
  border-color: transparent;
  background-color: value(B50);
}

.root:skin(light):active,
.root:skin(light):priority(secondary):active {
  border: none;
  background-color: value(D80);
  color: value(D10);
}

.root:skin(light):disabled,
.root:skin(light):priority(secondary):disabled {
  background-color: value(D80);
  border-color: transparent;
  color: value(D10-40);
}

/* Skin: transparent */
.root:skin(transparent),
.root:skin(transparent):priority(secondary) {
  border: none;
  color: value(D80);
  background-color: value(D10-40);
}

.root:skin(transparent):hover,
.root:skin(transparent):priority(secondary):hover {
  border: none;
  color: value(D80);
  background-color: value(D10-50);
}

.root:skin(transparent):disabled,
.root:skin(transparent):priority(secondary):disabled {
  border: none;
  color: value(D10-40);
  background-color: value(D70);
}

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