div.sidebar-header {
  @apply flex items-center justify-center w-full px-1 py-1;
  @apply border border-inv-3 rounded-md rounded-bl-none rounded-br-none;

  background: linear-gradient(
    90deg,
    theme(colors.bg.inv.3) 0%,
    theme(colors.bg.inv.4) 0%
  );

  & > .dropdown-trigger {
    @apply flex items-center justify-between flex-grow px-1 py-1;
    @apply rounded-tl-md rounded-tr-md;
    @apply border border-transparent border-b-0;

    transition: all 250ms ease-in-out;

    div.title {
      @apply flex items-center gap-2 justify-start;

      & > .clan-icon {
        @apply rounded-full bg-inv-4 w-7 h-7;
      }
    }

    .icon[data-icon-name="CaretDown"] {
      transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
    }

    &[data-expanded] {
      @apply bg-def-1 border-def-2;

      .icon[data-icon-name="CaretDown"] {
        transform: rotate(180deg);
      }
    }
  }
}

.sidebar-dropdown-content {
  @apply flex flex-col w-full px-2 py-1.5;
  @apply bg-def-1 rounded-bl-md rounded-br-md;
  @apply border border-def-2;

  animation: sidebarNavContentHide 250ms ease-in forwards;

  .dropdown-item {
    @apply flex items-center justify-start w-full px-1.5 py-2 gap-2 rounded;

    &:hover {
      @apply bg-def-acc-2 cursor-pointer;
    }
  }

  .dropdown-group {
    @apply flex flex-col gap-2;
    @apply px-1;

    .dropdown-group-label {
    }

    .dropdown-group-items {
      @apply rounded px-1 py-1.5 bg-def-2;
    }
  }
}

.sidebar-dropdown-content[data-expanded] {
  animation: sidebarNavContentShow 250ms ease-out;
}

@keyframes sidebarNavContentShow {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sidebarNavContentHide {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}
