/* Shared heading primitive for forms, cards and compact module surfaces. */

.vk-heading {
  --vk-heading-gap: 7px;
  --vk-heading-padding: 4px 2px 0;
  --vk-heading-icon-size: 22px;
  --vk-heading-icon-glyph-size: 16px;
  --vk-heading-icon-bg: var(--vk-selected-paper-bg, var(--vk-paper-depth-raised-max-bg));
  --vk-heading-icon-color: var(--vk-text-primary);
  --vk-heading-title-color: var(--vk-text-primary);
  --vk-heading-title-size: var(--vk-font-label);
  --vk-heading-title-weight: var(--vk-weight-bold);
  --vk-heading-action-size: 21px;
  --vk-heading-action-icon-size: 16px;
  --vk-heading-action-color: var(--vk-text-muted);
  --vk-heading-action-hover-color: var(--vk-action-delete-text);

  display: flex;
  align-items: center;
  gap: var(--vk-heading-gap);
  min-width: 0;
  padding: var(--vk-heading-padding);
  box-sizing: border-box;
  color: var(--vk-heading-title-color);
}

.vk-heading--form {
  --vk-heading-title-size: var(--vk-heading-form-title-size, var(--vk-font-label));
}

.vk-heading--tool-card {
  --vk-heading-title-size: var(--vk-heading-tool-card-title-size, var(--vk-font-label));
}

.vk-heading--module {
  --vk-heading-title-size: var(--vk-heading-module-title-size, var(--vk-font-label));
}

.vk-heading--compact {
  --vk-heading-gap: 6px;
  --vk-heading-icon-size: 20px;
  --vk-heading-icon-glyph-size: 15px;
  --vk-heading-action-size: 20px;
  --vk-heading-action-icon-size: 15px;
}

.vk-heading__icon {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vk-heading-icon-size);
  width: var(--vk-heading-icon-size);
  max-width: var(--vk-heading-icon-size);
  min-height: var(--vk-heading-icon-size);
  height: var(--vk-heading-icon-size);
  max-height: var(--vk-heading-icon-size);
  padding: 0;
  border: 0;
  border-radius: var(--vk-paper-control-card-radius, 8px);
  box-sizing: border-box;
  background: var(--vk-heading-icon-bg);
  color: var(--vk-heading-icon-color);
  font-size: var(--vk-font-label);
  font-weight: var(--vk-weight-bold);
  line-height: 0;
}

.vk-heading__icon > i,
.vk-heading__icon > svg,
.vk-heading__icon > .lucide,
.vk-heading__icon > span {
  display: block;
  flex: 0 0 auto;
  width: var(--vk-heading-icon-glyph-size);
  height: var(--vk-heading-icon-glyph-size);
  line-height: 1;
}

.vk-heading__icon svg,
.vk-heading__icon .lucide {
  stroke-width: 1.8;
}

.vk-heading__title {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--vk-heading-title-color);
  font-size: var(--vk-heading-title-size);
  font-weight: var(--vk-heading-title-weight);
  line-height: var(--vk-line-tight);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vk-heading__spacer {
  flex: 0 0 auto;
  width: var(--vk-heading-action-size);
  height: var(--vk-heading-action-size);
  pointer-events: none;
}

.vk-heading__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--vk-heading-action-size);
  width: var(--vk-heading-action-size);
  max-width: var(--vk-heading-action-size);
  min-height: var(--vk-heading-action-size);
  height: var(--vk-heading-action-size);
  max-height: var(--vk-heading-action-size);
  padding: 0;
  border: 0;
  border-radius: var(--vk-paper-control-card-radius, 8px);
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  color: var(--vk-heading-action-color);
  font-size: 0;
  line-height: 0;
}

.vk-heading__action:hover {
  color: var(--vk-heading-action-hover-color);
}

.vk-heading__action-icon,
.vk-heading__action svg,
.vk-heading__action .lucide {
  flex: 0 0 auto;
  min-width: var(--vk-heading-action-icon-size);
  width: var(--vk-heading-action-icon-size);
  max-width: var(--vk-heading-action-icon-size);
  min-height: var(--vk-heading-action-icon-size);
  height: var(--vk-heading-action-icon-size);
  max-height: var(--vk-heading-action-icon-size);
}

.vk-heading__value {
  position: relative;
  color: var(--vk-heading-icon-color);
  font-size: var(--vk-font-tiny);
  font-weight: var(--vk-weight-heavy);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vk-heading__value-text,
.vk-heading__icon > .vk-heading__value-text {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: currentColor;
  font-size: var(--vk-font-tiny);
  font-weight: var(--vk-weight-heavy);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}