@import 'themes/default';

.Collapsible__Wrapper {
  max-height: auto;
  opacity: 1;
  overflow: visible;
  /**
   * This timing value needs to stay in sync with the duration defined in the
   * CollapsibleContent component
   */
  transition-duration: var(--timing--hover);
  transition-property: margin, max-height, opacity;
  transition-delay: 0s, var(--timing--click);

  &--collapsed {
    /**
     * `display: none` is needed to prevent collapsed wrappers from affecting
     * the gutters applied by `gap` in a flex/grid layout.
     */
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition-delay: var(--timing--click), 0s;
  }

  &--transitioning {
    display: block;
    overflow: hidden;
  }
}

.Collapsible__Content {
  transition: visibility var(--timing--hover);
  visibility: visible;

  &--collapsed {
    visibility: hidden;
  }
}