.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition:
    color var(--duration-state) var(--easing-state),
    translate var(--duration-state) var(--easing-state);
}

.nav-link__label {
  min-inline-size: 0;
}

.nav-link__meta {
  display: flex;
  flex: none;
  align-items: center;
  margin-inline-start: auto;
}

@media (hover: hover) {
  .nav-link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
  }
}

.nav-link--bar {
  --icon-size: var(--icon-size-md);

  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3xs);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-3xs);
  font-size: var(--font-size-caption);
}

.nav-link--bar .nav-link__label {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link--bar .nav-link__meta {
  --nav-link-meta-offset: calc(var(--icon-size-md) / 2 + var(--space-xs));

  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% + var(--nav-link-meta-offset));
  translate: -50% 0;
  margin-inline-start: 0;
}

.nav-link--current {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

@media (pointer: coarse) {
  .nav-link {
    min-block-size: var(--control-block-size-compact);
  }
}

@media (forced-colors: active) {
  .nav-link--current {
    outline: var(--focus-ring-width) solid currentcolor;
  }
}