.sidebarBody {
  @apply py-4 px-2;
  /* full - (y padding) */
  height: calc(100% - 2rem);

  @apply border border-inv-3 rounded-bl-md rounded-br-md;

  /* TODO: This is weird, we shouldn't disable native browser features, a11y impacts incomming */
  &::-webkit-scrollbar {
    display: none;
  }

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

  @apply backdrop-blur-sm;
}

.accordion {
  @apply w-full mb-4 h-full flex flex-col justify-start gap-4;

  &:last-child {
    @apply mb-0;
  }
}
.accordionItem {
  max-height: 50%;
  &:last-child {
    @apply mb-0;
  }
}
.accordionHeader {
  @apply flex mb-2 px-2;
}

.accordionTrigger {
  @apply inline-flex items-center justify-between w-full;

  &:focus-visible {
    @apply z-10;
    outline: 2px solid hsl(200 98% 39%);
    outline-offset: 2px;
  }
}

.accordionContent {
  @apply flex flex-col;
  @apply py-3 px-1.5 bg-inv-4 rounded-md mb-4;

  max-height: calc(100% - 24px);
  overflow-y: auto;
  scrollbar-width: none;

  animation: slideAccordionUp 300ms cubic-bezier(0.87, 0, 0.13, 1);

  &[data-expanded] {
    animation: slideAccordionDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
  }

  nav * {
    @apply outline-none;
  }

  nav > a {
    @apply block w-full px-2 py-1.5 min-h-7 my-2 rounded-md;

    &:first-child {
      @apply mt-0;
    }

    &:last-child {
      @apply mb-0;
    }

    &:focus-visible {
      background: linear-gradient(
        90deg,
        theme(colors.secondary.900),
        60%,
        theme(colors.secondary.600) 100%
      );
    }

    &:hover {
      @apply bg-inv-acc-2;
    }

    &:active {
      @apply bg-inv-acc-3;
    }
  }
}

@keyframes slideAccordionDown {
  from {
    height: 0;
  }
  to {
    height: var(--kb-accordion-content-height);
  }
}

@keyframes slideAccordionUp {
  from {
    height: var(--kb-accordion-content-height);
  }
  to {
    height: 0;
  }
}
