@import './dropdown';

.dropdown-menu__panel ul {
  li {
    &[aria-expanded] > button {
      margin-right: 2ch !important;

      &::after {
        content: '►';
        float: right;
        transition: transform 0.25s ease-out;

        @media (prefers-reduced-motion: reduce) {
          transition-duration: 0s;
        }
      }

      &:hover::after {
        will-change: transform;
      }
    }

    &[aria-expanded='true'] > button::after {
      transform: rotateZ(90deg);
    }

    &[aria-expanded] {
      ul {
        display: none;
      }

      &[aria-expanded='true'] > ul {
        display: block;
        animation: fade-in-from-none 0.5s ease-out;
      }

      li {
        padding-left: 1rem;
      }
    }
  }
}

// Can't animate opacity and transform together, so we need to use keyframes
@keyframes fade-in-from-none {
  0% {
    opacity: 0;
    display: none;
  }

  1% {
    opacity: 0;
    display: block;
  }

  100% {
    opacity: 1;
    display: block;
  }
}