btu-nav-rail {
  --item-h: 36px;
  --item-fixed-h: 68px;

  @apply flex h-full flex-col overflow-hidden overflow-y-auto !bg-gray-50 text-sm font-semibold @container;

  > ul {
    @apply contents;
  }

  /* All the interactive elements in the nav rail. */
  * > :is(a, button) {
    @apply flex min-h-[--item-h] w-full flex-nowrap place-content-center items-center gap-2 rounded-lg px-2 font-semibold text-gray-700 no-underline focus-within:text-gray-700 hover:bg-gray-100 hover:text-gray-900 @[80px]:items-start @[80px]:pb-1.5 @[80px]:pt-2 @[80px]:[place-content:normal];

    /* Counter the 2px center-origin shift from btu-icon's gradient-fill scale. */
    > btu-icon {
      @apply @[80px]:-mt-[2px];
    }
  }

  /* Interactive elements which are in an expanded state. */
  * > :is(a, button)[aria-expanded='true'] {
    @apply bg-primary-50 text-gray-900 more-contrast:bg-primary-900 more-contrast:text-white;

    btu-icon {
      @apply more-contrast:bg-white more-contrast:bg-none;
    }
  }

  /* The interactive elements of fixed items in the nav rail. */
  > ul > li:not(:has(ul)) :is(a, button) {
    @apply gap-3 text-sm;
  }

  /* Fills the remaining vertical space. */
  > ul > li:first-of-type {
    @apply flex-1 overflow-auto overscroll-contain;
  }

  > ul > li:first-of-type > ul {
    @apply grid auto-rows-min gap-2 overscroll-contain p-4;
  }

  > ul > li:not(:has(ul)) {
    @apply h-[--item-fixed-h] w-full place-content-center border-t border-t-gray-200 p-4 [flex:0_0_auto];
  }
}
