.index-panel {
  @apply p-6 m-0  border-primary border my-2;
  max-height: 80vh;
  overflow-y: auto;

  &__header {
    @apply flex gap-4  border-b border-gray-300 mb-8;

    button {
      @apply pb-6  text-carhop-gray opacity-60 relative;
      box-sizing: border-box;
      @apply flex items-center gap-2;
      .icon {
        @apply w-7 h-7 block;
      }
    }
    button[aria-selected='true'] {
      @apply text-primary opacity-100;
      .icon {
        @apply filter-primary;
      }
      &:after {
        @apply bg-primary;
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        position: absolute;
        bottom: -1px;
        left: 0;
      }
    }
  }

  &__content {
    overflow-wrap: anywhere;
    ul[aria-hidden='true'] {
      @apply hidden;
    }
  }

  .sommaire-index a:hover,
  .footnotes-index a:hover {
    @apply text-carhop-green-800 underline-offset-8 underline decoration-neutral-400;
    text-decoration-thickness: 1px;
  }
}