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

//#region src/components/navigation/Tabs/styled.ts
const TabsElement = tasty({ styles: {
	display: "flex",
	flow: {
		"": "column",
		"placement=bottom": "column-reverse",
		"placement=left": "row",
		"placement=right": "row-reverse"
	},
	flexShrink: {
		"": 0,
		"has-panels": 1
	},
	flexGrow: {
		"": 0,
		"has-panels": 1
	},
	width: "min 0",
	height: "min 0",
	overflow: "visible",
	Bar: {
		$: ">",
		display: "flex",
		flow: {
			"": "row",
			"placement=left | placement=right": "column"
		},
		placeItems: {
			"": "end stretch",
			"placement=bottom": "start stretch",
			"placement=left": "stretch end",
			"placement=right": "stretch start",
			"type=radio | type=file": "stretch"
		},
		overflow: "visible",
		border: {
			"": 0,
			"(type=default | type=file | type=narrow) & has-panels": "bottom",
			"(type=default | type=file | type=narrow) & has-panels & placement=bottom": "top",
			"(type=default | type=file | type=narrow) & has-panels & placement=left": "right",
			"(type=default | type=file | type=narrow) & has-panels & placement=right": "left"
		},
		width: {
			"": "100%",
			"placement=left | placement=right": "auto",
			"type=radio & (placement=left | placement=right)": "max-content"
		},
		height: {
			"": "auto",
			"placement=left | placement=right": "100%",
			"type=radio & (placement=left | placement=right)": "max-content"
		},
		padding: {
			"": 0,
			"type=radio": ".5x"
		},
		radius: {
			"": 0,
			"type=radio": "1cr"
		},
		fill: {
			"": "#clear",
			"type=radio": "#surface-4"
		},
		flexShrink: 0,
		flexGrow: 0,
		$transition: "$tab-transition",
		"$tab-indicator-size": {
			"": "2bw",
			"size=large": "1ow"
		}
	},
	Prefix: {
		$: "> Bar >",
		display: "flex",
		placeItems: "center",
		placeContent: "center",
		flexShrink: 0,
		placeSelf: "stretch",
		padding: {
			"": 0,
			"type=default": ".5x 0 .5x 1x",
			"type=default & (placement=left | placement=right)": "1x .5x 0 .5x"
		},
		gap: {
			"": 0,
			"type=default": ".5x"
		},
		border: {
			"": 0,
			"type=file": "right",
			"type=file & (placement=left | placement=right)": "bottom"
		}
	},
	Suffix: {
		$: "> Bar >",
		display: "flex",
		placeItems: "center",
		placeContent: "center",
		flexShrink: 0,
		placeSelf: "stretch",
		padding: {
			"": 0,
			"type=default": ".5x 1x .5x 0",
			"type=default & (placement=left | placement=right)": "0 .5x 1x .5x"
		},
		gap: {
			"": 0,
			"type=default": ".5x"
		},
		border: {
			"": 0,
			"type=file": "left",
			"type=file & (placement=left | placement=right)": "top"
		}
	},
	ScrollWrapper: {
		$: "> Bar >",
		position: "relative",
		display: "flex",
		flexGrow: 1,
		flexShrink: 1,
		width: {
			"": "min 0",
			"placement=left | placement=right": "auto"
		},
		height: {
			"": "auto",
			"placement=left | placement=right": "min 0"
		},
		overflow: {
			"": "hidden",
			"type=radio": "visible"
		}
	},
	Scroll: {
		$: "> Bar > ScrollWrapper >",
		position: "relative",
		display: "block",
		overflow: {
			"": "auto hidden",
			"placement=left | placement=right": "hidden auto",
			"type=radio": "visible"
		},
		scrollbar: "none",
		flexGrow: 1,
		width: "100%",
		padding: {
			"": 0,
			"type=radio": ".5x"
		},
		margin: {
			"": 0,
			"type=radio": "-.5x"
		},
		fade: {
			"": "2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black",
			"placement=left | placement=right": "2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black"
		},
		transition: "##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in",
		"#tabs-fade-start": {
			"": "rgb(0 0 0 / 1)",
			"fade-start": "rgb(0 0 0 / 0)"
		},
		"#tabs-fade-end": {
			"": "rgb(0 0 0 / 1)",
			"fade-end": "rgb(0 0 0 / 0)"
		}
	},
	TabList: {
		$: "> Bar > ScrollWrapper > Scroll >",
		position: "relative",
		display: "grid",
		boxSizing: "border-box",
		gridAutoFlow: {
			"": "column",
			"placement=left | placement=right": "row"
		},
		gridAutoColumns: {
			"": "auto",
			"type=radio": "1fr"
		},
		gridAutoRows: {
			"": "auto",
			"type=radio & (placement=left | placement=right)": "1fr"
		},
		gap: {
			"": 0,
			"type=default": "1x",
			"type=narrow": "2x",
			"type=radio": ".5x",
			"(type=default | type=narrow) & (placement=left | placement=right)": "1bw"
		},
		placeContent: "start",
		overflow: "visible",
		width: {
			"": "max-content",
			"type=radio": "100%",
			"placement=left | placement=right": "100%"
		},
		height: {
			"": "auto",
			"placement=left | placement=right": "max-content"
		},
		padding: {
			"": "0 $tablist-padding",
			"placement=left | placement=right": "$tablist-padding 0",
			"(type=default | type=narrow) & (placement=left | placement=right)": "$tablist-padding"
		},
		"$tablist-padding": {
			"": "0",
			"type=default | type=narrow": "1x",
			"(type=default | type=narrow) & (placement=left | placement=right)": ".5x"
		}
	},
	$size: {
		"": "$size-md",
		"size=xsmall": "$size-xs",
		"size=small": "$size-sm",
		"size=medium": "$size-md",
		"size=large": "$size-lg",
		"size=xlarge": "$size-xl"
	},
	Scrollbar: {
		$: "> Bar > ScrollWrapper >",
		position: "absolute",
		bottom: {
			"": "1px",
			"placement=left | placement=right": "auto"
		},
		top: {
			"": "auto",
			"placement=left | placement=right": "$scrollbar-v-top"
		},
		left: {
			"": "$scrollbar-h-left",
			"placement=left | placement=right": "auto"
		},
		right: {
			"": "auto",
			"placement=left | placement=right": "1px"
		},
		height: {
			"": "1ow",
			"placement=left | placement=right": "$scrollbar-v-height"
		},
		width: {
			"": "$scrollbar-h-width",
			"placement=left | placement=right": "1ow"
		},
		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",
			"type=narrow & placement=bottom": "bottom",
			"type=narrow & placement=left": "left",
			"type=narrow & placement=right": "right"
		},
		color: {
			"": "#dark-02",
			"type=narrow & (hovered & !selected)": "#primary-text",
			"(type=default | type=narrow) & selected": "#primary-text",
			disabled: "#disabled-surface-text"
		},
		fill: {
			"": "#clear",
			"hovered & !type=narrow": "#dark.03",
			"type=file": "#surface-3",
			"type=file & hovered": "#surface-3.5",
			"type=radio & hovered": "#surface.5",
			"(type=file | type=radio) & selected": "#surface"
		},
		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"
		},
		outline: "none",
		placeContent: { "type=radio": "center" },
		gridTemplate: { "type=radio": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content" },
		"$selection-shadow": {
			"": "inset 0 0 0 0 #primary",
			"type=file & selected": "inset 0 (-1 * $tab-indicator-size) 0 0 #primary",
			"type=file & selected & placement=bottom": "inset 0 $tab-indicator-size 0 0 #primary",
			"type=file & selected & placement=left": "inset (-1 * $tab-indicator-size) 0 0 0 #primary",
			"type=file & selected & placement=right": "inset $tab-indicator-size 0 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",
		"type=default & (placement=left | placement=right)": 0
	},
	border: {
		"": 0,
		"type=file": "right",
		"type=file & (placement=left | placement=right)": "bottom"
	},
	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",
		"placement=left | placement=right": "auto"
	},
	height: {
		"": "auto",
		"placement=left | placement=right": ".5x"
	},
	top: {
		"": 0,
		"placement=left | placement=right": "auto",
		"(placement=left | placement=right) & before": "-2px"
	},
	bottom: {
		"": 0,
		"placement=left | placement=right": "auto",
		"(placement=left | placement=right) & after": "-2px"
	},
	left: {
		"": "auto",
		"before & !(placement=left | placement=right)": "-2px",
		"placement=left | placement=right": 0
	},
	right: {
		"": "auto",
		"after & !(placement=left | placement=right)": "-2px",
		"placement=left | placement=right": 0
	}
} });
const TabIndicatorElement = tasty({ styles: {
	position: "absolute",
	bottom: {
		"": "0",
		"placement=bottom | placement=left | placement=right": "auto"
	},
	top: {
		"": "auto",
		"placement=bottom": "0"
	},
	left: {
		"": "auto",
		"placement=right": "0"
	},
	right: {
		"": "auto",
		"placement=left": "0"
	},
	height: {
		"": "$tab-indicator-size",
		"placement=left | placement=right": "auto"
	},
	width: {
		"": "auto",
		"placement=left | placement=right": "$tab-indicator-size"
	},
	fill: "#primary",
	transition: "left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out",
	pointerEvents: "none"
} });
const TabPanelElement = tasty({
	as: "section",
	styles: {
		display: "contents",
		hide: {
			"": true,
			active: false
		}
	}
});

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