wix-style-react/dist/src/SidebarNext/components/ToggleButton.st.css

wix-style-react

@st-namespace "sidebarnext-toggle-button";

@st-import [D20, D80] from "../../Foundation/stylable/colors.st.css";
@st-import [shadow30] from "../../Foundation/stylable/shadows.st.css";
@st-import Tooltip from "../../Tooltip/Tooltip.st.css";
@st-import IconButton from "../../IconButton/IconButton.st.css";

.root {
  -st-extends: Tooltip;
  -st-states: skin(enum(dark, light, neutral));
  position: absolute;
  top: 6px;
  z-index: 1;
}

.root:skin(dark)::content {
  background-color: #333850;
}

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

.root:skin(light)::text:light {
  color: #333853;
}

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

.root:skin(neutral)::text:light {
  color: #333853;
}

.iconButton {
  -st-extends: IconButton;
  -st-states: skin(enum(dark, light, neutral));

  background-color: #42454C;
  border-color: #42454C;
  color: #CFD1DC;
  box-shadow: value(shadow30);
}

.root .iconButton:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #3B3F57;
}

.root .iconButton:active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #3B3F57;
}

.root .iconButton:skin(light) {
  background-color: #D6E6FE;
  border-color: #D6E6FE;
  color: #0F62E6;
}

.root .iconButton:skin(light):hover {
  background-color: #A8CAFF;
  border-color: #A8CAFF;
  color: #0F62E6;
}

.root .iconButton:skin(light):active {
  background-color: #A8CAFF;
  border-color: #A8CAFF;
  color: #0F62E6;
}

.root .iconButton:skin(neutral) {
  background-color: #D6E6FE;
  border-color: #D6E6FE;
  color: #0F62E6;
}

.root .iconButton:skin(neutral):hover {
  background-color: #A8CAFF;
  border-color: #A8CAFF;
  color: #0F62E6;
}

.root .iconButton:skin(neutral):active {
  background-color: #A8CAFF;
  border-color: #A8CAFF;
  color: #0F62E6;
}

/* st-namespace-reference="../../../../src/SidebarNext/components/ToggleButton.st.css" */