/** @license MIT | @cube-dev/ui-kit v0.142.7 | Cube Dev Team */
import { _Item } from "../Item/Item.js";
import { Action } from "../../actions/Action/Action.js";
import { tasty } from "@tenphi/tasty";

//#region src/components/content/Tree/styled.ts
/**
* Tree root.
*
* Renders as `role="treegrid"` (set on `gridProps` from `useTree`).
* This element is the outer flex layout container; scrolling is
* delegated to the inner `TreeScrollContainer` so the virtualized
* sizer (a flex item here would be squashed by `flex-shrink: 1`) is
* placed inside a normal block formatting context.
*
* Tree-wide modifiers (set on `TreeElement` itself):
* - `has-height` — paired with `--tree-height` on inline `style`
*   when the consumer passes a numeric `height` prop.
*/
const TreeElement = tasty({
	qa: "Tree",
	styles: {
		display: "flex",
		flow: "column",
		width: "100%",
		height: {
			"": "auto",
			"has-height": "fixed $tree-height"
		},
		flexGrow: {
			"": 1,
			"has-height": 0
		},
		flexShrink: {
			"": 1,
			"has-height": 0
		},
		flexBasis: {
			"": 0,
			"has-height": "auto"
		},
		minHeight: 0,
		fill: "#clear",
		color: "#dark",
		transition: "theme",
		outline: 0,
		padding: 0,
		radius: {
			"": 0,
			"shape=card": "1cr"
		},
		border: {
			"": 0,
			"shape=card": true
		}
	}
});
/**
* Inner scroll viewport. Block-level on purpose — placing the
* virtualizer's sizer (`height: ${totalSize}px`) directly inside the
* flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes
* the scroll area visibly grow as `@tanstack/react-virtual`
* re-measures rows during scroll.
*/
const TreeScrollContainer = tasty({
	qa: "TreeScrollContainer",
	styles: {
		display: "block",
		flexGrow: 1,
		flexShrink: 1,
		flexBasis: "auto",
		width: "0 100% initial",
		height: "min 0",
		overflow: "auto",
		scrollbar: "thin"
	}
});
/**
* Per-row wrapper carrying `role="row"`, `rowProps` from
* `useTreeItem`, and the `--tree-level` CSS custom property used by
* `TreeRowItem` to compute its left padding.
*
* Has no visual styles of its own — the row's appearance lives on
* the inner `TreeRowItem` (which extends `Item`).
*/
const TreeNodeRow = tasty({
	qa: "TreeRow",
	styles: {
		display: "block",
		outline: 0
	}
});
/**
* The visible row: an `Item` extension that owns layout (full-width,
* tree indent) only. Color treatment is delegated to the
* `default.item` variant (see `DEFAULT_ITEM_STYLES` in
* `data/item-themes.ts`) so the Tree row matches the canonical Item
* look out of the box. `hovered` / `focused` / `pressed` mods are
* propagated from `TreeNode` because react-aria's treegrid uses a
* roving-tabindex "virtual focus" model and never sets those data
* attributes itself.
*/
const TreeRowItem = tasty(_Item, {
	qa: "TreeItem",
	type: "item",
	size: "medium",
	as: "div",
	styles: {
		display: "grid",
		width: "100%",
		padding: "left ($tree-indent * 1.5x)",
		"$tree-indent": "($tree-level, 0)",
		cursor: {
			"": "pointer",
			disabled: "not-allowed"
		}
	}
});
/**
* Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s
* built-in Prefix padding collapses to `0` whenever there's an icon
* (which is always true for tree rows because the toggle/placeholder
* occupies the icon slot). We re-introduce a small inline gap on
* both sides so the checkbox isn't flush against the chevron and the
* title.
*/
const TreeNodeCheckboxWrapper = tasty({
	qa: "TreeNodeCheckboxWrapper",
	styles: {
		display: "grid",
		placeItems: "center",
		placeContent: "center",
		padding: "0 1x"
	}
});
const TOGGLE_BASE_STYLES = {
	display: "grid",
	placeItems: "center",
	placeContent: "center",
	width: "3x",
	height: "3x",
	radius: true,
	transition: "theme"
};
/**
* Chevron toggle button placed in `Item`'s `icon` slot. Spreads
* `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and
* stops the press from bubbling to the row's selection handler via
* React Aria's PressResponder.
*/
const TreeNodeToggle = tasty(Action, {
	qa: "TreeNodeToggle",
	styles: {
		...TOGGLE_BASE_STYLES,
		color: {
			"": "#dark-02",
			":hover": "#dark"
		},
		fill: {
			"": "#clear",
			":hover": "#dark.04"
		}
	}
});
/**
* Non-interactive placeholder that occupies the same footprint as
* `TreeNodeToggle` so leaf rows visually align with siblings that
* have a chevron.
*/
const TreeNodeTogglePlaceholder = tasty({ styles: TOGGLE_BASE_STYLES });

//#endregion
export { TreeElement, TreeNodeCheckboxWrapper, TreeNodeRow, TreeNodeToggle, TreeNodeTogglePlaceholder, TreeRowItem, TreeScrollContainer };
//# sourceMappingURL=styled.js.map