/* ============================================================
   AVATAR · DIVIDER · SEGMENTED CONTROL
   ------------------------------------------------------------
   Three small components that did not warrant their own files.
   ============================================================ */

/* --- Avatar -------------------------------------------------- */
.ice-avatar {
  display: block;
  inline-size: var(--_size);
  block-size:  var(--_size);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--border-hairline);
  flex-shrink: 0;
  --_size: var(--height-l);
}
.ice-avatar[data-size="sm"] { --_size: var(--height-m); }
.ice-avatar[data-size="lg"] { --_size: var(--height-xl); }

/* --- Divider ------------------------------------------------- */
.ice-divider {
  block-size: 1px;
  inline-size: 100%;
  background-color: var(--border-divider);
  border: none;
}
.ice-divider[data-orientation="vertical"] {
  inline-size: 1px;
  block-size: auto;
  align-self: stretch;
}

/* --- Toggle / segmented control ------------------------------
   Figma 74:6538.

       <div class="ice-segmented" data-size="m">
         <button>15 mins</button>
         <button data-active>30 mins</button>
       </div>

   The track is elevation secondary-0, the active item elevation 3
   with shadow S. Three sizes, straight off the control bundle.
   Text only, text and icon, or icon only — markup decides.        */
.ice-segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-9);
  background-image: var(--elev-secondary-0-image);
}
.ice-segmented[data-size="s"] { border-radius: var(--radius-6); }
.ice-segmented[data-size="l"] { border-radius: var(--radius-12); }

.ice-segmented[data-size="s"] > button {
  block-size: var(--height-s);
  padding-inline: var(--space-12);
  gap: var(--space-8);
  border-radius: var(--radius-6);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
}
.ice-segmented[data-size="s"] > button > .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); }
.ice-segmented[data-size="m"] > button {
  block-size: var(--height-m);
  padding-inline: var(--space-16);
  gap: var(--space-10);
  border-radius: var(--radius-9);
  font-size: var(--type-h7-size);
  line-height: var(--type-h7-leading);
  letter-spacing: var(--type-h7-track);
}
.ice-segmented[data-size="m"] > button > .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); }
.ice-segmented[data-size="l"] > button {
  block-size: var(--height-l);
  padding-inline: var(--space-20);
  gap: var(--space-12);
  border-radius: var(--radius-12);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
}
.ice-segmented[data-size="l"] > button > .ice-icon { inline-size: var(--icon-m); block-size: var(--icon-m); }

.ice-segmented > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Default = m; each size block above writes the rest. */
  block-size: var(--height-m);
  padding-inline: var(--space-16);
  gap: var(--space-10);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-9);

  font-size: var(--type-h7-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-h7-leading);
  letter-spacing: var(--type-h7-track);
  white-space: nowrap;

  cursor: pointer;
  background-image: none;
  transition: background-image var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* Emphasis, not opacity. An item at rest is medium, the chosen one
   is high, and in both cases the icon sits a rung below its label —
   the pairing the emphasis scale already makes. Figma 74:8882. */
.ice-segmented > button { color: var(--fg-medium); }

.ice-segmented > button > .ice-icon {
  inline-size: var(--icon-s);
  block-size:  var(--icon-s);
  color: var(--fg-icon-medium);
}

/* Icon only: a square cell. */
.ice-segmented > button[data-icon-only] {
  aspect-ratio: 1;
  padding-inline: 0;
  gap: 0;
}

/* Stretched: the items share the track's width instead of hugging
   their label. Used by the preferences panel. */
.ice-segmented[data-labelled] { display: flex; }
.ice-segmented[data-labelled] > button { flex: 1 0 0; }

/* Hover — the track's own fill, painted a second time over the item
   and pressed in with the S inner shadow. The label leaves the
   emphasis scale for the link colour: hovering a choice is the same
   promise a ghost button makes. The chosen item is already where you
   are, so it does not answer. Figma 74:8882. */
.ice-segmented > button:hover:not([data-active]) {
  color: var(--fg-link);
  background-image: var(--elev-secondary-0-image);
  box-shadow: var(--shadow-inner-s);
  backdrop-filter: blur(var(--shadow-inner-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-inner-s-blur));
}
.ice-segmented > button:hover:not([data-active]) > .ice-icon { color: var(--fg-link); }

.ice-segmented > button[data-active] {
  color: var(--fg-high);
  cursor: default;          /* you are already here — nothing to click */
  font-weight: var(--weight-semibold);
  background-image: var(--elev-primary-3-image);
  border-color: var(--elev-primary-3-border);
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--shadow-s-blur));
  -webkit-backdrop-filter: blur(var(--shadow-s-blur));
}
.ice-segmented > button[data-active] > .ice-icon { color: var(--fg-icon-high); }