.card-breadcrumb,
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--Breadcrumb-Gap, 0.5rem);
  color: var(--Breadcrumb-Text-Enabled, #63727d);

  & .breadcrumb-trail {
    display: flex;
    align-items: center;
    gap: var(--Breadcrumb-Gap, 0.5rem);
    min-width: 0;
  }

  & .breadcrumb-back-link {
    display: none;
    align-items: center;
    gap: var(--Breadcrumb-Gap, 0.5rem);
    color: inherit;
    text-decoration-line: none;
    min-width: 0;
  }

  & .breadcrumb-item {
    color: inherit;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease-in-out;
    font: var(--Body-Small-Medium);
    text-decoration-line: none;
    cursor: default;
    pointer-events: none;
  }
}

.page-breadcrumb .breadcrumb-back-link {
  cursor: pointer;
  text-decoration-line: none;

  & .icon {
    text-decoration-line: none;
  }

  & .breadcrumb-item {
    max-width: 25ch;
    pointer-events: none;
    cursor: inherit;
    font: var(--Single-Line-Body-Small-Link);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
  }

  &:hover {
    color: var(--Breadcrumb-Text-Hover, #001c35);
  }
}

.card-breadcrumb .breadcrumb-item:not([aria-current="page"]),
.page-breadcrumb .breadcrumb-trail .breadcrumb-item:not([aria-current="page"]) {
  font: var(--Single-Line-Body-Small-Link);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  cursor: pointer;
  pointer-events: auto;

  &:hover {
    color: var(--Breadcrumb-Text-Hover, #001c35);
  }
}

@media (width < 768px) {
  .page-breadcrumb .breadcrumb-back-link {
    display: inline-flex;
  }

  .page-breadcrumb .breadcrumb-trail {
    display: none;
  }
}

/* Page breadcrumb widget container (injected section) */
.section-page-breadcrumb .default-content-wrapper {
  display: flex;
  padding-bottom: var(--P00, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--P00, 0);
  align-self: stretch;
}

/* Remove section vertical padding for the injected breadcrumb section */
.section.section-page-breadcrumb:not(.article-page-breadcrumb) {
  margin-inline: auto;
  max-width: var(--Layout-Page-Width, 90rem);
}

main .section.section-page-breadcrumb:not(.article-page-breadcrumb) {
  padding: var(--Spacing-Padding-Xl, 1.5rem) var(--Layout-Section-Margin-Horizontal-Padding, 4rem) var(--P00, 0) var(--Layout-Section-Margin-Horizontal-Padding, 4rem);
}

.section.section-page-breadcrumb.article-page-breadcrumb .default-content-wrapper {
  margin-inline: auto;
  width: 100%;
  max-width: var(--Layout-Page-Width, 90rem);
}