/* =========================
   Breadcrumbs
   Figma: Breadcrumbs.
========================= */

@use "../kit-deps" as *;

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: $space-2;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: $font-family-base;
  font-size: 14px;
  font-weight: $font-weight-semibold;
  line-height: 1;
  color: $neutral-700;

  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: $space-2;

    a {
      color: inherit;
      text-decoration: none;
      transition: color $motion-base $motion-ease;

      &:hover,
      &.is-hover {
        color: $neutral-900;
        text-decoration: underline;
      }

      &:active,
      &.is-active {
        color: $neutral-900;
      }
    }

    span {
      color: inherit;
    }

    &.is-active span {
      color: $neutral-900;
    }
  }

  .breadcrumb-separator {
    color: $neutral-400;
    user-select: none;
  }

  .breadcrumb-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: $space-1 $space-2;
    border: none;
    border-radius: $radius-full;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color $motion-base $motion-ease, background-color $motion-base $motion-ease;

    &:hover,
    &.is-hover {
      color: $neutral-900;
      background-color: $neutral-100;
    }
  }

  // Inverted / dark-surface variant matching the Breadcrumbs.png frame
  &.breadcrumb-inverted {
    color: $neutral-400;

    .breadcrumb-item a {
      color: $neutral-400;

      &:hover,
      &.is-hover {
        color: $neutral-0;
      }

      &:active,
      &.is-active {
        color: $neutral-0;
      }
    }

    .breadcrumb-separator {
      color: $neutral-400;
    }

    .breadcrumb-item.is-active span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: $space-1 $space-4;
      border-radius: $radius-full;
      background-color: $neutral-0;
      color: $info-text;
    }

    .breadcrumb-collapse:hover,
    .breadcrumb-collapse.is-hover {
      color: $neutral-0;
      background-color: rgba($neutral-0, 0.12);
    }
  }

  // Sizes
  &.breadcrumb-sm { font-size: 12px; }
  &.breadcrumb-lg { font-size: 16px; }
}