/**
 * @file
 * Styles for Webform Term Hierarchical Checkboxes.
 */

/**
 * Wrapper element.
 */
.webform-term-hierarchical-checkboxes {
  display: block;
}

/**
 * Every individual term row.
 */
.term-hierarchical-item {
  display: flex;
  align-items: baseline;
  line-height: 1.4;
}

/**
 * Child items receive progressive left indentation based on their
 * --term-depth CSS custom property (set inline by PHP).
 */
.term-hierarchical-child {
  padding-inline-start: calc(var(--term-depth, 1) * 1.5rem);
}

/**
 * Expander terms (parent items with children).
 * Their checkbox is a UI toggle, not a value selector.
 */
.term-hierarchical-expander > label {
  font-weight: 600;
  cursor: pointer;
}

/**
 * Visual expand/collapse caret next to the expander label.
 * The caret rotates when the parent checkbox is checked (expanded state).
 */
.term-hierarchical-expander > label::before {
  content: '▶';
  display: inline-block;
  font-size: 0.6em;
  margin-inline-end: 0.4em;
  transition: transform 0.15s ease;
  vertical-align: middle;
}

.term-hierarchical-expander input[type="checkbox"]:checked ~ label::before {
  transform: rotate(90deg);
}

/**
 * Leaf terms are the actual selectable values.
 */
.term-hierarchical-leaf > label {
  font-weight: normal;
}