@helpwave/hightide/dist/style/uncompiled/theme/components/vertical-navigation.css

helpwave's component and theming library

@layer components {
  [data-name="vertical-navigation-menu"] {
    @apply flex-col-0 list-none m-0 p-0;
  }

  .vertical-navigation-item {
    @apply list-none m-0 p-0 outline-none;
  }

  .vertical-navigation-item-row {
    @apply relative flex-row-1 items-center min-h-11 min-w-0 h-full w-full rounded-md;

    &[data-interactable] {
      @apply hover:cursor-pointer;

      &:hover,
      &:focus-within {
        @apply bg-primary/15;
      }
    }
  }

  .vertical-navigation-group {
    @apply flex-col-0 list-none m-0 my-0.5 ml-2.5 pl-2.5 border-l border-border;
  }

  .vertical-navigation-item-link {
    @apply min-w-0 w-full min-h-11 min-w-0 min-h-11 rounded-md;

    transition: var(--focus-transitions);
    &:focus-within {
      outline: var(--focus-outline);
      outline-offset: var(--focus-outline-offset);
      box-shadow: var(--focus-box-shadow);
      border-color: var(--focus-border-color);
    }
  }

  .vertical-navigation-item-label {
    @apply flex-row-2 flex-1 items-center min-w-0 w-full min-h-11 px-2.5 py-1.5;

    &[data-action-padding] {
      @apply pr-11;
    }
  }

  .vertical-navigation-toggle {
    @apply absolute right-0 top-1/2 -translate-y-1/2;
  }

  .vertical-navigation-item-link-external-icon {
    @apply size-force-5 text-description;
  }
}