.LinkCarousel {
  /* Magic margin to horizontally align the first group if items with the same gap
    other dashboard widgets have from the edge of the container.
    The 'ch' value should be equal to the amount of whitespace chars used in the
    btu-scrollshadow. */
  --offset-inline: 0px;
  @apply btu-scrollshadow-50 relative -me-6 flex w-full gap-3 @container/LinkCarousel supports-[animation-timeline:--scroll-timeline]:[--offset-inline:calc((0.5rem_+_3ch)_*_-1)];
}

.LinkCarousel-title {
  @apply text-sm;
}

.LinkCarousel-group {
  @apply first:ms-[--offset-inline];

  > h3 {
    @apply hidden;
  }

  > ul {
    @apply flex h-full gap-3;
  }
}

/* Empty groups are rendered, so we must hide them. */
.LinkCarousel-group:has(> ul:empty) {
  @apply hidden;
}

.LinkCarousel:has(.p-commonContent-favorites .pageThumbnails:empty)
  .p-commonContent-new {
  @apply ms-[--offset-inline];
}

.LinkCarousel-item {
  --content-icon-size: 3rem;
  @apply relative flex w-[29cqi] min-w-[9rem] cursor-pointer flex-col gap-2 overflow-hidden rounded-lg border border-gray-300 bg-white p-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-100 [@container_LinkCarousel_(width_>_650px)]:w-[14rem];

  > a {
    @apply line-clamp-3 pe-6 font-semibold text-gray-900 no-underline hover:text-gray-900;
  }
}

.LinkCarousel-item-favorite {
  @apply absolute right-2 top-2 flex size-7 items-center justify-center before:size-5 touch-device:p-2;

  &:not(.is-unstarred) {
    @apply before:blokk before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.starFilled)];
  }

  &.is-unstarred {
    @apply opacity-0 before:btu-icon before:btu-icon-star before:[--icon-size:theme(size.5)] touch-device:opacity-100;
  }
}

.LinkCarousel-item:focus-within .LinkCarousel-item-favorite.is-unstarred,
.LinkCarousel-item:hover .LinkCarousel-item-favorite.is-unstarred {
  @apply opacity-100;
}

.LinkCarousel-item.is-image {
  @apply after:btu-icon-via-mask before:size-[--content-icon-size] before:justify-start before:rounded-lg before:bg-primary-50 before:p-3 before:align-top before:[--tw-content:""] after:absolute after:btu-icon-gradient-primary after:btu-icon-lg after:[transform:translate(theme(size.3),theme(size.3))] hover:before:bg-gray-50 dark:before:!bg-gray-100 dark:hover:before:!bg-gray-50;

  > a {
    @apply line-clamp-1 pe-0;
  }
}

.LinkCarousel-item.is-image:not([data-icon-name]) {
  @apply after:btu-icon-via-mask-zap;
}

/* Legacy. */
.p-commonContent-new > form {
  @apply hidden;
}
