.sidebarPane {
  @apply flex flex-col border-none z-20 h-full;
  @apply w-72;

  animation: sidebarPaneShow 250ms ease-in forwards;

  &.closing {
    animation: sidebarPaneHide 250ms ease-out 300ms forwards;

    & > .header > *,
    & > .subHeader > *,
    & > .body > * {
      animation: sidebarFadeOut 250ms ease-out forwards;
    }
  }
}

.header {
  @apply flex items-center justify-between px-3 py-2 rounded-t-[0.5rem];
  @apply border-t-[1px] border-t-bg-inv-3
        border-r-[1px] border-r-bg-inv-3
        border-b-2 border-b-bg-inv-4
        border-l-[1px] border-l-bg-inv-3;

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

  & > * {
    @apply opacity-0;
    animation: sidebarFadeIn 250ms ease-in 250ms forwards;
  }
}

.subHeader {
  @apply px-3 py-1;
  @apply border-b-[1px] border-b-bg-inv-4;
  @apply border-r-[1px] border-r-bg-inv-3 border-l-[1px] border-l-bg-inv-3;

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

  & > * {
    @apply opacity-0;
    animation: sidebarFadeIn 250ms ease-in 250ms forwards;
  }
}

.body {
  @apply flex flex-col gap-4 px-2 pt-4 pb-3 w-full h-full;
  @apply backdrop-blur-md;
  @apply rounded-b-[0.5rem]
        border-r-[1px] border-r-bg-inv-3
        border-b-2 border-b-bg-inv-4
        border-l-[1px] border-l-bg-inv-3;

  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(
      180deg,
      theme(colors.bg.inv.2) 0%,
      theme(colors.bg.inv.3) 100%
    );

  & > * {
    @apply opacity-0;
    animation: sidebarFadeIn 250ms ease-in 350ms forwards;
  }
}

@keyframes sidebarPaneShow {
  0% {
    @apply w-0;
    @apply opacity-0;
  }
  10% {
    @apply w-8;
  }
  30% {
    @apply opacity-100;
  }
  100% {
    @apply w-72;
  }
}

@keyframes sidebarPaneHide {
  90% {
    @apply w-8;
  }
  100% {
    @apply w-0;
    @apply opacity-0;
  }
}

@keyframes sidebarFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sidebarFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
