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

  &__header {
    @apply p-4 md:p-6 pb-0 flex gap-4  border-b border-gray-300;

    button {
      @apply pb-6 text-base md:text-lg  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 {
    @apply p-4;

    overflow-wrap: anywhere;
    ul[aria-hidden='true'] {
      @apply hidden;
    }
    ul.sommaire-index,
    ul.footnotes-index {
      @apply bg-white overflow-y-auto max-h-[200px] lg:max-h-[calc(80vh-80px)] p-6 mb-0;
    }
  }

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

  @media (max-width: 960px) {
    @apply bg-carhop-green-700 relative  z-50;

    .index-panel__header {
      border-bottom: 0.25px solid rgba(255, 255, 255, 0.4);
      button {
        @apply text-white;

        img {
          @apply filter-white;
        }
        &[aria-selected='true'] {
          @apply text-white opacity-100;
          .icon {
            @apply filter-white opacity-100;
          }
          &:after {
            @apply bg-white;
          }
        }
      }
    }
  }
}