@import "./vars.pcss";

.breadcrumbs {
  display: var(--breadcrumbsDisplay);
  font-size: var(--breadcrumbsFontSize);
  font-weight: var(--breadcrumbsFontWeight);
  line-height: var(--breadcrumbsLineHeight);
  width: var(--breadcrumbsWidth);
  max-width: var(--breadcrumbsMaxWidth);
  padding: var(--breadcrumbsPadding);
  margin-inline: var(--breadcrumbsMarginInline);
  @mixin mb var(--breadcrumbsMarginBottom);

  &__list {
    display: var(--breadcrumbsListDisplay);
    flex-flow: var(--breadcrumbsListFlexFlow);
    align-items: var(--breadcrumbsListAlignItems);
    gap: var(--breadcrumbsListGap);
    overflow: var(--breadcrumbsListOverflow);
    @mixin resetList;
  }

  &__item {
    display: var(--breadcrumbsItemDisplay);
    flex: var(--breadcrumbsItemFlex);
    align-items: var(--breadcrumbsItemAlignItems);
    gap: var(--breadcrumbsItemGap);
    white-space: var(--breadcrumbsItemWhiteSpace);

    @mixin nfc {
      &::before {
        content: var(--breadcrumbsItemBeforeElContent);
        display: var(--breadcrumbsItemBeforeElDisplay);
        height: var(--breadcrumbsItemBeforeElHeight);
        width: var(--breadcrumbsItemBeforeElWidth);
        color: var(--breadcrumbsItemBeforeElColor);
        margin: var(--breadcrumbsItemBeforeElMargin);
      }
    }

    @mixin nlc {
      margin: var(--breadcrumbsItemMargin);
    }
  }

  &__link {
    color: var(--breadcrumbsLinkColor);
    text-decoration: var(--breadcrumbsLinkTextDecoration);
    @mixin transition;

    @mixin hover {
      --breadcrumbsLinkColor: var(--breadcrumbsLinkHoverColor);
    }

    &--isCurrent {
      --breadcrumbsLinkColor: var(--breadcrumbsCurrentLinkColor);

      @mixin hover {
        --breadcrumbsLinkColor: var(--breadcrumbsCurrentLinkHoverColor);
      }
    }
  }

  &&--isScroll {
    --breadcrumbsWidth: 100dvw;
    --breadcrumbsPadding: 0 var(--gridPadding, 0);
    --breadcrumbsMarginInline: calc(var(--gridPadding, 0) * -1) 0;

    --breadcrumbsListFlexFlow: row nowrap;
    --breadcrumbsListOverflow: auto hidden;
    @mixin customScrollbar;
  }

  &&--isTextCropped {
    --breadcrumbsListDisplay: block;
    --breadcrumbsListOverflow: hidden;
    --breadcrumbsListFlexFlow: row nowrap;

    --breadcrumbsItemDisplay: inline-flex;

    --breadcrumbsItemBeforeElDisplay: inline-flex;

    .breadcrumbs {
      &__list {
        @mixin textOverflow;
      }
    }
  }
}