/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b04eed0 | Cube Dev Team */
import { DEFAULT_NEUTRAL_STYLES } from "../../../data/item-themes.js";
import { Space } from "../../layout/Space.js";
import { DEFAULT_BUTTON_STYLES } from "../Button/Button.js";
import { tasty } from "@tenphi/tasty";

//#region src/components/actions/Menu/styled.tsx
const StyledMenuWrapper = tasty({
	qa: "Menu",
	styles: {
		display: "grid",
		gridRows: "max-content 1sf max-content",
		fill: "#white",
		margin: 0,
		padding: 0,
		border: true,
		radius: "(1cr + 1bw)",
		width: {
			"": "auto",
			popover: "max-content"
		},
		shadow: {
			"": "",
			"popover | tray": "0px 5px 15px #dark.05"
		},
		height: {
			"": "initial",
			popover: "initial max-content (50vh - 4x)",
			tray: "initial max-content (100vh - 4x)"
		},
		boxSizing: "border-box"
	}
});
const StyledMenu = tasty({
	as: "ul",
	qa: "MenuList",
	styles: {
		display: "flex",
		flow: "column",
		gap: {
			"": "1bw",
			sections: false
		},
		boxSizing: "border-box",
		margin: 0,
		padding: {
			"": "0.5x",
			section: 0
		},
		overflow: {
			"": "auto",
			section: ""
		},
		scrollbar: "styled"
	}
});
const StyledDivider = tasty({
	qa: "Divider",
	as: "li",
	styles: {
		display: "flex",
		flow: "column",
		margin: ".5x",
		listStyle: "none",
		fill: "#border",
		height: "1bw",
		flexShrink: 0
	}
});
const StyledHeader = tasty(Space, {
	qa: "Header",
	as: "div",
	role: "heading",
	"aria-level": 3,
	styles: {
		color: "#dark-02",
		preset: "t3",
		placeContent: "space-between",
		placeItems: "center",
		whiteSpace: "nowrap",
		padding: ".5x 1.5x",
		height: "min $size",
		boxSizing: "border-box",
		border: "bottom",
		radius: "1cr top",
		$size: {
			"": "$size-md",
			"size=small": "$size-sm",
			"size=medium": "$size-md",
			"size=large": "$size-lg"
		}
	}
});
const StyledFooter = tasty(Space, {
	qa: "Footer",
	as: "div",
	role: "footer",
	styles: {
		color: "#dark-02",
		preset: "t3",
		placeContent: "space-between",
		placeItems: "center",
		whiteSpace: "nowrap",
		padding: ".5x 1.5x",
		height: {
			"": "min $size-md",
			"size=large": "min $size-lg"
		},
		boxSizing: "border-box",
		border: "top",
		radius: "1cr bottom"
	}
});
const StyledSection = tasty({
	qa: "Section",
	as: "li",
	styles: {
		display: "flex",
		flow: "column",
		margin: "0",
		padding: "0",
		listStyle: "none",
		fill: "#white"
	}
});
const StyledItem = tasty({
	qa: "Item",
	as: "li",
	styles: {
		...DEFAULT_BUTTON_STYLES,
		...DEFAULT_NEUTRAL_STYLES,
		display: "flex",
		flow: "row",
		justifyContent: "stretch",
		listStyle: "none",
		flexShrink: 0,
		height: {
			"": "min $size-md",
			"size=large": "min $size-lg"
		},
		border: false,
		boxSizing: "border-box",
		fill: {
			"": "#clear",
			focused: "#dark.03",
			selected: "#dark.09",
			"selected & focused": "#dark.12",
			pressed: "#dark.09",
			disabled: "#clear"
		},
		color: {
			"": "#dark-02",
			"selected | pressed": "#dark",
			disabled: "#dark-04"
		},
		cursor: {
			"": "default",
			disabled: "not-allowed"
		},
		shadow: "#clear",
		padding: {
			"": ".5x 1x",
			"selectionIcon & selectable & !selected": ".5x 1x .5x (1x + 3x)"
		},
		gap: ".75x",
		outline: false,
		Description: {
			preset: "t4",
			color: "#dark-03"
		}
	}
});
const StyledSectionHeading = tasty(Space, {
	qa: "SectionHeading",
	as: "div",
	styles: {
		color: "#dark-04",
		preset: "c2",
		height: "3x",
		placeContent: "center space-between",
		padding: {
			"": ".5x .75x",
			prefix: "0 .75x 0 .5x"
		},
		$size: {
			"": "$size-md",
			"size=small": "$size-sm",
			"size=medium": "$size-md",
			"size=large": "$size-lg"
		}
	}
});

//#endregion
export { StyledDivider, StyledFooter, StyledHeader, StyledMenu, StyledMenuWrapper, StyledSection, StyledSectionHeading };
//# sourceMappingURL=styled.js.map