/* Category header partial */

.category-header {
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-md);
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-color: var(--border-default);
  padding: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}

.category-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-12);
}

.category-header-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.category-header-dot {
  width: var(--spacing-12);
  height: var(--spacing-12);
  border-radius: var(--corner-radius-full);
}

.category-header-title {
  font-size: var(--font-size-20);
  line-height: 1.75rem;
  font-weight: var(--font-weight-700);
  color: var(--text-primary);
}

.category-header-dashboard-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);

  &:hover { color: var(--text-hover); }
}
html.theme-dark .category-header-dashboard-link:hover { color: var(--text-hover); }

.category-header-dashboard-icon {
  width: var(--spacing-16);
  height: var(--spacing-16);
}

.category-header-description { margin-bottom: var(--spacing-16); }

.category-header-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12);
  font-size: var(--font-size-12);
  line-height: 1rem;
}

.category-header-concern,
.category-header-normal {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-4);
  border-radius: var(--corner-radius-full);
}

.category-header-concern-dot,
.category-header-normal-dot {
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--corner-radius-full);
}

.category-header-concern-text,
.category-header-normal-text {
  font-weight: var(--font-weight-500);
}

.category-header-normal { background-color: var(--background-surface-2); }
html.theme-dark .category-header-normal {
  background-color: color-mix(in oklab, var(--color-spring-green-30) 40%, transparent);
}

.category-header-normal-dot { background-color: var(--background-surface-2); }

.category-header-normal-text { color: var(--text-primary); }
html.theme-dark .category-header-normal-text { color: var(--text-primary); }

.category-header-divider,
.category-header-actions-count {
  color: var(--text-tertiary);
}