.wui-collapse {
  @apply border rounded-lg w-full shadow;
  @apply border-neutral-300;
  @apply dark:border-neutral-700;


  .wui-collapse-item {
    @apply flex flex-col;

    &:not(:first-child) {
      @apply border-t;
      @apply border-neutral-300;
      @apply dark:border-neutral-700;
    }

    .wui-collapse-item-header {
      @apply m-0 px-4 py-3 relative;
      @apply flex items-center space-x-4;
      @apply cursor-pointer outline-none;
      @apply bg-neutral-100;
      @apply dark:bg-neutral-900;

      font-family: inherit;
      padding: 14px 16px;
      font-weight: 500;

      &:focus {
        box-shadow: 0 0 0 3px fade(#a6b0bb, 20%);
        z-index: 100;
      }

      &-icon {
        font-size: 17px !important;
        user-select: none;
      }
    }

    &-body {
      @apply border-t;
      @apply border-neutral-300;
      @apply dark:border-neutral-700;
      padding: 14px 16px 24px;
      font-size: 14px;
      font-weight: 400;
      will-change: height;
      line-height: 1.2;
    }

    &:first-child .wui-collapse-item-header {
      @apply rounded-t-lg;
    }

    &:last-child:not(&--expanded) .wui-collapse-item-header {
      @apply rounded-b-lg;
    }
  }
}