@import '../../_style/animation/variables.scss';

.md-list-item-expand {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border 0.4s $md-transition-stand-timing;
  will-change: border;

  &.md-active {
    > .md-list-item-content > .md-list-expand-icon {
      perspective: 1000px;
      perspective-origin: 50% 50%;
      transform: rotateX(180deg);
    }

    .md-list-expand {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .md-list-expand {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate3d(0, -24px, 0);
    transition: 0.4s $md-transition-stand-timing;
    transition-property: transform, opacity;
    will-change: transform, opacity;
  }

  .md-list-expand-icon {
    transition: transform 0.4s $md-transition-stand-timing;
    will-change: transform;
  }
}