.category-list,
.subcategory-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-list > li + li {
  margin-top: var(--space-16);
}

.category-parent-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}

.subcategory-list {
  margin-top: var(--space-4);
  padding-left: var(--space-12);
  border-left: var(--space-1px) solid var(--color-border-light);
}

.subcategory-list[hidden] {
  display: none;
}

.subcategory-list li + li {
  margin-top: var(--space-8);
}

.category-parent-link,
.subcategory-list a {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.category-parent-link {
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  gap: var(--space-8);
  color: var(--color-text-primary);
  font-size: var(--font-size-root);
  font-weight: var(--font-weight-semibold);
}

.category-name {
  min-width: 0;
  flex: 1 1 auto;
}

.category-count {
  flex: 0 0 auto;
  padding: var(--space-0) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-background-chip);
  color: var(--color-text-subtle);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.category-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  min-width: var(--space-48);
  min-height: var(--space-48);
  padding: var(--space-8);
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.category-toggle::after {
  width: var(--space-8);
  height: var(--space-8);
  border-right: var(--space-1px) solid currentColor;
  border-bottom: var(--space-1px) solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.category-toggle[aria-expanded="false"]::after {
  transform: rotate(-45deg);
}

.subcategory-list a {
  color: var(--color-text-primary);
  font-size: var(--font-size-root);
  font-weight: inherit;
}

.category-parent-link:hover:not([aria-current="page"]),
.subcategory-list a:hover:not([aria-current="page"]),
.category-parent-link:focus-visible,
.subcategory-list a:focus-visible,
.category-toggle:hover,
.category-toggle:focus-visible {
  background-color: var(--color-background-surface-softer);
  color: var(--color-black);
}

.category-parent-link:hover:not([aria-current="page"]),
.subcategory-list a:hover:not([aria-current="page"]) {
  transform: translateX(var(--space-4));
}

.category-parent-link:active,
.subcategory-list a:active {
  background-color: var(--color-background-chip-active);
  transform: translateX(var(--space-0));
}

.category-toggle:active {
  background-color: var(--color-background-chip-active);
}

.category-item.is-current-branch .category-parent-link:not([aria-current="page"]) {
  background-color: var(--color-background-surface-softer);
  color: var(--color-action-primary);
}

.category-parent-link[aria-current="page"],
.subcategory-list a[aria-current="page"] {
  background-color: var(--color-background-chip-active);
  color: var(--color-action-primary);
  font-weight: var(--font-weight-semibold);
}

.category-parent-link[aria-current="page"] .category-count {
  background-color: var(--color-background-surface);
  color: inherit;
}