@use '@justeattakeaway/pie-css/scss' as p;

:host {
  display: block;
}

.c-breadcrumb {
  --breadcrumb-background-color: var(--dt-color-transparent);
  --breadcrumb-item-flex-direction: row;
  --breadcrumb-item-color: var(--dt-color-content-link);
  --breadcrumb-separator-color: var(--dt-color-content-subdued);
  --breadcrumb-separator-transform: none;

  background-color: var(--breadcrumb-background-color);
  padding-block-start: var(--dt-spacing-a);
  padding-block-end: var(--dt-spacing-a);
}

.c-breadcrumb--scrim {
  --breadcrumb-background-color: var(--dt-color-overlay);
  --breadcrumb-item-color: var(--dt-color-content-link-light);
  --breadcrumb-separator-color: var(--dt-color-content-light);

  border-radius: var(--dt-radius-rounded-e);
  padding-inline-start: var(--dt-spacing-d);
  padding-inline-end: var(--dt-spacing-d);
}

.c-breadcrumb-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row;
  gap: var(--dt-spacing-a);
}

.c-breadcrumb-item {
  display: flex;
  flex-direction: var(--breadcrumb-item-flex-direction);
  align-items: center;
  white-space: nowrap;
  gap: var(--dt-spacing-a);

  pie-link {
    --link-text-color: var(--breadcrumb-item-color);
    --link-font-weight: var(--dt-font-body-strong-l-link-weight);
  }
}

.c-breadcrumb-separator {
  display: inline-flex;
  color: var(--breadcrumb-separator-color);
  transform: var(--breadcrumb-separator-transform);

  &:dir(rtl) {
    --breadcrumb-separator-transform: rotate(180deg);
  }
}

:host([isCompact]) {
  .c-breadcrumb {
    --breadcrumb-item-flex-direction: row-reverse;
    --breadcrumb-separator-transform: rotate(180deg);
  }

  ::slotted(pie-breadcrumb-item:not(:nth-last-of-type(2), :only-child)) {
    display: none;
  }
}

:host([hideCurrentPage]) {
  ::slotted(pie-breadcrumb-item:last-of-type) {
    display: none;
  }
}

:host(:last-of-type:not(:only-of-type)) {
  pie-link {
    --link-font-weight: var(--dt-font-body-l-link-weight);

    &::part(base):hover,
    &::part(base):active {
      --link-text-decoration: none;
    }

    span {
      max-width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .c-breadcrumb-separator {
    display: none;
  }
}