.breadcrumb {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  margin: 0;
  color: var(--breadcrumb-color);
  list-style: none;

  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: var(--breadcrumb-color);
    white-space: nowrap;

    // Remove any existing content between items
    &::before,
    &::after {
      display: none !important;
    }

    // Add new separator
    &:not(:last-child) {
      position: relative;
      padding-right: 1.5rem;

      &::after {
        position: absolute;
        top: 50%;
        right: 0.5rem;
        display: block !important;
        line-height: 1;
        color: var(--breadcrumb-color);
        content: '/';
        transform: translateY(-50%);
      }
    }

    a {
      display: inline-flex;
      gap: 0.375rem;
      align-items: center;
      color: var(--breadcrumb-color);
      text-decoration: none;
      transition: all 0.2s ease;

      &:hover {
        color: var(--breadcrumb-hover-color);
      }

      i {
        margin-top: -0.125rem;
        font-size: 1rem;
        line-height: 1;
      }
    }

    &.active {
      font-weight: 500;
      color: var(--breadcrumb-active-color);
    }
  }

  // Custom separator variants
  &.separator-chevron {
    .breadcrumb-item:not(:last-child)::after {
      right: 0.5rem;
      margin-top: -1px;
      font-size: 1.125rem;
      line-height: 1;
      content: '›';
    }
  }

  &.separator-dot {
    .breadcrumb-item:not(:last-child)::after {
      right: 0.5rem;
      font-size: 0.875rem;
      line-height: 1;
      content: '•';
    }
  }

  // Responsive styles
  @media (max-width: 640px) {
    font-size: 0.75rem;

    .breadcrumb-item {
      &:not(:last-child) {
        padding-right: 1.25rem;

        &::after {
          right: 0.375rem;
        }
      }
    }
  }
}

// Interactive breadcrumb with dropdown
.breadcrumb-item {
  .dropdown-toggle {
    &::after {
      margin-top: -0.255rem;
    }
  }
}
