@reference "../../../styles/index.css";

.listItemWrapper {
  @apply mt-0;
}

.listItem,
.listItem:link,
.listItem:active {
  @apply aria-current:bg-brand-600
    flex
    size-10
    cursor-pointer
    items-center
    justify-center
    rounded-sm
    px-3
    py-2.5
    text-neutral-800
    aria-current:cursor-default
    aria-current:text-white
    motion-safe:transition-colors
    dark:text-neutral-200;

  &:hover:not([aria-current='page']) {
    @apply bg-neutral-100
      text-neutral-800
      dark:bg-neutral-900
      dark:text-neutral-200;
  }
}
