@use "./../variables" as *;
@use "./../functions" as *;
@use "./../mixins/list" as *;

.breadcrumbs {
  --breadcrumb-color: var(--medium);
  --breadcrumb-hover-color: color-mix(in oklab, var(--medium), #000 #{$link-shade-percentage});

  @include make-list-unstyled;

  display: flex;
  flex-wrap: wrap;
  color: var(--breadcrumb-color);

  & li {
    padding-right: 1em;
    position: relative;

    &:not(:last-child) {
      &::after {
        content: "";
        position: absolute;
        width: 1em;
        height: 0.85em;
        background-image: escape-svg($breadcrumb-indicator);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }

    & a {
      color: var(--breadcrumb-color);

      &:hover {
        color: var(--breadcrumb-hover-color);
      }
    }
  }
}