@layer components {
  .tag-nav {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    gap: 6px;
  }

  .tag-nav__item {
    align-items: center;
    border: var(--border-default);
    display: inline-flex;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    text-decoration: none;

    &:hover {
      background: var(--color-text);
      color: var(--color-surface);

      .tag-nav__count {
        color: inherit;
      }
    }
  }

  .tag-nav__item--active {
    background: var(--color-text);
    color: var(--color-surface);

    .tag-nav__count {
      color: inherit;
    }
  }

  .tag-nav__count {
    color: var(--color-muted);
  }

  .tag-dot {
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
  }
}