.sidebarHeader {
  @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.2) 0%,
    theme(colors.bg.inv.3) 0%
  );
}

.dropDownTrigger {
  @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;

  .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);
    }
  }
}

.clanLabel {
  @apply flex items-center gap-2 justify-start;
}
.clanIcon {
  @apply flex justify-center items-center;
  @apply rounded-full bg-inv-4 w-7 h-7;
}

.dropDownContent {
  @apply flex flex-col w-full px-2 py-1.5 z-10 gap-3;
  @apply bg-def-1 rounded-bl-md rounded-br-md;
  @apply border border-def-2;

  animation: sidebarNavContentHide 250ms ease-in forwards;
}
.dropDownContent[data-expanded] {
  animation: sidebarNavContentShow 250ms ease-out;
}

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

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

.dropdownGroup {
  @apply flex flex-col gap-2;
  @apply px-1;
}
.dropdownGroupLabel {
  @apply flex items-baseline justify-between w-full;
}
.dropdownGroupItems {
  @apply rounded px-1 py-1.5 bg-def-2;
}

@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);
  }
}
