/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/hyphenation" as *;
@use "../../common/resets" as *;
@use "../../common/text-rendering" as *;

.ams-breadcrumb {
  /*
   * If break-after is supported, use it to avoid Breadcrumbs from being the last item on a page when printed.
   * If it is not supported, it is ignored.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  break-after: avoid;
  font-family: var(--ams-breadcrumb-font-family);
  font-size: var(--ams-breadcrumb-font-size);
  font-weight: var(--ams-breadcrumb-font-weight);
  line-height: var(--ams-breadcrumb-line-height);
}

.ams-breadcrumb__list {
  @include reset-ol;

  box-sizing: border-box;
  break-inside: avoid;

  @include hyphenation;
  @include text-rendering;
}

.ams-breadcrumb__item {
  display: inline;
}

.ams-breadcrumb__item:not(:last-child)::after {
  background-image: var(--ams-breadcrumb-separator-background-image);
  background-repeat: no-repeat;
  block-size: var(--ams-breadcrumb-separator-block-size);
  content: "";
  display: inline-block;
  inline-size: var(--ams-breadcrumb-separator-inline-size);
  margin-inline: var(--ams-breadcrumb-separator-margin-inline);
}

.ams-breadcrumb__link {
  color: var(--ams-breadcrumb-link-color);
  outline-offset: var(--ams-breadcrumb-link-outline-offset);
  text-decoration-line: var(--ams-breadcrumb-link-text-decoration-line);
  text-decoration-thickness: var(--ams-breadcrumb-link-text-decoration-thickness);
  text-underline-offset: var(--ams-breadcrumb-link-text-underline-offset);

  &:hover {
    color: var(--ams-breadcrumb-link-hover-color);
    text-decoration-line: var(--ams-breadcrumb-link-hover-text-decoration-line);
  }
}