@use 'globals';

.collapsible-menu {
  &__summary {
    @include globals.reset-button;
  }

  &__content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-in;
    padding-left: 0.5rem;

    &--expanded {
      // todo: adjust max-height dynamically based on content
      max-height: 40rem;
      transition: max-height 0.3s ease-out;
    }
  }
}