/**
 * Breadcrumbs Component Styles
 * @package Yacht
 */

.breadcrumbs {
  padding-block: var(--space-4);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__item::after {
  content: "/";
  color: var(--color-text-muted);
}

.breadcrumbs__item:last-child::after {
  display: none;
}

.breadcrumbs__link {
  color: var(--color-text);
  text-decoration: none;
  transition: color .2s ease;
}

.breadcrumbs__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumbs__link:active {
  color: var(--color-primary-50);
}

.breadcrumbs__current {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.breadcrumbs__item--current {
  pointer-events: none;
}

@media (max-width: 768px) {
  .breadcrumbs {
    padding-block: var(--space-2);
  }

  .breadcrumbs__list {
    font-size: var(--font-size-caption);
    gap: var(--space-1);
  }

  .breadcrumbs__item {
    gap: var(--space-1);
  }
}