/*
ToggleGroup

A row (or column) of .toggle buttons. The group's data-variant and
data-size style its items, so items need no attributes of their own;
data-spacing="0" joins them into one segmented control.

  .toggle-group[data-variant]       default | outline
  .toggle-group[data-size]          sm | md | lg
  .toggle-group[data-spacing]       0 joins the items; 1-4 spaces them
  .toggle-group[data-orientation]   horizontal | vertical
  .toggle-group-item                a .toggle
*/

@layer components {

.toggle-group {
  display:     flex;
  align-items: center;
  width:       fit-content;
  gap:         var(--toggle-group-gap, var(--space-2));
}

.toggle-group[data-orientation="vertical"] {
  flex-direction: column;
  align-items:    stretch;
}

.toggle-group[data-spacing="0"] { --toggle-group-gap: 0px; }
.toggle-group[data-spacing="1"] { --toggle-group-gap: var(--space-1); }
.toggle-group[data-spacing="2"] { --toggle-group-gap: var(--space-2); }
.toggle-group[data-spacing="3"] { --toggle-group-gap: var(--space-3); }
.toggle-group[data-spacing="4"] { --toggle-group-gap: var(--space-4); }

.toggle-group > .toggle-group-item,
.toggle-group > * > .toggle-group-item {
  padding-inline: var(--control-padding-x-sm);
}

/* The focused item stacks above a pressed neighbour (z-index 1, below), so
   its ring shows on all four sides where a joined group shares an edge. */
.toggle-group > .toggle-group-item:focus-visible,
.toggle-group > * > .toggle-group-item:focus-visible {
  z-index: 2;
}

/* Variant and size from the group. */
.toggle-group[data-variant="outline"] .toggle-group-item {
  border-color: var(--control-border);
  background:   var(--control-bg);
}

.toggle-group[data-variant="outline"] .toggle-group-item[data-state="on"] {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
}

.toggle-group[data-size="sm"] .toggle-group-item {
  min-width: var(--control-height-sm);
  height:    var(--control-height-sm);
  font-size: var(--text-ui-sm);
}

.toggle-group[data-size="lg"] .toggle-group-item {
  min-width: var(--control-height-lg);
  height:    var(--control-height-lg);
  font-size: var(--text-ui-lg);
}

/* JOINED: one segmented control. */
.toggle-group[data-spacing="0"][data-variant="outline"] {
  box-shadow:    var(--control-shadow);
  border-radius: var(--radius-control);
}

.toggle-group[data-spacing="0"]:not([data-orientation="vertical"]) > .toggle-group-item:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius:   0;
}

.toggle-group[data-spacing="0"]:not([data-orientation="vertical"]) > .toggle-group-item:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius:   0;
}

.toggle-group[data-spacing="0"][data-variant="outline"]:not([data-orientation="vertical"]) > .toggle-group-item:not(:first-child) {
  margin-inline-start: calc(-1 * var(--control-border-width));
}

.toggle-group[data-spacing="0"][data-orientation="vertical"] > .toggle-group-item:not(:first-child) {
  border-start-start-radius: 0;
  border-start-end-radius:   0;
}

.toggle-group[data-spacing="0"][data-orientation="vertical"] > .toggle-group-item:not(:last-child) {
  border-end-start-radius: 0;
  border-end-end-radius:   0;
}

.toggle-group[data-spacing="0"][data-variant="outline"][data-orientation="vertical"] > .toggle-group-item:not(:first-child) {
  margin-block-start: calc(-1 * var(--control-border-width));
}

.toggle-group[data-spacing="0"][data-variant="outline"] > .toggle-group-item[data-state="on"] {
  z-index: 1;
}

}