.breadcrumb {
  @apply flex items-center text-primary dark:text-slate-300;
  &.breadcrumb-light {
    @apply text-white text-opacity-90;
    .breadcrumb-item {
      &:not(:first-child):before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8eeff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right breadcrumb__icon'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
      }
      &.active {
        @apply text-white text-opacity-80;
      }
    }
  }
  .breadcrumb-item {
    &:not(:first-child) {
      @apply relative ml-5 pl-0.5;
      &:before {
        content: "";
        width: 14px;
        height: 14px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right breadcrumb__icon'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: 100%;
        margin-left: -1.125rem;
        @apply absolute my-auto inset-y-0;
      }
    }
    &.active {
      @apply text-slate-800 cursor-text dark:text-slate-400;
    }
  }
}

.dark {
  .breadcrumb {
    .breadcrumb-item {
      &:not(:first-child) {
        &:before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right breadcrumb__icon'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
        }
      }
    }
  }
}