som-collapse .collapse-content-container {
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
  position: relative; /* Prevents background content from messing with height */
}
som-collapse .collapse-content-container.overflow-hidden {
  overflow: hidden;
}
som-collapse .collapse-content.display-none {
  display: none;
}
som-collapse {
  /*
    User can set the class `d-none` on the child content for the space not to be taken on screen before `som-collapse` resolves.
    This is useful when the Collapse component should be collapsed by default.

    Example:
    <som-collapse collapsed="true">    // <---- Collapsed by default
      <div class="d-none">      // <---- Makes child content `display: none`
        Hello world!
      </div>
    </som-collapse>

    The following style will change it to `display: block` when component is hydrated.
  */
}
som-collapse.hydrated .collapse-content > * {
  display: block !important;
}