{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "A button-group component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cubby-ui/separator",
    "@cubby-ui/elevated"
  ],
  "files": [
    {
      "path": "registry/default/button-group/button-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/registry/default/separator/separator\";\nimport { solidSurface } from \"@/registry/default/lib/elevated\";\nimport \"./button-group.css\";\n\n// attached: children keep their own paint and the group fuses them.\n// Trays (outline, soft, elevated, solid): the group draws the shell, quiets\n// buttons without a `variant`, and a pill glides between them\n// (button-group.css). Selectors match tags, not data-slot, because a Base UI\n// trigger rendering a Button stamps its own data-slot.\nconst buttonGroupVariants = cva(\n  \"relative flex w-fit items-stretch [&>*:focus-visible]:relative [&>*:focus-visible]:z-10 [&>*[data-popup-open]]:relative [&>*[data-popup-open]]:z-10\",\n  {\n    variants: {\n      variant: {\n        attached:\n          \"[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-slot=button-group]]:gap-2 [&>input]:bg-card\",\n        // Outline draws its line just outside the fill, as on an outline\n        // Button. The others have no border, so elevated's rim and shadow\n        // ring meet its edge.\n        outline: \"bg-card text-foreground outline outline-border\",\n        soft: \"bg-secondary text-secondary-foreground\",\n        elevated: cn(solidSurface(3, 3), \"text-foreground\"),\n        // Opposite the page in brightness, so the tint needs more strength.\n        solid:\n          \"bg-neutral text-neutral-foreground [--group-highlight-mix:16%] [--group-press-mix:22%]\",\n      },\n      // Button's height ladder (one step taller below sm); corners step with it.\n      size: {\n        sm: \"[--group-h:--spacing(9)] sm:not-pointer-coarse:[--group-h:--spacing(8)] [--group-radius:calc(var(--radius)-2px)]\",\n        default:\n          \"[--group-h:--spacing(10)] sm:not-pointer-coarse:[--group-h:--spacing(9)] [--group-radius:var(--radius)]\",\n        lg: \"[--group-h:--spacing(11)] sm:not-pointer-coarse:[--group-h:--spacing(10)] [--group-radius:calc(var(--radius)+2px)]\",\n      },\n      orientation: {\n        horizontal: \"\",\n        vertical: \"flex-col\",\n      },\n    },\n    compoundVariants: [\n      // Border rules come in pairs: one for children with real borders\n      // (inputs, select triggers), and a before: twin for Button-recipe\n      // children, whose border is on their paint pseudo-element. The twins\n      // skip select triggers: before: would add an empty pseudo-element there\n      // that becomes a flex item.\n      {\n        variant: \"attached\",\n        orientation: \"horizontal\",\n        className:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>button:not(:first-child):not([data-slot=select-trigger])]:before:border-l-0 [&>a:not(:first-child)]:before:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>*:has(+[data-slot=button-group-separator])]:border-r-0 [&>button:has(+[data-slot=button-group-separator]):not([data-slot=select-trigger])]:before:border-r-0 [&>a:has(+[data-slot=button-group-separator])]:before:border-r-0 [&>button:first-of-type:not(:only-of-type)]:rounded-l-lg [&>button:first-of-type:not(:only-of-type):not([data-slot=select-trigger])]:before:border-l [&>[data-slot=select-trigger]:first-of-type:not(:only-of-type)]:border-l [&>a:first-of-type:not(:only-of-type)]:rounded-l-lg [&>a:first-of-type:not(:only-of-type)]:before:border-l [&>button:last-of-type:not(:only-of-type)]:rounded-r-lg [&>a:last-of-type:not(:only-of-type)]:rounded-r-lg\",\n      },\n      {\n        variant: \"attached\",\n        orientation: \"vertical\",\n        className:\n          \"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>button:not(:first-child):not([data-slot=select-trigger])]:before:border-t-0 [&>a:not(:first-child)]:before:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>*:has(+[data-slot=button-group-separator])]:border-b-0 [&>button:has(+[data-slot=button-group-separator]):not([data-slot=select-trigger])]:before:border-b-0 [&>a:has(+[data-slot=button-group-separator])]:before:border-b-0 [&>button:first-of-type:not(:only-of-type)]:rounded-t-lg [&>button:first-of-type:not(:only-of-type):not([data-slot=select-trigger])]:before:border-t [&>[data-slot=select-trigger]:first-of-type:not(:only-of-type)]:border-t [&>a:first-of-type:not(:only-of-type)]:rounded-t-lg [&>a:first-of-type:not(:only-of-type)]:before:border-t [&>button:last-of-type:not(:only-of-type)]:rounded-b-lg [&>a:last-of-type:not(:only-of-type)]:rounded-b-lg\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"outline\",\n      size: \"default\",\n      orientation: \"horizontal\",\n    },\n  },\n);\n\nconst trayClasses = cn(\n  // Insets are item borders (button-group.css). Plate corners are the\n  // shell's minus the 2px edge border. Select triggers skip the before:\n  // rule, or its empty pseudo-element becomes a flex item.\n  \"rounded-(--group-radius) [--group-item-radius:max(0px,calc(var(--group-radius)-2px))]\",\n  \"[&>:is(button,a):not([data-slot=select-trigger])]:before:rounded-(--group-item-radius)\",\n  // Highlight and press: the label color at 10% / 14%. Button's hover tokens\n  // read too faint as a pill on the same fill; a tint of the label always\n  // contrasts with it. currentColor resolves where the variable is used.\n  \"[--group-highlight:color-mix(in_oklab,currentColor_var(--group-highlight-mix,10%),transparent)] [--group-press:color-mix(in_oklab,currentColor_var(--group-press-mix,14%),transparent)]\",\n  // Sizing: a row is the ladder height, a column at least the ladder width.\n  // Items size themselves in button-group.css.\n  \"data-[orientation=horizontal]:h-(--group-h) data-[orientation=vertical]:w-fit\",\n  // Quiet children. A Button without a variant renders `primary`, so this\n  // list (with text-current below) must undo everything `primary` sets: fill,\n  // hover, press, border, and label color. A style added to `primary` needs\n  // overriding here too.\n  \"[&>:is(button,a):not([data-variant])]:[--btn-bg:transparent] [&>:is(button,a):not([data-variant])]:[--btn-border:transparent] [&>:is(button,a):not([data-variant])]:[--btn-bg-hover:var(--group-highlight)] [&>:is(button,a):not([data-variant])]:[--btn-bg-active:var(--group-press)]\",\n  // Label color\n  \"[&>:is(button,a):not([data-variant])]:text-current\",\n  // Instant hover, so a sweep never shows two buttons half-lit.\n  \"[&>:is(button,a):not([data-variant])]:before:[transition-duration:0ms,100ms,100ms] [&>:is(button,a):not([data-variant])]:active:before:[transition-duration:100ms]\",\n  // Never narrower than its items; overflow is the container's to handle.\n  \"min-w-max\",\n  // Groups of groups are a layout wrapper with no shell\n  \"has-[>[data-slot=button-group]]:gap-2 has-[>[data-slot=button-group]]:bg-transparent has-[>[data-slot=button-group]]:p-0 has-[>[data-slot=button-group]]:border-0 has-[>[data-slot=button-group]]:outline-0 has-[>[data-slot=button-group]]:shadow-none has-[>[data-slot=button-group]]:h-auto has-[>[data-slot=button-group]]:w-fit\",\n);\n\ntype ButtonGroupVariant = NonNullable<\n  VariantProps<typeof buttonGroupVariants>[\"variant\"]\n>;\ntype ButtonGroupOrientation = NonNullable<\n  VariantProps<typeof buttonGroupVariants>[\"orientation\"]\n>;\ntype ButtonGroupSize = NonNullable<\n  VariantProps<typeof buttonGroupVariants>[\"size\"]\n>;\n\ntype ButtonGroupContextValue = {\n  variant: ButtonGroupVariant;\n  size: ButtonGroupSize;\n  orientation: ButtonGroupOrientation;\n};\n\n// Null outside a group, so nested groups know to inherit variant and size.\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(\n  null,\n);\n\nconst DEFAULT_CONTEXT: ButtonGroupContextValue = {\n  variant: \"outline\",\n  size: \"default\",\n  orientation: \"horizontal\",\n};\n\nexport type ButtonGroupProps = React.ComponentProps<\"div\"> & {\n  /** Defaults to the parent group's variant, or `\"outline\"`. */\n  variant?: ButtonGroupVariant;\n  /** Outer height, on Button's ladder. Defaults to the parent group's size, or `\"default\"`. */\n  size?: ButtonGroupSize;\n  orientation?: ButtonGroupOrientation;\n  /** Glide a shared highlight between buttons on hover and focus. Tray variants only. */\n  highlight?: boolean;\n};\n\nfunction ButtonGroup({\n  className,\n  variant: variantProp,\n  size: sizeProp,\n  orientation = \"horizontal\",\n  highlight = true,\n  children,\n  ...props\n}: ButtonGroupProps) {\n  const parent = React.useContext(ButtonGroupContext);\n  const variant = variantProp ?? parent?.variant ?? DEFAULT_CONTEXT.variant;\n  const size = sizeProp ?? parent?.size ?? DEFAULT_CONTEXT.size;\n  const isTray = variant !== \"attached\";\n  const glides = isTray && highlight;\n\n  const context = React.useMemo(\n    () => ({ variant, size, orientation }),\n    [variant, size, orientation],\n  );\n\n  return (\n    <ButtonGroupContext.Provider value={context}>\n      <div\n        role=\"group\"\n        data-slot=\"button-group\"\n        data-variant={variant}\n        data-size={size}\n        data-orientation={orientation}\n        data-glide={glides ? \"\" : undefined}\n        className={cn(\n          buttonGroupVariants({ variant, size, orientation }),\n          isTray && trayClasses,\n          // Keeps the pill's z-index -1 above the shell fill.\n          glides && \"isolate\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {glides && (\n          <span\n            aria-hidden\n            data-slot=\"button-group-highlight\"\n            data-button-group-highlight\n          />\n        )}\n      </div>\n    </ButtonGroupContext.Provider>\n  );\n}\n\nexport type ButtonGroupTextProps = useRender.ComponentProps<\"div\">;\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: ButtonGroupTextProps) {\n  const { variant } = React.useContext(ButtonGroupContext) ?? DEFAULT_CONTEXT;\n\n  const defaultProps = {\n    \"data-slot\": \"button-group-text\",\n    className: cn(\n      \"flex items-center gap-2 text-sm font-medium whitespace-nowrap tabular-nums [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n      variant === \"attached\"\n        ? \"bg-muted rounded-lg border bg-clip-padding px-4\"\n        : // Inset like the buttons (button-group.css), so text lines up\n          // with their labels.\n          \"px-3\",\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(defaultProps, props),\n  });\n}\n\nexport type ButtonGroupSeparatorProps = React.ComponentProps<typeof Separator>;\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation,\n  ...props\n}: ButtonGroupSeparatorProps) {\n  const group = React.useContext(ButtonGroupContext) ?? DEFAULT_CONTEXT;\n  const resolved =\n    orientation ??\n    (group.orientation === \"vertical\" ? \"horizontal\" : \"vertical\");\n\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={resolved}\n      className={cn(\n        \"relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\n        group.variant === \"attached\"\n          ? \"dark:bg-input\"\n          : cn(\n              // Air and line are all borders, so both sides snap alike.\n              \"pointer-events-none\",\n              \"flex shrink-0 self-stretch border-transparent bg-transparent data-[orientation=horizontal]:h-auto data-[orientation=horizontal]:w-auto data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-auto\",\n              \"before:border-transparent before:content-[''] after:border-transparent after:content-['']\",\n              \"data-[orientation=vertical]:after:border-s-border data-[orientation=vertical]:border-e-[3px] data-[orientation=vertical]:before:border-s-[3px] data-[orientation=vertical]:after:h-5 data-[orientation=vertical]:after:self-center data-[orientation=vertical]:after:rounded-full data-[orientation=vertical]:after:border-s-[1.5px]\",\n              \"data-[orientation=horizontal]:after:border-t-border data-[orientation=horizontal]:border-b-[3px] data-[orientation=horizontal]:before:border-t-[3px] data-[orientation=horizontal]:after:w-5 data-[orientation=horizontal]:after:self-center data-[orientation=horizontal]:after:rounded-full data-[orientation=horizontal]:after:border-t-[1.5px]\",\n              group.variant === \"solid\" &&\n                \"data-[orientation=vertical]:after:border-s-neutral-foreground/15 data-[orientation=horizontal]:after:border-t-neutral-foreground/15\",\n            ),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/button-group/button-group.tsx"
    },
    {
      "path": "registry/default/button-group/button-group.css",
      "content": "/* -------------------------------------------------------------------------------------------------\n * Gliding highlight. The lit button's plate (::before) is the anchor and the\n * pill follows it. Without anchor positioning, each button paints its own\n * hover.\n * -------------------------------------------------------------------------------------------------*/\n\n[data-button-group-highlight] {\n  display: none;\n}\n\n/* Hit areas: a square ::after over the whole box, corners included, so the\n * notch between two buttons isn't dead. Beside a separator it reaches the\n * line, stepping over a select's hidden input. */\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is(button, a[href], [role=\"button\"]) {\n  position: relative;\n}\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is(button, a[href], [role=\"button\"])::after {\n  content: \"\";\n  position: absolute;\n  inset-block: -2px;\n  inset-inline: -1px;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > :is(button, a[href], [role=\"button\"])::after {\n  inset-block: -1px;\n  inset-inline: -2px;\n}\n\n/* 1px border + 3px air + half the line. */\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"horizontal\"]\n  > :is(button, a[href], [role=\"button\"]):has(\n    + [data-slot=\"button-group-separator\"],\n    + input[aria-hidden=\"true\"] + [data-slot=\"button-group-separator\"]\n  )::after {\n  inset-inline-end: -5px;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"horizontal\"]\n  > [data-slot=\"button-group-separator\"]\n  + :is(button, a[href], [role=\"button\"])::after {\n  inset-inline-start: -5px;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > :is(button, a[href], [role=\"button\"]):has(\n    + [data-slot=\"button-group-separator\"],\n    + input[aria-hidden=\"true\"] + [data-slot=\"button-group-separator\"]\n  )::after {\n  inset-block-end: -5px;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > [data-slot=\"button-group-separator\"]\n  + :is(button, a[href], [role=\"button\"])::after {\n  inset-block-start: -5px;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Inset: item borders, 2px facing the shell's edge, 1px facing a neighbour.\n * Borders snap to whole device pixels, so the edge is never thinner than the\n * gap, and the shell has no border to push elevated's rim inward. `of`\n * counts items only, so Base UI's guard spans can't move the ends.\n * -------------------------------------------------------------------------------------------------*/\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is(button, a, [data-slot=\"input\"], [data-slot=\"button-group-text\"]) {\n  border: 1px solid transparent;\n  border-radius: calc(var(--group-item-radius) + 2px);\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"horizontal\"]\n  > :is(button, a, [data-slot=\"input\"], [data-slot=\"button-group-text\"]) {\n  border-block-width: 2px;\n  height: auto;\n  align-self: stretch;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"horizontal\"]\n  > :nth-child(\n    1 of button,\n    a,\n    [data-slot=\"input\"],\n    [data-slot=\"button-group-text\"]\n  ) {\n  border-inline-start-width: 2px;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"horizontal\"]\n  > :nth-last-child(\n    1 of button,\n    a,\n    [data-slot=\"input\"],\n    [data-slot=\"button-group-text\"]\n  ) {\n  border-inline-end-width: 2px;\n}\n\n/* A column: every item has the row's paint height, whatever its borders,\n * at least that width, and stretches to the widest. */\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > :is(button, a, [data-slot=\"input\"], [data-slot=\"button-group-text\"]) {\n  border-inline-width: 2px;\n  box-sizing: content-box;\n  height: calc(var(--group-h) - 4px);\n  min-width: calc(var(--group-h) - 4px);\n  width: auto;\n  padding-block: 0;\n  align-self: stretch;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > :nth-child(\n    1 of button,\n    a,\n    [data-slot=\"input\"],\n    [data-slot=\"button-group-text\"]\n  ) {\n  border-block-start-width: 2px;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > :nth-last-child(\n    1 of button,\n    a,\n    [data-slot=\"input\"],\n    [data-slot=\"button-group-text\"]\n  ) {\n  border-block-end-width: 2px;\n}\n\n/* Icon buttons: the paint is square, whatever each side's border. */\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is(button, a)[data-size^=\"icon\"] {\n  box-sizing: content-box;\n  aspect-ratio: 1;\n  padding-inline: 0;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"horizontal\"]\n  > :is(button, a)[data-size^=\"icon\"] {\n  width: auto;\n}\n\n[data-slot=\"button-group\"]:not(\n    [data-variant=\"attached\"]\n  )[data-orientation=\"vertical\"]\n  > :is(button, a)[data-size^=\"icon\"] {\n  height: auto;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Quiet fields.\n *\n * Inputs and select triggers drop their border and fill and take the\n * buttons' size. The pill glides onto a select trigger; an input lights in\n * place.\n * -------------------------------------------------------------------------------------------------*/\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is([data-slot=\"input\"], [data-slot=\"select-trigger\"]) {\n  /* Fill inside the inset border. */\n  background-color: transparent;\n  background-clip: padding-box;\n  box-shadow: none;\n}\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > [data-slot=\"input\"] {\n  padding-inline: 0.625rem;\n  color: inherit;\n  transition-property:\n    background-color, outline-width, outline-offset, outline-color;\n  /* Instant hover, like the buttons. */\n  transition-duration: 0ms, 100ms, 100ms, 100ms;\n}\n\n/* Hover is gated to real hover: a raw :hover sticks after a tap. */\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > [data-slot=\"input\"]:focus {\n  background-color: var(--group-highlight);\n}\n\n/* Select triggers paint their own hover and open state, like the buttons;\n * the @supports block turns it off where the pill glides. */\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > [data-slot=\"select-trigger\"][data-popup-open] {\n  background-color: var(--group-highlight);\n}\n\n@media (hover: hover) {\n  [data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n    > :is([data-slot=\"input\"], [data-slot=\"select-trigger\"]):hover {\n    background-color: var(--group-highlight);\n  }\n}\n\n/* Select triggers have no paint layer of their own; this one is the anchor\n * for the pill. */\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > [data-slot=\"select-trigger\"]::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: var(--group-item-radius);\n  pointer-events: none;\n}\n\n/* All anchor features or none: a partial implementation leaves the pill\n * unplaced or tied to another group. */\n@supports (anchor-name: --button-group-item) and\n  (anchor-scope: --button-group-item) and (inset: anchor(inside)) {\n  [data-slot=\"button-group\"][data-glide] {\n    anchor-scope: --button-group-item;\n  }\n\n  /* The pill stands in for hover. */\n  [data-slot=\"button-group\"][data-glide]\n    > :is(button, a[href], [role=\"button\"]):not([data-variant]) {\n    --btn-bg-hover: transparent;\n    --btn-bg-active: transparent;\n  }\n\n  /* Matches the specificity of the select rules above. */\n  [data-slot=\"button-group\"][data-glide]:not([data-variant=\"attached\"])\n    > [data-slot=\"select-trigger\"]:is(:hover, [data-popup-open]) {\n    background-color: transparent;\n  }\n\n  /* Real hover only (:active covers taps). An open menu, a held button, or\n   * keyboard focus keeps the pill. */\n  [data-slot=\"button-group\"][data-glide]\n    > :is(button, a[href], [role=\"button\"]):not(:disabled, [data-disabled]):is(\n      :focus-visible,\n      :active,\n      [data-popup-open]\n    )::before {\n    anchor-name: --button-group-item;\n  }\n\n  /* Checks siblings: a `:has()` on the group would restyle every button on\n   * any DOM change. */\n  @media (hover: hover) {\n    [data-slot=\"button-group\"][data-glide]\n      > :is(button, a[href], [role=\"button\"]):not(\n        :disabled,\n        [data-disabled],\n        [data-popup-open],\n        :active,\n        :focus-visible\n      ):not(\n        :has(\n          ~ [data-popup-open],\n          ~ :active,\n          ~ :is(button, a[href], [role=\"button\"]):focus-visible\n        ),\n        [data-popup-open] ~ *,\n        :active ~ *,\n        :is(button, a[href], [role=\"button\"]):focus-visible ~ *\n      ):hover::before {\n      anchor-name: --button-group-item;\n    }\n  }\n\n  [data-slot=\"button-group\"][data-glide] > [data-button-group-highlight] {\n    display: block;\n    position: absolute;\n    position-anchor: --button-group-item;\n    inset: anchor(inside);\n    border-radius: var(--group-item-radius);\n    background-color: var(--group-highlight);\n    /* Rendered last, so it sits under the buttons inside the isolated group. */\n    z-index: -1;\n    pointer-events: none;\n    opacity: 0;\n    /* Glides between buttons; appears and goes instantly. */\n    transition:\n      inset 80ms var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1)),\n      scale 100ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1)),\n      background-color 100ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1));\n  }\n\n  [data-slot=\"button-group\"][data-glide]:has(\n      > :is(button, a[href], [role=\"button\"]):not(\n          :disabled,\n          [data-disabled]\n        ):is(:focus-visible, :active, [data-popup-open])\n    )\n    > [data-button-group-highlight] {\n    opacity: 1;\n  }\n\n  @media (hover: hover) {\n    [data-slot=\"button-group\"][data-glide]:has(\n        > :is(button, a[href], [role=\"button\"]):not(\n            :disabled,\n            [data-disabled]\n          ):hover\n      )\n      > [data-button-group-highlight] {\n      opacity: 1;\n    }\n  }\n\n  /* Press: the plate holds still and the pill shrinks. Menu triggers skip\n   * it. */\n  [data-slot=\"button-group\"][data-glide]\n    > :is(button, a[href], [role=\"button\"]):not([data-variant]):active::before {\n    scale: none;\n  }\n\n  [data-slot=\"button-group\"][data-glide]:has(\n      > :is(button, a[href], [role=\"button\"]):active:not(\n          [aria-haspopup],\n          :disabled\n        )\n    )\n    > [data-button-group-highlight] {\n    scale: var(--group-press-scale, 0.98);\n    background-color: var(--group-press);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"button-group\"][data-glide] {\n      --group-press-scale: 1;\n    }\n\n    [data-slot=\"button-group\"][data-glide] > [data-button-group-highlight] {\n      transition: background-color 100ms\n        var(--ease-out, cubic-bezier(0, 0, 0.2, 1));\n    }\n  }\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Focus ring: 2px inside the fill's edge, following its corners. Items draw\n * it on their plate (::before); fields, which have none, as an inset shadow,\n * with an outline under forced colors.\n * -------------------------------------------------------------------------------------------------*/\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is(button, a):focus-visible {\n  outline-color: transparent;\n}\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > :is(button, a):focus-visible::before {\n  outline: 2px solid color-mix(in oklab, var(--color-ring) 50%, transparent);\n  outline-offset: -2px;\n}\n\n[data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n  > [data-slot=\"input\"]:focus-visible {\n  outline-color: transparent;\n  box-shadow: inset 0 0 0 2px\n    color-mix(in oklab, var(--color-ring) 50%, transparent);\n}\n\n@media (forced-colors: active) {\n  [data-slot=\"button-group\"]:not([data-variant=\"attached\"])\n    > [data-slot=\"input\"]:focus-visible {\n    outline: 2px solid Highlight;\n    outline-offset: -2px;\n  }\n}\n",
      "type": "registry:file",
      "target": "components/ui/cubby-ui/button-group/button-group.css"
    }
  ],
  "type": "registry:ui"
}