@layer components {
  .breadcrumb-caret:before {
    @apply w-0 h-0 content-[''] left-15 absolute border-x-[7px] border-t-[6px] border-t-gray-400 border-x-transparent border-solid;
  }

  .breadcrumb-item {
    height: var(--breadcrumb-item-height);
  }

  .breadcrumb-item:hover ~ .breadcrumb-item .breadcrumb-link {
    @apply text-gray-300;
  }

  @media (prefers-reduced-motion) {
    .breadcrumbs * {
      @apply !transition-none;
    }
  }
}