@use "../../styles/colors" as colors;
@use "../../styles/fonts" as fonts;
@use "../../styles/variables" as vars;

// Matches Angular's `flights-page-breadcrumbs .p-breadcrumb`:
// dark-blue-opacity chip with 3px/10px/4px/10px padding and
// `$space-s` bottom margin. Renders as a translucent pill over
// the hero background rather than plain inline text.
.breadcrumbs {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 4px 10px;
  margin-bottom: vars.$space-s;
  background-color: colors.$dark-blue-opacity;
  border-radius: vars.$border-radius;

  &__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: vars.$space-s;
  }

  &__item {
    display: flex;
    align-items: center;
    gap: vars.$space-s;
    font-size: fonts.$font-size-s;

    &--active {
      .breadcrumbs__text {
        color: colors.$breadcrumb-item-active-color;
      }
    }
  }

  // Angular renders middle-crumb links in solid $white and only fades
  // the final crumb to 0.75 opacity (see `page-breadcrumds.scss`). The
  // React equivalent: all links default white; the --active modifier
  // swaps to the faded tone. The span rendered for the last entry
  // follows the same active-fade via `&__text` below.
  &__link {
    color: colors.$white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &__text {
    color: colors.$white;
  }

  &__separator {
    color: colors.$breadcrumb-item-separator;
  }
}
