@layer components {
  .account-crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
  }

  .account-crumbs__divider {
    color: var(--color-ink-faint);
  }

  .account-crumbs__switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    margin-block: calc((var(--tap-min) - 1lh) / -2);
    color: var(--color-link);
    -webkit-tap-highlight-color: transparent;
  }

  @media (any-hover: hover) {
    .account-crumbs__switch:hover {
      color: var(--color-ink);
    }
  }
}