/**
 * Stile blocco `bricks/toggle`.
 *
 * TOKEN SOVRASCRIVIBILI dal tema cliente (ridefinire su .bricks-toggle__item):
 *   --bricks-toggle-item-bg        (default: var(--color-surface-muted))
 *   --bricks-toggle-item-radius    (default: 0)
 *   --bricks-toggle-item-padding   (default: 1rem)
 *   --bricks-toggle-item-gap       (default: 0)
 *   --bricks-toggle-header-color   (default: var(--color-text))
 *   --bricks-toggle-header-size    (default: 1rem)
 *   --bricks-toggle-header-weight  (default: var(--font-weight-medium))
 *   --bricks-toggle-header-gap     (default: 1rem)
 *   --bricks-toggle-header-lh      (default: 1.2)
 *   --bricks-toggle-content-size   (default: 1rem)
 *   --bricks-toggle-content-weight (default: var(--font-weight-regular))
 *   --bricks-toggle-content-lh     (default: 1.5)
 *   --bricks-toggle-content-mt     (default: 1rem)
 *
 * SEMVER — selettori CSS pubblici (rinominarli è MAJOR):
 *   .bricks-toggle__item / .bricks-toggle__header / .bricks-toggle__title
 *   .bricks-toggle__body / .bricks-toggle__content / .bricks-toggle__icon
 *   .bricks-toggle__item.is-open
 */

/* ---- Item ---------------------------------------------------------------- */
.bricks-toggle__item {
  --bricks-toggle-item-bg:        var(--color-surface-muted);
  --bricks-toggle-item-radius:    0;
  --bricks-toggle-item-padding:   1rem;
  --bricks-toggle-item-gap:       0;
  --bricks-toggle-header-color:   var(--color-text);
  --bricks-toggle-header-size:    1rem;
  --bricks-toggle-header-weight:  var(--font-weight-medium);
  --bricks-toggle-header-gap:     1rem;
  --bricks-toggle-header-lh:      1.2;
  --bricks-toggle-content-size:   1rem;
  --bricks-toggle-content-weight: var(--font-weight-regular);
  --bricks-toggle-content-lh:     1.5;
  --bricks-toggle-content-mt:     1rem;

  background-color: var(--bricks-toggle-item-bg);
  border-radius:    var(--bricks-toggle-item-radius);
  margin-bottom:    var(--bricks-toggle-item-gap);
  padding:          var(--bricks-toggle-item-padding);
}

.bricks-toggle__item:last-child {
  margin-bottom: 0;
}

/* ---- Header -------------------------------------------------------------- */
.bricks-toggle__header {
  align-items:     center;
  background:      none;
  border:          none;
  color:           var(--bricks-toggle-header-color);
  cursor:          pointer;
  display:         flex;
  font-size:       var(--bricks-toggle-header-size);
  font-weight:     var(--bricks-toggle-header-weight);
  gap:             var(--bricks-toggle-header-gap);
  justify-content: space-between;
  line-height:     var(--bricks-toggle-header-lh);
  padding:         0;
  text-align:      left;
  width:           100%;
}

/* ---- Title --------------------------------------------------------------- */
.bricks-toggle__title {
  text-align: left;
}

/* ---- Body ---------------------------------------------------------------- */
.bricks-toggle__body {
  overflow: hidden;
}

/* ---- Content ------------------------------------------------------------- */
.bricks-toggle__content {
  font-size:   var(--bricks-toggle-content-size);
  font-weight: var(--bricks-toggle-content-weight);
  line-height: var(--bricks-toggle-content-lh);
  margin-top:  var(--bricks-toggle-content-mt);
}

/* Icona inline SVG: dimensionamento e allineamento. Il colore segue
   currentColor ereditato da .bricks-toggle__header. La barra verticale (secondo
   path) fa fade-out via CSS quando l'item è aperto — nessun JS necessario. */
.bricks-toggle__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.bricks-toggle__icon svg {
  height: 24px;
  width:  24px;
}

.bricks-toggle__icon path:last-child {
  transition: opacity 200ms ease;
}

.bricks-toggle__item.is-open .bricks-toggle__icon path:last-child {
  opacity: 0;
}

/* ---- Rich text nel body -------------------------------------------------- */
.bricks-toggle__body ul,
.bricks-toggle__body ol {
  margin-bottom: 1rem;
  padding-left:  1.5em;
}

.bricks-toggle__body ul {
  list-style: disc;
}

.bricks-toggle__body ol {
  list-style: decimal;
}