{
	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json",
	"componentName": "layout",
	"title": "Layout",
	"componentClass": "layout",
	"example": {
		"attributes": {
			"layoutType": "layout-grid-3",
			"layoutTotalItems": 3,
			"layoutTag": "div",
			"layoutUse": true
		}
	},
	"attributes": {
		"layoutItems": {
			"type": "array"
		},
		"layoutType": {
			"type": "string",
			"default": "layout-grid-3"
		},
		"layoutTag": {
			"type": "string",
			"default": "div"
		},
		"layoutTotalItems": {
			"type": "integer",
			"default": 3
		},
		"layoutLoadMoreId": {
			"type": "string"
		},
		"layoutUse": {
			"type": "boolean",
			"default": true
		},
		"wrapperUse": {
			"type": "boolean",
			"default": false
		}
	},
	"options": {
		"layoutType": [
			{
				"label": "2 columns",
				"value": "layout-grid-2",
				"icon": "twoColumns"
			},
			{
				"label": "3 columns",
				"value": "layout-grid-3",
				"icon": "columns"
			},
			{
				"label": "4 columns",
				"value": "layout-grid-4",
				"icon": "fourColumns"
			}
		],
		"layoutTotalItems": {
			"min": 1,
			"max": 50,
			"step": 1
		}
	},
	"combinations": {
		"layoutType": {
			"layout-grid-2": {
				"layoutTotalItems": 2
			},
			"layout-grid-3": {
				"layoutTotalItems": 3
			},
			"layout-grid-4": {
				"layoutTotalItems": 4
			}
		}
	},
	"variables": {
		"layoutTotalItems": [
			{
				"inverse": true,
				"variable": {
					"layout-total-items": "%value%"
				}
			}
		]
	},
	"variablesCustom": [
		"--wrapper-spacing-top: initial;",
		"--wrapper-spacing-bottom: initial;",
		"--wrapper-spacing-top-in: initial;",
		"--wrapper-spacing-bottom-in: initial;",
		"--wrapper-divider-top: initial",
		"--wrapper-divider-bottom: initial;",
		"--wrapper-display: initial;",
		"--wrapper-is-full-width: initial;",
		"--wrapper-grid-template-columns: initial;",
		"--wrapper-display-type: initial;",
		"--wrapper-bg-color-type: initial",
		"--wrapper-bg-color-project: initial",
		"--wrapper-bg-color-solid: initial",
		"--wrapper-bg-color-gradient: initial"
	]
}