/*
  Breadcrumbs component
  
  Structure:
  .a-breadcrumbs             - Base nav element
  .a-breadcrumbs-list      - List container (ol)
  .a-breadcrumbs-item    - Single crumb (li)
  .a-breadcrumbs-link  - Interactive crumb (a/button)
  .a-breadcrumbs-label - Non-interactive crumb or current page (span)
  .a-breadcrumbs-overflow  - Overflow trigger + menu container (li)
  .a-breadcrumbs-separator - Separator between crumbs (li, aria-hidden)
  
  Modifiers:
  .a-breadcrumbs-item--truncate - Clips an overlong crumb's label with an ellipsis
  
  State (no bookkeeping classes needed):
  .a-breadcrumbs-item:first-child     - Leading crumb loses its start padding
  .a-breadcrumbs-label[aria-current]  - Current page reads at full emphasis (use a non-interactive
  label, not a link, for the current page)
  .a-breadcrumbs-separator:nth-last-child(2) - Separator before the final crumb reads muted
  
  Composes with .a-btn--tertiary.a-btn--xs for the overflow trigger and .a-menu.a-list for its panel.
*/

.a-breadcrumbs {
  display: block;
}

.a-breadcrumbs-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a-breadcrumbs-item {
  display: flex;
  align-items: center;
}

.a-breadcrumbs-item--truncate {
  min-inline-size: 0;
}

.a-breadcrumbs-link {
  --radius: var(--a-breadcrumbs-link-radius, var(--lens-semantic-radius-md));
  --min-height: var(--a-breadcrumbs-link-min-height, var(--lens-core-spacing-3));
  --padding-inline: var(
    --a-breadcrumbs-link-padding-inline,
    var(--lens-semantic-spacing-desktop-padding-1)
  );
  --padding-block: var(--a-breadcrumbs-link-padding-block, var(--lens-core-spacing-0-5));
  --font-size: var(--a-breadcrumbs-link-font-size, var(--lens-semantic-font-label-sm-font-size));
  --line-height: var(
    --a-breadcrumbs-link-line-height,
    var(--lens-semantic-font-label-sm-line-height)
  );
  --letter-spacing: var(
    --a-breadcrumbs-link-letter-spacing,
    var(--lens-semantic-font-label-sm-letter-spacing)
  );
  --font-weight: var(--a-breadcrumbs-link-font-weight, var(--lens-semantic-font-weight-emphasis));
  --color: var(--a-breadcrumbs-link-color, var(--lens-semantic-color-type-default));
  --background: var(--a-breadcrumbs-link-background, var(--lens-core-color-transparent));
  --hover-background: var(
    --a-breadcrumbs-link-hover-background,
    var(--lens-semantic-color-action-secondary-hover-fill)
  );
  --active-background: var(
    --a-breadcrumbs-link-active-background,
    var(--lens-semantic-color-action-secondary-active-fill)
  );
  box-sizing: border-box;
  display: inline-block;
  min-height: var(--min-height);
  border-radius: var(--radius);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  color: var(--color);
  background-color: var(--background);
  border: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &:hover {
    background-color: var(--hover-background);
  }
  &:active {
    background-color: var(--active-background);
  }
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: var(--lens-semantic-border-width-focus-offset);
  }
}

.a-breadcrumbs-label {
  --min-height: var(--a-breadcrumbs-label-min-height, var(--lens-core-spacing-3));
  --padding-inline: var(
    --a-breadcrumbs-label-padding-inline,
    var(--lens-semantic-spacing-desktop-padding-1)
  );
  --padding-block: var(--a-breadcrumbs-label-padding-block, var(--lens-core-spacing-0-5));
  --font-size: var(--a-breadcrumbs-label-font-size, var(--lens-semantic-font-label-sm-font-size));
  --line-height: var(
    --a-breadcrumbs-label-line-height,
    var(--lens-semantic-font-label-sm-line-height)
  );
  --letter-spacing: var(
    --a-breadcrumbs-label-letter-spacing,
    var(--lens-semantic-font-label-sm-letter-spacing)
  );
  --font-weight: var(--a-breadcrumbs-label-font-weight, var(--lens-semantic-font-weight-emphasis));
  --color: var(--a-breadcrumbs-label-color, var(--lens-semantic-color-type-muted));
  --current-color: var(
    --a-breadcrumbs-label-current-color,
    var(--lens-semantic-color-type-default)
  );
  box-sizing: border-box;
  display: inline-block;
  min-height: var(--min-height);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  color: var(--color);
  white-space: nowrap;
}

.a-breadcrumbs-item:first-child .a-breadcrumbs-label {
  padding-inline-start: var(--lens-semantic-spacing-desktop-padding-0);
}

.a-breadcrumbs-label[aria-current] {
  color: var(--current-color);
}

.a-breadcrumbs-item--truncate .a-breadcrumbs-link,
.a-breadcrumbs-item--truncate .a-breadcrumbs-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-breadcrumbs-overflow {
  display: flex;
  align-items: center;
}

.a-breadcrumbs-separator {
  --color: var(--a-breadcrumbs-separator-color, var(--lens-semantic-color-ui-divider-secondary));
  --last-color: var(--a-breadcrumbs-separator-last-color, var(--lens-semantic-color-type-muted));
  --width: var(--a-breadcrumbs-separator-width, var(--lens-semantic-icon-size-md));
  --height: var(--a-breadcrumbs-separator-height, var(--lens-semantic-icon-size-md));
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color);
  width: var(--width);
  height: var(--height);
  & svg {
    width: 100%;
    height: 100%;
  }
}

.a-breadcrumbs-separator:nth-last-child(2) {
  color: var(--last-color);
}