:local(.formula) {
  composes: bordered rounded from "style";
  background-color: var(--color-bg-light);
  cursor: pointer;
}

:local(.formulaHeader) {
  composes: flex align-center text-brand py1 px2 from "style";
}

:local(.formulaTitle) {
  composes: ml2 from "style";
  font-size: 16px;
}

:local(.formulaDefinitionInner) {
  composes: p2 from "style";
}

.formulaDefinition {
  overflow: hidden;
}

.formulaDefinition-enter {
  max-height: 0px;
}
.formulaDefinition-enter.formulaDefinition-enter-active {
  /* using 100% max-height breaks the transition */
  max-height: 150px;
  transition: max-height 300ms ease-out;
}
.formulaDefinition-exit {
  max-height: 150px;
}
.formulaDefinition-exit.formulaDefinition-exit-active {
  max-height: 0px;
  transition: max-height 300ms ease-out;
}