esl-panel-group {
  @animationTime: 0.5s;

  display: block;
  box-sizing: content-box;

  &.animate {
    transition: height @animationTime ease-in-out;
    overflow: hidden;
  }

  &[current-mode='tabs'] {
    > esl-panel {
      opacity: 0;
      transition:
        max-height @animationTime ease-in-out,
        visibility 0s linear @animationTime,
        opacity @animationTime ease-in-out;

      &.open {
        opacity: 1;
        transition:
          max-height @animationTime ease-in-out,
          visibility 0s linear,
          opacity @animationTime ease-in-out;
      }
    }
  }

  &[current-mode='tabs'].esl-tabs-equal-height {
    display: grid;
    grid-template-areas: 'stack';
    > esl-panel {
      grid-area: stack;
      max-height: none;
    }
  }
}

// fix a11y
@media screen {
  esl-panel-group:not(.animate) esl-panel:not(.animate):not(.open) {
    * {
      visibility: hidden !important;
    }
  }
}