@layer components {
  .breadcrumbs {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
    justify-content: center;
    margin-inline: auto;
    min-inline-size: 0;
    margin: 0 auto;
    list-style-type: none;
    padding: 0;

    input {
      field-sizing: content;
      min-inline-size: 8ch;
    }

    /* Use inner shadow to account for the truncated breadcrumb's hidden overflow */
    .btn:hover,
    .btn:focus-visible {
      box-shadow: inset 0 0 0 var(--hover-size) var(--hover-color);
    }
  }

  .breadcrumb {
    max-inline-size: 40ch;
    min-inline-size: 0;

    a {
      color: inherit;
      text-decoration: none;
      text-underline-offset: 0.25ch;
    }

    &:not(:first-child) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:not(:last-child) {
      flex-shrink: 0;

      a {
        font-weight: bold;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}