@st-namespace "BrandButton";

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

:import {
  -st-from: "../../Foundations/colors.st.css";
  -st-named: BR10, BR20, BR30, D80;
}

.root {
  -st-extends: Button;
}

/* Skin dark primary */
.root:skin(dark):priority(primary) {
  background-color: value(BR10);
}

.root:skin(dark):priority(primary):hover {
  background-color: value(BR20);
}

.root:skin(dark):priority(primary):disabled {
  background-color: value(BR30);
}

/* Skin dark secondary */
.root:skin(dark):priority(secondary) {
  outline: solid 1px value(BR10);
  color: value(BR10);
}

.root:skin(dark):priority(secondary):hover {
  color: value(D80);
  background-color: value(BR20);
  outline-color: value(BR20);
}

.root:skin(dark):priority(secondary):active {
  color: value(D80);
  background-color: value(BR10);
  outline-color: value(BR10);
}

.root:skin(dark):priority(secondary):disabled {
  color: value(BR30);
  outline-color: value(BR30);
}
/* st-namespace-reference="../../../../../../src/Themes/brand/components/Button/Button.st.css" */