.breadcrumb {
  @apply w-fit;
  ul {
    @apply list-none p-0 m-0 flex flex-wrap items-center space-x-2;
    li {
      &:not(:first-child)::before {
        @apply content-["/"] mr-2 inline-block text-gray-400;
      }
      .breadcrumb-link {
        @apply text-sky-500 hover:text-sky-600 transition-all duration-300 ease-in-out;
        &.is-active {
          @apply text-gray-500 pointer-events-none;
        }
      }
    }
  }
  &.has-dots {
    ul {
      @apply list-disc space-x-6;
      li {
        &:not(:first-child) {
          @apply pl-1;
        }
        &::marker { @apply text-gray-400; }
        &:first-child { @apply list-none }
        &::before { @apply hidden; }
      }
    }
  }
  &.has-arrows {
    li {
      &:not(:first-child)::before {
        @apply content-[">"];
      }
    }
  }
}