.button {
--button-color: black;
--button-background: white;
--button-after-background: white;
--button-after-box-shadow: 0 0 10px 0 gray;
--button-active-background: black;
--button-active-box-shadow: 0 0 10px 0 black;
--button-checked-background: gray;
--button-checked-box-shadow:
color: var(--button-color);
background-color: var(--button-background);
&::after {
background-color: var(--button-after-background);
box-shadow: var(--button-after-box-shadow);
}
&:active {
&::after {
background-color: var(--button-active-background);
box-shadow: var(--button-active-box-shadow);
}
}
&.\--checked {
&:not(:active) {
&::after {
background-color: var(--button-checked-background);
box-shadow: var(--button-checked-box-shadow);
}
}
}
}
//а здесь куча модификаторов для кнопки, которые просто меняют нужные цвета
.button {
&.\--colorPrimary {
--button-color: white;
--button-background: var(--primary);
}
}