/*
ButtonGroup

Builds on @elements/style's .button-group (adjacent buttons share
borders) and keeps its meaning. Adds vertical orientation, any control as
a member (buttons, inputs, selects, input groups, text), separators,
text segments, and nested groups spaced apart.

  .button-group[data-orientation]   horizontal | vertical
  .button-group-separator           a rule between members
  .button-group-text                a text or label segment
*/

@layer components {

.button-group {
  display:     flex;
  align-items: stretch;
  width:       fit-content;
  min-width:   0;
}

.button-group[data-orientation="vertical"] {
  flex-direction: column;
}

/* Nested groups sit apart; their own members join. */
.button-group:has(> .button-group) {
  gap: var(--space-2);
}

.button-group > :is(.button, button, .input, .native-select, .select-root, .input-group, .button-group-text) {
  position: relative;
  margin:   0;
}

.button-group > :is(.button, button, .native-select, .select-root, .button-group-text) {
  flex: none;
}

.button-group > :is(.input, .input-group) {
  flex:      1 1 auto;
  min-width: calc(3 * var(--control-height));
}

.button-group > * > .native-select-control {
  border-radius: inherit;
}

/* @elements/style rounds a group's first and last button with physical
   corners and a margin-left; restate both in logical terms so a group under
   dir=rtl joins at its inline edges. The corner rules below win. */
.button-group.button-group > :is(.button, button):not(.button-group-separator) {
  border-radius:     var(--radius-control);
  margin-inline-end: 0;
}

/* HORIZONTAL: inner corners square, shared borders collapse. */
.button-group:not([data-orientation="vertical"]) > :not(.button-group, .button-group-separator):not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius:   0;
}

.button-group:not([data-orientation="vertical"]) > :not(.button-group, .button-group-separator, :first-child, .button-group-separator + *) {
  margin-inline-start: calc(-1 * var(--control-border-width));
}

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

.button-group:not([data-orientation="vertical"]) > .native-select:not(:first-child) > .native-select-control {
  border-start-start-radius: 0;
  border-end-start-radius:   0;
}

.button-group:not([data-orientation="vertical"]) > .native-select:not(:last-child) > .native-select-control {
  border-start-end-radius: 0;
  border-end-end-radius:   0;
}

/* A Select member: the root is the member (it takes the overlap), the
   trigger inside it draws the border, so it takes the corners. */
.button-group:not([data-orientation="vertical"]) > .select-root:not(:first-child) > .select-trigger {
  border-start-start-radius: 0;
  border-end-start-radius:   0;
}

.button-group:not([data-orientation="vertical"]) > .select-root:not(:last-child) > .select-trigger {
  border-start-end-radius: 0;
  border-end-end-radius:   0;
}

.button-group[data-orientation="vertical"] > .select-root:not(:first-child) > .select-trigger {
  border-start-start-radius: 0;
  border-start-end-radius:   0;
}

.button-group[data-orientation="vertical"] > .select-root:not(:last-child) > .select-trigger {
  border-end-start-radius: 0;
  border-end-end-radius:   0;
}

/* VERTICAL: @elements/style's button + button margin is horizontal. */
.button-group[data-orientation="vertical"] > :is(*, .button.button) {
  margin-inline: 0;
}

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

.button-group[data-orientation="vertical"] > :not(.button-group, .button-group-separator, :first-child, .button-group-separator + *) {
  margin-block-start: calc(-1 * var(--control-border-width));
}

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

/* The hovered member's border draws over its neighbours (the base button
   group raises a hovered .button to --z-raised), and the focused member's
   ring over a hovered or pressed neighbour too. */
.button-group > :hover {
  z-index: var(--z-raised);
}

.button-group > :focus-visible,
.button-group > :focus-within {
  z-index: calc(var(--z-raised) + 1);
}

/* OVERLAY TRIGGERS: Popover, Tooltip and DropdownMenu wrap their trigger in
   display: contents spans, so the member is the wrapper and the button is
   inside it. The wrapper's place in the group sets the trigger's corners
   and overlap; triggers inside an open panel are not members. */
.button-group > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  position:          relative;
  margin:            0;
  border-radius:     var(--radius-control);
}

.button-group:not([data-orientation="vertical"]) > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:first-child) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  border-start-start-radius: 0;
  border-end-start-radius:   0;
}

.button-group:not([data-orientation="vertical"]) > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:first-child, .button-group-separator + *) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  margin-inline-start: calc(-1 * var(--control-border-width));
}

.button-group:not([data-orientation="vertical"]) > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:last-child) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  border-start-end-radius: 0;
  border-end-end-radius:   0;
}

.button-group[data-orientation="vertical"] > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:first-child) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  border-start-start-radius: 0;
  border-start-end-radius:   0;
}

.button-group[data-orientation="vertical"] > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:first-child, .button-group-separator + *) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  margin-block-start: calc(-1 * var(--control-border-width));
}

.button-group[data-orientation="vertical"] > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:last-child) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *) {
  border-end-start-radius: 0;
  border-end-end-radius:   0;
}

.button-group > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *):hover {
  z-index: var(--z-raised);
}

.button-group > :is(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root) :is(.popover-trigger, .tooltip-trigger, .dropdown-menu-trigger) > :not(.popover-root, .tooltip-root, .tooltip-provider, .dropdown-menu-root):not(:is(.popover, .tooltip, .menu) *):focus-visible {
  z-index: calc(var(--z-raised) + 1);
}

/* A separator replaces the shared border between two filled buttons. */
.button-group-separator {
  flex:       none;
  align-self: stretch;
  background: var(--rule-strong);
}

.button-group-separator[data-orientation="vertical"] {
  width: var(--control-border-width);
}

.button-group-separator[data-orientation="horizontal"] {
  height: var(--control-border-width);
}

.button-group-text {
  display:        flex;
  align-items:    center;
  gap:            var(--control-gap);
  height:         var(--control-height);
  padding:        0 var(--control-padding-x);
  border:         var(--control-border-width) solid var(--control-border);
  border-radius:  var(--radius-control);
  background:     var(--bg-muted);
  color:          var(--ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-ui);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--tracking-ui);
  white-space:    nowrap;
}

.button-group-text svg {
  width:          var(--icon-size);
  height:         var(--icon-size);
  pointer-events: none;
}

}