/**
 * button-group.css: Button group (ui-button-group | .ui-button-group)
 *
 * @layer      components
 * @requires   layers.css, _variables.css, button.css
 * @uses       :not(): first/last edge selection for shared-border collapse
 * @uses       logical border-radius longhands: RTL-safe corner rounding per orientation
 * @uses       flex-item z-index: raise the active control so its border/ring isn't clipped
 * @see        https://ui.shadcn.com/docs/components/base/button-group
 */

@layer variables {
  :root {
    --ui-button-group-radius: var(--ui-button-radius);
    --ui-button-group-background: var(--card);
  }
}

@layer zazz.components {
  /* ===========================================================================
  BUTTON GROUP

  Joins adjacent controls (.ui-button, and any child it wraps) into a single
  segmented unit. Children keep their own --ui-button-radius, so the outer corners
  follow the buttons' size variant automatically; only the *inner* corners are
  squared off and the doubled border is collapsed with a -1px overlap.
  =========================================================================== */

  :where(ui-button-group, .ui-button-group) {
    display: flex;
    inline-size: fit-content;
    /* stretch so mixed-height children share one edge */
    align-items: stretch;
    border-radius: var(--ui-button-group-radius);
    overflow: clip;
    background-color: var(--ui-button-group-background);
    position: relative;
    isolation: isolate;
  }

  /* flex items honour z-index without positioning, but relative keeps the
     stacking context robust across child types (inputs, selects, …) */
  :where(ui-button-group, .ui-button-group) > * {
    position: relative;
  }

  /* the focused/hovered/pressed control floats above its neighbours so its
     border and box-shadow ring paint over the overlapped edge */
  :where(ui-button-group, .ui-button-group) > *:hover:not(:disabled, [aria-disabled="true"]),
  :where(ui-button-group, .ui-button-group) > *:focus-visible,
  :where(ui-button-group, .ui-button-group) > *:active:not(:disabled, [aria-disabled="true"]) {
    z-index: 1;
  }

  /* ===========================================================================
  BUTTON GROUP: HORIZONTAL (default)
  =========================================================================== */

  :where(ui-button-group, .ui-button-group):not([data-orientation="vertical"]) {
    flex-direction: row;
  }

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

  :where(ui-button-group, .ui-button-group):not([data-orientation="vertical"])
    > :not(:first-child) {
    /* pull onto the previous control's border so the seam is one line, not two */
    margin-inline-start: -1px;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  /* ===========================================================================
  BUTTON GROUP: VERTICAL
  =========================================================================== */

  :where(ui-button-group, .ui-button-group)[data-orientation="vertical"] {
    flex-direction: column;
  }

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

  :where(ui-button-group, .ui-button-group)[data-orientation="vertical"] > :not(:first-child) {
    margin-block-start: -1px;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
}