{
	"$schema": "screen.schema.json",
	"id": "cards",
	"title": "Cards",
	"type": "screen-container",
	"iconPaths": [
		"M1 16.0625C1 16.5301 1.37617 16.9062 1.84375 16.9062H3.94258C4.30117 18.0488 5.36641 18.875 6.625 18.875C7.88359 18.875 8.94883 18.0488 9.30742 16.9062H18.1562C18.6238 16.9062 19 16.5301 19 16.0625C19 15.5949 18.6238 15.2188 18.1562 15.2188H9.30742C8.94883 14.0762 7.88359 13.25 6.625 13.25C5.36641 13.25 4.30117 14.0762 3.94258 15.2188H1.84375C1.37617 15.2188 1 15.5949 1 16.0625ZM5.5 16.0625C5.5 15.7641 5.61853 15.478 5.82951 15.267C6.04048 15.056 6.32663 14.9375 6.625 14.9375C6.92337 14.9375 7.20952 15.056 7.42049 15.267C7.63147 15.478 7.75 15.7641 7.75 16.0625C7.75 16.3609 7.63147 16.647 7.42049 16.858C7.20952 17.069 6.92337 17.1875 6.625 17.1875C6.32663 17.1875 6.04048 17.069 5.82951 16.858C5.61853 16.647 5.5 16.3609 5.5 16.0625ZM12.25 10.4375C12.25 10.1391 12.3685 9.85298 12.5795 9.64201C12.7905 9.43103 13.0766 9.3125 13.375 9.3125C13.6734 9.3125 13.9595 9.43103 14.1705 9.64201C14.3815 9.85298 14.5 10.1391 14.5 10.4375C14.5 10.7359 14.3815 11.022 14.1705 11.233C13.9595 11.444 13.6734 11.5625 13.375 11.5625C13.0766 11.5625 12.7905 11.444 12.5795 11.233C12.3685 11.022 12.25 10.7359 12.25 10.4375ZM13.375 7.625C12.1164 7.625 11.0512 8.45117 10.6926 9.59375H1.84375C1.37617 9.59375 1 9.96992 1 10.4375C1 10.9051 1.37617 11.2812 1.84375 11.2812H10.6926C11.0512 12.4238 12.1164 13.25 13.375 13.25C14.6336 13.25 15.6988 12.4238 16.0574 11.2812H18.1562C18.6238 11.2812 19 10.9051 19 10.4375C19 9.96992 18.6238 9.59375 18.1562 9.59375H16.0574C15.6988 8.45117 14.6336 7.625 13.375 7.625ZM7.75 5.9375C7.45163 5.9375 7.16548 5.81897 6.95451 5.608C6.74353 5.39702 6.625 5.11087 6.625 4.8125C6.625 4.51413 6.74353 4.22798 6.95451 4.017C7.16548 3.80603 7.45163 3.6875 7.75 3.6875C8.04837 3.6875 8.33452 3.80603 8.54549 4.017C8.75647 4.22798 8.875 4.51413 8.875 4.8125C8.875 5.11087 8.75647 5.39702 8.54549 5.608C8.33452 5.81897 8.04837 5.9375 7.75 5.9375ZM10.4324 3.96875C10.0738 2.82617 9.00859 2 7.75 2C6.49141 2 5.42617 2.82617 5.06758 3.96875H1.84375C1.37617 3.96875 1 4.34492 1 4.8125C1 5.28008 1.37617 5.65625 1.84375 5.65625H5.06758C5.42617 6.79883 6.49141 7.625 7.75 7.625C9.00859 7.625 10.0738 6.79883 10.4324 5.65625H18.1562C18.6238 5.65625 19 5.28008 19 4.8125C19 4.34492 18.6238 3.96875 18.1562 3.96875H10.4324Z"
	],
	"content": [
		{
			"id": "option-cards",
			"title": "Card Framework (Experimental)",
			"type": "toggle",
			"default": "off",
			"style": "primary",
			"tooltip": "Enable the ACSS card framework.",
			"documentation": "https://automaticcss.com/docs/card-framework/"
		},
		{
			"id": "card-style-tabs",
			"title": "Card Tabs",
			"type": "tabs-container",
			"style": "full-width",
			"tooltip": "",
			"displayWhen": [
				"option-cards",
				"on"
			],
			"content": [
				{
					"id": "card-default-styles",
					"title": "Default",
					"type": "tab",
					"icon": "settings",
					"content": [
						{
							"id": "card-styling-section",
							"title": "Shared Styles",
							"type": "section-container",
							"content": [
								{
									"id": "card-spacing",
									"title": "Spacing",
									"type": "accordion-container",
									"tooltip": "",
									"description": "",
									"displayWhen": [
										"option-cards",
										"on"
									],
									"content": [
										{
											"id": "card-padding",
											"title": "Card Padding",
											"type": "text",
											"default": "var(--space-m)",
											"tooltip": "Padding of the main card element.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-gap",
											"title": "Card Content Gap",
											"type": "text",
											"default": "calc(var(--content-gap) / 2)",
											"tooltip": "Space between content in cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "card-typography",
									"title": "Typography",
									"type": "accordion-container",
									"tooltip": "",
									"description": "",
									"content": [
										{
											"id": "card-heading-size",
											"title": "Heading Size",
											"type": "text",
											"default": "var(--h3)",
											"tooltip": "Size of card headings (h1-h6) targeting any '__heading' element.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-text-size",
											"title": "Text Size",
											"type": "text",
											"default": "var(--text-s)",
											"tooltip": "Default size of card text.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-button-font-size",
											"title": "Button Text Size",
											"type": "text",
											"default": "var(--text-s)",
											"tooltip": "Default size of card buttons.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "card-borders",
									"title": "Borders",
									"type": "accordion-container",
									"tooltip": "",
									"description": "",
									"content": [
										{
											"id": "option-card-concentric-radius",
											"title": "Concentric Radius",
											"type": "toggle",
											"default": "off",
											"tooltip": "Use a concentric radius for all cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-border-width",
											"title": "Border Width",
											"type": "text",
											"default": "var(--border-width)",
											"tooltip": "Thickness of the card border.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-border-style",
											"title": "Border Style",
											"type": "select",
											"default": "solid",
											"options": [
												"solid",
												"dashed",
												"dotted",
												"double",
												"groove",
												"ridge",
												"inset",
												"outset",
												"none"
											],
											"tooltip": "Style of the card border.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-radius",
											"title": "Border Radius",
											"type": "text",
											"default": "var(--radius)",
											"tooltip": "Radius of the card border.",
											"documentation": "https://automaticcss.com/docs/card-framework/",
											"displayWhen": [
												"option-card-concentric-radius",
												"off"
											]
										}
									]
								},
								{
									"id": "card-icons",
									"title": "Icons",
									"type": "accordion-container",
									"tooltip": "",
									"description": "",
									"content": [
										{
											"id": "card-icon-size",
											"title": "Icon Size",
											"type": "text",
											"default": "68px",
											"tooltip": "Size of the main icon (__icon) in icon cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-icon-radius",
											"title": "Icon Radius",
											"type": "text",
											"default": "var(--icon-radius)",
											"tooltip": "Radius of the main icon (__icon) in icon cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "card-avatars",
									"title": "Avatars",
									"type": "accordion-container",
									"tooltip": "",
									"description": "",
									"content": [
										{
											"id": "card-avatar-size",
											"title": "Avatar Size",
											"type": "text",
											"default": "140px",
											"tooltip": "Size of the main avatar (__avatar) in avatar cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-avatar-border-width",
											"title": "Border Width",
											"type": "text",
											"default": "var(--border-width)",
											"tooltip": "Thickness of the main avatar (__avatar) border in avatar cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-avatar-border-style",
											"title": "Border Style",
											"type": "text",
											"default": "var(--border-style)",
											"tooltip": "Style of the main avatar (__avatar) in avatar cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-avatar-radius",
											"title": "Radius",
											"type": "text",
											"default": "var(--radius)",
											"tooltip": "Radius of the main avatar (__avatar) in avatar cards. Use 50vw for a circle.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-avatar-aspect-ratio",
											"title": "Aspect Ratio",
											"type": "text",
											"default": "1",
											"tooltip": "Aspect ratio of the main avatar (__avatar) in avatar cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "card-media",
									"title": "Media",
									"type": "accordion-container",
									"tooltip": "",
									"description": "",
									"content": [
										{
											"id": "card-media-radius",
											"title": "Radius",
											"type": "text",
											"default": "var(--radius)",
											"tooltip": "Radius of the main media (__media) in media cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-media-aspect-ratio",
											"title": "Aspect Ratio",
											"type": "text",
											"default": "4 / 3",
											"tooltip": "Aspect ratio of the main media (__media) in media cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "card-media-object-fit",
											"title": "Object Fit",
											"type": "text",
											"default": "cover",
											"tooltip": "Object fit of the main media (__media) in media cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								}
							]
						}
					]
				},
				{
					"id": "light-card-styles",
					"title": "Light Card",
					"icon": "sun",
					"type": "tab",
					"content": [
						{
							"id": "light-card-message",
							"text": "These styles are automatically applied to card classes appended with '--light' or to any card by default if your primary card style is Light.",
							"type": "message"
						},
						{
							"id": "light-styles-container",
							"title": "Light Styles",
							"type": "section-container",
							"content": [
								{
									"id": "light-card-background-color",
									"type": "hover-container",
									"content": [
										{
											"id": "light-card-background",
											"title": "Background",
											"type": "text",
											"default": "var(--white)",
											"cssVariable": "--card-background",
											"target": ":is([class*='card']:where(:not([class*='__'], [class*='--dark'], [class*='--alt'])))",
											"tooltip": "Background of light cards. Accepts any valid background value.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "light-card-background-hover",
											"title": "Background Hover",
											"type": "text",
											"default": "var(--light-card-background)",
											"tooltip": "Background hover of light cards. Accepts any valid background value.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "light-card-heading-color",
									"title": "Heading Color",
									"type": "text",
									"default": "var(--text-dark)",
									"tooltip": "Heading color for light cards targeting (__heading) elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "light-card-text-color",
									"title": "Text Color",
									"type": "text",
									"default": "var(--text-dark-muted)",
									"tooltip": "Text color for light cards",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "light-card-link-hover",
									"type": "hover-container",
									"content": [
										{
											"id": "light-card-link-color",
											"title": "Link Color",
											"type": "text",
											"default": "var(--primary)",
											"tooltip": "Link color for light cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "light-card-link-color-hover",
											"title": "Link Hover",
											"type": "text",
											"default": "var(--primary-hover)",
											"tooltip": "Hover link color for light cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "light-card-button-style",
									"title": "Button Style",
									"type": "text",
									"default": "primary",
									"output": "quotes",
									"tooltip": "Button style for light cards. Targets all .btn-- elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "light-card-border-color",
									"title": "Border Color",
									"type": "text",
									"default": "var(--border-color-dark)",
									"tooltip": "Border color for light cards. Transparent is a valid value.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "light-card-icon-style",
									"title": "Icon Style",
									"type": "select",
									"default": "light",
									"options": [
										"light",
										"dark",
										"custom"
									],
									"output": "quotes",
									"tooltip": "Icon style for light cards targeting [data-icon] elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "light-card-avatar-border-color",
									"title": "Avatar Border Color",
									"type": "text",
									"default": "",
									"tooltip": "Avatar border color for light cards targeting (__avatar) elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "light-card-shadow",
									"title": "Card Shadow",
									"type": "textarea",
									"default": "",
									"tooltip": "Box shadow for light cards.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								}
							]
						}
					]
				},
				{
					"id": "dark-card-styles",
					"title": "Dark Cards",
					"icon": "moon",
					"type": "tab",
					"content": [
						{
							"id": "dark-card-message",
							"text": "These styles are automatically applied to card classes appended with '--dark' or to any card by default if your primary card style is Dark.",
							"type": "message"
						},
						{
							"id": "dark-styles-container",
							"title": "Dark Styles",
							"type": "section-container",
							"content": [
								{
									"id": "dark-card-background-color",
									"type": "hover-container",
									"content": [
										{
											"id": "dark-card-background",
											"title": "Background",
											"type": "text",
											"default": "var(--black)",
											"tooltip": "Background of dark cards. Accepts any valid background value.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "dark-card-background-hover",
											"title": "Background Hover",
											"type": "text",
											"default": "var(--dark-card-background)",
											"tooltip": "Background hover of dark cards. Accepts any valid background value.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "dark-card-heading-color",
									"title": "Heading Color",
									"type": "text",
									"default": "var(--text-light)",
									"tooltip": "Heading color for dark cards targeting (__heading) elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "dark-card-text-color",
									"title": "Text Color",
									"type": "text",
									"default": "var(--text-light-muted)",
									"tooltip": "Text color for dark cards",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "dark-card-link-hover",
									"type": "hover-container",
									"content": [
										{
											"id": "dark-card-link-color",
											"title": "Link Color",
											"type": "text",
											"default": "var(--primary)",
											"tooltip": "Link color for dark cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										},
										{
											"id": "dark-card-link-color-hover",
											"title": "Link Hover",
											"type": "text",
											"default": "var(--primary-hover)",
											"tooltip": "Link hover color for dark cards.",
											"documentation": "https://automaticcss.com/docs/card-framework/"
										}
									]
								},
								{
									"id": "dark-card-button-style",
									"title": "Button Style",
									"type": "text",
									"default": "primary",
									"tooltip": "Button style for dark cards. Targets all .btn-- elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "dark-card-border-color",
									"title": "Border Color",
									"type": "text",
									"default": "var(--border-color-light)",
									"tooltip": "Border color for dark cards. Transparent is a valid value.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "dark-card-icon-style",
									"title": "Icon Style",
									"type": "select",
									"default": "dark",
									"options": [
										"light",
										"dark",
										"custom"
									],
									"tooltip": "Icon style for dark cards targeting [data-icon] elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "dark-card-avatar-border-color",
									"title": "Avatar Border Color",
									"type": "text",
									"default": "",
									"tooltip": "Avatar border color for dark cards targeting (__avatar) elements.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								},
								{
									"id": "dark-card-shadow",
									"title": "Card Shadow",
									"type": "textarea",
									"default": "",
									"tooltip": "Box shadow for light cards.",
									"documentation": "https://automaticcss.com/docs/card-framework/"
								}
							]
						}
					]
				}
			]
		},
		{
			"id": "card-options-section",
			"title": "Options",
			"type": "section-container",
			"displayWhen": [
				"option-cards",
				"on"
			],
			"content": [
				{
					"id": "card-options",
					"title": "Options",
					"type": "accordion-container",
					"content": [
						{
							"id": "primary-card-style",
							"title": "Primary Card Style",
							"type": "select",
							"default": "Light",
							"options": [
								"Light",
								"Dark"
							],
							"tooltip": "Choose the primary/default card style.",
							"documentation": "https://automaticcss.com/docs/card-framework/"
						},
						{
							"id": "option-auto-card-selector",
							"title": "Automatically Style Cards",
							"type": "toggle",
							"default": "off",
							"tooltip": "Apply the card framework to any element with a class containing 'card'. We highly recommend turning this on.",
							"documentation": "https://automaticcss.com/docs/card-framework/"
						},
						{
							"id": "option-cards-use-grid",
							"title": "Default Cards to Display Grid",
							"type": "toggle",
							"default": "off",
							"tooltip": "Automatically use display grid for cards.",
							"documentation": "https://automaticcss.com/docs/card-framework/"
						},
						{
							"id": "option-card-container-queries",
							"title": "Auto Container Query Support",
							"type": "toggle",
							"default": "off",
							"tooltip": "Automatically add support for container queries to cards.",
							"documentation": "https://automaticcss.com/docs/card-framework/"
						}
					]
				},
				{
					"id": "card-targeting",
					"title": "Targeting Settings",
					"type": "accordion-container",
					"content": [
						{
							"id": "card-selector-auto",
							"title": "Auto Card Selector",
							"type": "textarea",
							"default": ":is([class*='card']:where(:not([class*='__'], [class*='wrapper'], [class*='cards'], [class*='group'])))",
							"output": "quotes",
							"placeholder": ":is([class*='card']:where(:not([class*='__'], [class*='wrapper'], [class*='cards'], [class*='group'])))",
							"tooltip": "Control auto-card selection. You can exclude selectors by adding them inside the :not().",
							"documentation": "https://automaticcss.com/docs/card-framework/",
							"displayWhen": [
								"option-auto-card-selector",
								"on"
							]
						},
						{
							"id": "card-selectors",
							"title": "Manual Card Selectors",
							"type": "textarea",
							"default": "",
							"output": "quotes",
							"placeholder": ".some-card",
							"tooltip": "Which selectors should ACSS apply the card framework to? Provide a comma-separated list.",
							"documentation": "https://automaticcss.com/docs/card-framework/"
						}
					]
				}
			]
		}
	]
}