@st-namespace "BMHeading";

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

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

:import {
  -st-from: "../foundations/typography.st.css";
  -st-named: heading-h1, heading-h3, heading-h4, heading-h5, heading-h6;
}

.root {
  -st-extends: Heading;
}

.root:appearance(H1) {
  -st-mixin: heading-h1;
  color: value(D10);

}

.root:appearance(H1):light {
  -st-mixin: heading-h1;
}

.root:appearance(H2) {
  color: value(D10);
  font-size: 24px;
  line-height: 32px;
}

.root:appearance(H2):light {
  color: value(D80);
  font-size: 24px;
  line-height: 32px;
}

.root:appearance(H3) {
  -st-mixin: heading-h3;
  color: value(D10);
}

.root:appearance(H3):light {
  -st-mixin: heading-h3;
  color: value(D80);
}

.root:appearance(H4) {
  -st-mixin: heading-h4;
  color: value(D10);
}

.root:appearance(H4):light {
  -st-mixin: heading-h4;
  color: value(D80);
}

.root:appearance(H5) {
  -st-mixin: heading-h5;
  color: value(D20);
  letter-spacing: 1px;
}

.root:appearance(H5):light {
  -st-mixin: heading-h5;
  color: value(D80);
  letter-spacing: 1px;
}

.root:appearance(H6) {
  -st-mixin: heading-h6;
  color: value(D20);
  letter-spacing: 1.2px;
}

.root:appearance(H6):light {
  -st-mixin: heading-h6;
  color: value(D80);
  letter-spacing: 1.2px;
}

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