/**
 * Collapsible section
 *
 * Shared by the blocks drawer's category sections and the inspector's field
 * groups, so both read as the same control. See CollapsibleSectionHeader.tsx.
 *
 * A module, so names are scoped by the bundler and need no `p1-` prefixing.
 */

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.toggle:focus-visible {
  outline: 2px solid var(--pds-color-interactive-primary, var(--puck-css-primary));
  outline-offset: 2px;
  border-radius: 4px;
}

.title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
}

.toggle:hover .title {
  color: var(--pds-color-foreground-default, var(--puck-css-text));
}

.meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pds-color-foreground-default-secondary, var(--puck-css-text-secondary));
  flex-shrink: 0;
}

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--pds-color-badge-silver-background, #f0f0f0);
  color: var(--pds-color-badge-silver-foreground, #9a9a9a);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}

/* Field groups already sit inside Puck's field padding, unlike the drawer's
   categories, so they add none of their own and line up with the field labels
   above and below them. The ancestor stays global — P1InspectorFields applies it
   as a string literal and consumers theme against it. */
:global(.p1-inspector-fields) .toggle {
  padding: 10px 0;
}

/* A section that carries its own control sits it beside the toggle rather than
   inside it, since a control within the button would nest one interactive
   element in another. The count and chevron keep the end of the row: the
   control takes a slot the meta opens up before them, so it reads as part of
   the same run. Like a field's affordances, it stays out of the panel until the
   header is hovered or holds focus. */
.header {
  position: relative;

  /* What the toggle ends with: an 18px count, an 8px gap, a 12px chevron. */
  --section-meta-width: 38px;
  --section-action-width: 28px;
  --section-action-gap: 8px;
}

/* The meta opens the slot; the control sits in it. Both are measured from the
   same two values, so the control lands flush against the space made for it.
   A control that resolved to nothing leaves its span empty, and no slot opens. */
.header:has(.action:not(:empty)) .meta {
  padding-inline-start: calc(var(--section-action-width) + var(--section-action-gap));
}

.action {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--section-meta-width) + var(--section-action-gap));
  display: flex;
  align-items: center;
  line-height: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

.header:hover .action,
.header:focus-within .action,
.action:has([data-open='true']) {
  opacity: 1;
}