/**
 * @file
 * Breadcrumb styles — mobile first.
 */

.layout-breadcrumb {
  max-inline-size: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
}

.mwp-breadcrumb {
  padding-block: 0;

  .menu__menu {
    --breadcrumb-font-family: 'Gibson', 'Segoe UI', sans-serif;
    list-style: none;
    margin: 0;
    padding-block: 1.5rem;
    padding-inline: 0;
    font-family: var(--breadcrumb-font-family);

    /* Mobile: horizontally scrollable trail with right-edge fade affordance */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    /* Bleed to viewport edges so the trail doesn't clip at the container margin */
    inline-size: calc(100% + 2rem);
    margin-inline-start: -1rem;
    padding-inline-start: 1rem;
    padding-inline-end: 2rem;

    @media (min-width: 48rem) {
      overflow-x: unset;
      white-space: unset;
      -webkit-mask-image: none;
      mask-image: none;
      inline-size: auto;
      margin-inline-start: 0;
      padding-inline-start: 0;
      padding-inline-end: 0;
    }

    li:first-child .menu__item-link {
      color: var(--color-text-brand);
      margin-inline-start: -0.5rem;
    }
  }

  .menu__item {
    display: inline;
  }

  .menu__item-link {
    display: inline-block;
    padding-block: 0.625rem;
    padding-inline: 0.5rem;
    color: var(--color-text-brand);
    font-size: 1rem;

    &:focus-visible {
      color: var(--color-text-brand);
      outline: none;
      text-decoration: underline;
    }

    /* Current page breadcrumb styling - visible but not clickable */
    &[aria-current='page'],
    &[href=""] {
      color: var(--color-text-placeholder);
      text-decoration: none;
      cursor: default;
      pointer-events: none;
    }
  }

  .menu__item + .menu__item::before {
    content: '/';
    display: inline-block;
    color: var(--color-text-brand);
    margin: 0;
  }
}