@layer lotek {
  .lt-breadcrumbs {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-breadcrumbs-gap, var(--lt-spacing-2));
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit;
    font-size: var(--lt-font-size-s);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-subtle);
  }

  .lt-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: var(--lt-breadcrumbs-gap, var(--lt-spacing-2));
  }

  /* The separator is decoration. Generated content is still announced, so
     it gets an empty alternative text after the slash. Browsers that do not
     know that form discard the whole declaration, and the separator
     disappeared: so it sits behind `@supports`, and those browsers keep the
     slash without silencing it. */
  .lt-breadcrumbs li + li::before {
    content: "/";
    color: var(--lt-color-neutral-text-subtle);
  }

  @supports (content: "/" / "") {
    .lt-breadcrumbs li + li::before {
      content: "/" / "";
    }
  }

  .lt-breadcrumbs a {
    color: var(--lt-color-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.14em;
  }

  /* The current step is excluded. Without `:not()` this rule won on
     specificity over `[aria-current="page"]`, and the last step turned blue
     under the mouse even though it is not a place to go. */
  .lt-breadcrumbs a:not([aria-current="page"]):hover {
    color: var(--lt-color-accent-text-strong);
  }

  .lt-breadcrumbs a:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  .lt-breadcrumbs [aria-current="page"] {
    color: var(--lt-color-neutral-text-strong);
    font-weight: var(--lt-font-weight-semibold);
    text-decoration: none;
  }
}