/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a795c5b | Cube Dev Team */
import { tasty } from "../../../tasty/tasty.js";
import { _Item } from "../../content/Item/Item.js";

//#region src/components/navigation/Tabs/styled.ts
const TabsElement = tasty({ styles: {
	display: "flex",
	flow: "row",
	placeItems: {
		"": "end stretch",
		"type=radio | type=file": "stretch"
	},
	overflow: "visible",
	border: {
		"": 0,
		"(type=default | type=file | type=narrow) & has-panels": "bottom"
	},
	width: {
		"": "100%",
		"type=radio": "max-content"
	},
	padding: {
		"": 0,
		"type=radio": ".5x"
	},
	radius: {
		"": 0,
		"type=radio": "1cr"
	},
	fill: {
		"": "#clear",
		"type=radio": "#dark.06"
	},
	flexShrink: 0,
	flexGrow: 0,
	$transition: "$tab-transition",
	"$tab-indicator-size": {
		"": "2bw",
		"size=large": "1ow"
	},
	Prefix: {
		$: ">",
		display: "flex",
		placeItems: "center",
		placeContent: "center",
		flexShrink: 0,
		placeSelf: "stretch",
		padding: {
			"": 0,
			"type=default": ".5x 0 .5x 1x"
		},
		gap: {
			"": 0,
			"type=default": ".5x"
		},
		border: {
			"": 0,
			"type=file": "right"
		}
	},
	Suffix: {
		$: ">",
		display: "flex",
		placeItems: "center",
		placeContent: "center",
		flexShrink: 0,
		placeSelf: "stretch",
		padding: {
			"": 0,
			"type=default": ".5x 1x .5x 0"
		},
		gap: {
			"": 0,
			"type=default": ".5x"
		},
		border: {
			"": 0,
			"type=file": "left"
		}
	},
	ScrollWrapper: {
		$: ">",
		position: "relative",
		display: "flex",
		flexGrow: 1,
		flexShrink: 1,
		width: "min 0",
		overflow: {
			"": "hidden",
			"type=radio": "visible"
		}
	},
	Scroll: {
		$: "> ScrollWrapper >",
		position: "relative",
		display: "block",
		overflow: {
			"": "auto hidden",
			"type=radio": "visible"
		},
		scrollbar: "none",
		flexGrow: 1,
		width: "100%",
		padding: {
			"": 0,
			"type=radio": ".5x"
		},
		margin: {
			"": 0,
			"type=radio": "-.5x"
		},
		fade: "2x left #tabs-fade-left #black, 2x right #tabs-fade-right #black",
		transition: "##tabs-fade-left $tab-transition ease-in, ##tabs-fade-right $tab-transition ease-in",
		"#tabs-fade-left": {
			"": "rgb(0 0 0 / 1)",
			"fade-left": "rgb(0 0 0 / 0)"
		},
		"#tabs-fade-right": {
			"": "rgb(0 0 0 / 1)",
			"fade-right": "rgb(0 0 0 / 0)"
		}
	},
	TabList: {
		$: "> ScrollWrapper > Scroll >",
		position: "relative",
		display: "grid",
		gridAutoFlow: "column",
		gridAutoColumns: {
			"": "auto",
			"type=radio": "1fr"
		},
		gap: {
			"": 0,
			"type=default": "1x",
			"type=narrow": "2x",
			"type=radio": ".5x"
		},
		placeContent: "start",
		overflow: "visible",
		width: {
			"": "max-content",
			"type=radio": "100%"
		},
		padding: "0 $tablist-padding",
		"$tablist-padding": {
			"": "0",
			"type=default | type=narrow": "1x"
		}
	},
	$size: {
		"": "$size-md",
		"size=xsmall": "$size-xs",
		"size=small": "$size-sm",
		"size=medium": "$size-md",
		"size=large": "$size-lg",
		"size=xlarge": "$size-xl"
	},
	ScrollbarH: {
		$: "> ScrollWrapper >",
		position: "absolute",
		bottom: "1px",
		left: "$scrollbar-h-left",
		height: "1ow",
		width: "$scrollbar-h-width",
		radius: "round",
		fill: "#dark.35",
		opacity: {
			"": 0,
			"focused | scrolling": 1
		},
		transition: "opacity 0.15s",
		pointerEvents: "none"
	}
} });
const TabElement = tasty(_Item, {
	as: "button",
	styles: {
		radius: {
			"": false,
			"type=radio | type=default": true,
			"type=narrow": "top"
		},
		color: {
			"": "#dark-02",
			"type=narrow & (hovered & !selected)": "#primary-text",
			"(type=default | type=narrow) & selected": "#primary-text",
			disabled: "#dark-04"
		},
		fill: {
			"": "#clear",
			"hovered & !type=narrow": "#dark.03",
			"type=file": "#light",
			"type=file & hovered": "#light.5",
			"type=radio & hovered": "#white.5",
			"(type=file | type=radio) & selected": "#white"
		},
		border: {
			"": "#clear",
			"type=file": "0 #clear"
		},
		preset: {
			"": "t3m",
			"size=xsmall": "t4"
		},
		shadow: {
			"": "$selection-shadow",
			"focused & focus-visible": "inset 0 0 0 1bw #primary-text, $selection-shadow",
			editing: "inset 0 0 0 1bw #primary-text, $selection-shadow",
			"type=radio & selected": "$item-shadow",
			"type=radio & selected & focused & focus-visible": "$item-shadow, inset 0 0 0 1bw #primary-text"
		},
		"$selection-shadow": {
			"": "inset 0 0 0 0 #primary",
			"type=file & selected": "inset 0 (-1 * $tab-indicator-size) 0 0 #primary",
			"!type=file": "inset 0 0 0 0 #primary.0"
		},
		"$label-padding-left": {
			"": "$inline-padding",
			"has-start-content": 0,
			"type=narrow": 0
		},
		"$label-padding-right": {
			"": "$inline-padding",
			"has-end-content": 0,
			"type=narrow": 0
		},
		Label: { placeSelf: {
			"": "center start",
			"type=radio": "center start",
			"type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon": "center"
		} },
		Actions: { transition: false }
	}
});
const TabContainer = tasty({ styles: {
	position: "relative",
	display: "grid",
	margin: {
		"": 0,
		"type=default": ".5x 0"
	},
	border: {
		"": 0,
		"type=file": "right"
	},
	cursor: {
		"": "default",
		draggable: "grab",
		dragging: "grabbing"
	},
	$size: {
		"": "$size-md",
		"size=xsmall": "$size-xs",
		"size=small": "$size-sm",
		"size=medium": "$size-md",
		"size=large": "$size-lg",
		"size=xlarge": "$size-xl"
	},
	Actions: {
		$: ">",
		position: "absolute",
		inset: "1bw 1bw auto auto",
		display: "flex",
		gap: "1bw",
		placeItems: "center",
		placeContent: "center end",
		pointerEvents: "auto",
		height: "min ($size - 2bw)",
		padding: "0 $side-padding",
		opacity: {
			"": 1,
			"auto-hide-actions": 0,
			"auto-hide-actions & (active | :hover | :focus-within | :has([data-pressed]))": 1
		},
		transition: "opacity $transition",
		"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
		"$side-padding": "(($size - $action-size - 2bw) / 2)"
	}
} });
const DropIndicatorElement = tasty({ styles: {
	zIndex: 10,
	position: "absolute",
	pointerEvents: "none",
	opacity: {
		"": 0,
		"drop-target": 1
	},
	fill: "#primary",
	width: ".5x",
	top: 0,
	bottom: 0,
	left: {
		"": "auto",
		before: "-2px"
	},
	right: {
		"": "auto",
		after: "-2px"
	}
} });
const TabIndicatorElement = tasty({ styles: {
	position: "absolute",
	bottom: "0",
	left: 0,
	height: "$tab-indicator-size",
	fill: "#primary",
	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out",
	pointerEvents: "none"
} });
const TabPanelElement = tasty({
	as: "section",
	styles: {
		display: "contents",
		hide: {
			"": true,
			active: false
		}
	}
});
const EditableTitleInputElement = tasty({
	as: "input",
	styles: {
		border: 0,
		padding: 0,
		margin: 0,
		fill: "transparent",
		outline: 0,
		preset: "inherit",
		color: "inherit",
		width: "initial $input-width 100%"
	}
});
const HiddenMeasure = tasty({ styles: {
	position: "absolute",
	visibility: "hidden",
	whiteSpace: "pre",
	font: "inherit",
	pointerEvents: "none",
	height: 0,
	overflow: "hidden"
} });

//#endregion
export { DropIndicatorElement, EditableTitleInputElement, HiddenMeasure, TabContainer, TabElement, TabIndicatorElement, TabPanelElement, TabsElement };
//# sourceMappingURL=styled.js.map