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

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

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: $space-3;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: $font-family-base;
  font-size: 18px;
  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;
    }
  }


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