<xf:macro id="property_edit"
	arg-property="!"
	arg-definitionEditable="{{ false }}"
	arg-isActive="{{ true }}"
	arg-customizationState=""
	arg-enableVariations="{{ false }}"
	arg-submitName="properties">

	<xf:if is="$property.property_type == 'css'">
		<xf:macro id="property_edit_css"
			arg-property="{$property}"
			arg-definitionEditable="{$definitionEditable}"
			arg-isActive="{$isActive}"
			arg-customizationState="{$customizationState}"
			arg-submitName="{$submitName}" />
	<xf:else />
		<xf:macro id="property_edit_value"
			arg-property="{$property}"
			arg-definitionEditable="{$definitionEditable}"
			arg-customizationState="{$customizationState}"
			arg-enableVariations="{$enableVariations}"
			arg-submitName="{$submitName}" />
	</xf:if>
</xf:macro>

<xf:macro id="property_edit_value"
	arg-property="!"
	arg-definitionEditable="!"
	arg-customizationState="!"
	arg-enableVariations="{{ false }}"
	arg-submitName="!">

	<xf:css src="style_properties.less" />

	<xf:set var="$titleHtml"><span class="u-anchorTarget" id="sp-{$property.property_name}"></span>{$property.title}</xf:set>

	<xf:set var="$formBaseKey" value="{$submitName}[{$property.property_name}]" />

	<xf:set var="$hintHtml"><xf:trim>
		<xf:if is="$xf.development">{$property.property_name} {$property.display_order|parens}</xf:if>
		<xf:if is="$definitionEditable">
			<a href="{{ link('style-properties/edit', $property) }}">{{ phrase('edit') }}</a>
		</xf:if>

		<xf:if is="$property.addon_id AND $property.Group AND $property.addon_id != $property.Group.addon_id AND $property.addon_id != 'XF'">
			<span class="formRow-hint-featured">
				{$property.AddOn.title}
			</span>
		</xf:if>

		<xf:macro id="customization_hint"
			arg-state="{$customizationState}"
			arg-submitName="{$submitName}"
			arg-property="{$property}"
			arg-checkbox="{{ true }}" />

		<xf:hiddenval name="{$submitName}_listed[]" value="{$property.property_name}" />
	</xf:trim></xf:set>

	<xf:set var="$valueOptions" value="{{ $property.getValueOptions() }}" />

	<xf:set var="$rowClass" value="{{ $property.depends_on ? 'js-stylePropDependsOn-' . $property.depends_on : '' }} xf-{$property.property_name} js-property--{$property.property_name}" />

	<span class="u-anchorTarget" id="@xf-{$property.property_name}"></span>

	<xf:if is="$property.value_type == 'boolean'">

		<!--boolean-->
		<xf:checkboxrow rowclass="{$rowClass}"
			hint="{$hintHtml}">

			<xf:option name="{$formBaseKey}"
				value="1"
				selected="$property.property_value == 1"
				data-xf-init="disabler"
				data-container=".js-stylePropDependsOn-{$property.property_name}"
				data-optional="true"
				data-hide="{{ $valueOptions.hideDependent ?: 'false' }}"
				label="{$titleHtml}"
				hint="{$property.description}"  />
		</xf:checkboxrow>


	<xf:elseif is="$property.value_type == 'radio'" />

		<xf:if is="$property.has_variations">
			<xf:formrow rowtype="input"
				rowclass="formRow-styleProperty {$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}">

				<xf:if is="$enableVariations">
					<ul class="listPlain inputGroup-container">
						<li>
							<div class="inputGroup inputGroup--grow">
								<xf:foreach loop="$property.getVariations()" value="$variation">
									<xf:if is="$variation != 'default'">
										<span class="inputGroup-splitter"></span>
									</xf:if>

									<xf:radio name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}">
										<xf:options source="{$valueOptions}" />
									</xf:radio>
								</xf:foreach>
							</div>
						</li>
					</ul>
				<xf:else />
					<xf:radio name="{$formBaseKey}[default]" value="{{ $property.getVariationValue('default') }}">
						<xf:options source="{$valueOptions}" />
					</xf:radio>

					<xf:foreach loop="$property.getVariations(false)" value="$variation">
						<xf:hiddenval name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}" />
					</xf:foreach>
				</xf:if>
			</xf:formrow>
		<xf:else />
			<xf:radiorow name="{$formBaseKey}" value="{$property.property_value}" rowclass="{$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}">

				<xf:options source="{$valueOptions}" />
			</xf:radiorow>
		</xf:if>


	<xf:elseif is="$property.value_type == 'select'" />

		<xf:selectrow name="{$formBaseKey}" value="{$property.property_value}" rowclass="{$rowClass}"
			label="{$titleHtml}"
			hint="{$hintHtml}"
			explain="{$property.description}">

			<xf:options source="{$valueOptions}" />
		</xf:selectrow>

	<xf:elseif is="$property.value_type == 'number'" />

		<xf:numberboxrow name="{$formBaseKey}" value="{$property.property_value}"
			min="{$valueOptions.min}"
			max="{$valueOptions.max}"
			step="{$valueOptions.step}"
			units="{$valueOptions.units}"
			rowclass="{$rowClass}" rowid="propRow_{$property.property_name}"
			label="{$titleHtml}"
			hint="{$hintHtml}"
			explain="{$property.description}" />

	<xf:elseif is="$property.value_type == 'color'" />

		<xf:if is="$property.has_variations">
			<xf:formrow rowtype="input"
				rowclass="formRow-styleProperty {$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}">

				<xf:if is="$enableVariations">
					<ul class="listPlain inputGroup-container">
						<li>
							<div class="inputGroup inputGroup--grow">
								<xf:foreach loop="$property.getVariations()" value="$variation">
									<xf:if is="$variation != 'default'">
										<span class="inputGroup-splitter"></span>
									</xf:if>

									<xf:macro id="public:color_picker_macros::color_picker"
										arg-name="{$formBaseKey}[{$variation}]"
										arg-value="{{ $property.getVariationValue($variation) }}"
										arg-mapVariation="{$variation}"
										arg-mapName="@xf-{$property.property_name}"
										arg-allowPalette="{{ $valueOptions.hidePalette ? 'false' : 'true'}}"
										arg-row="{{ false }}"
										arg-includeScripts="{{ false }}"
										arg-showTxt="{{ true }}"/>
								</xf:foreach>
							</div>
						</li>
					</ul>
				<xf:else />
					<xf:macro id="public:color_picker_macros::color_picker"
						arg-name="{$formBaseKey}[default]"
						arg-value="{{ $property.getVariationValue('default') }}"
						arg-mapVariation="default"
						arg-mapName="@xf-{$property.property_name}"
						arg-allowPalette="{{ $valueOptions.hidePalette ? 'false' : 'true'}}"
						arg-row="{{ false }}"
						arg-includeScripts="{{ false }}"
						arg-showTxt="{{ true }}"/>

					<xf:foreach loop="$property.getVariations(false)" value="$variation">
						<xf:hiddenval name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}" />
					</xf:foreach>
				</xf:if>
			</xf:formrow>
		<xf:else />
			<xf:macro template="public:color_picker_macros" name="color_picker"
				arg-name="{$formBaseKey}"
				arg-value="{$property.property_value}"
				arg-mapVariation="default"
				arg-mapName="@xf-{$property.property_name}"
				arg-allowPalette="{{ $valueOptions.hidePalette ? 'false' : 'true'}}"
				arg-label="{$titleHtml}"
				arg-hint="{$hintHtml}"
				arg-explain="{$property.description}"
				arg-rowClass="formRow-styleProperty {$rowClass}" rowid="propRow_{$property.property_name}"
				arg-includeScripts="{{ false }}"
				arg-showTxt="{{ true }}"/>
		</xf:if>

	<xf:elseif is="$property.value_type == 'unit'" />

		<xf:textboxrow
			name="{$formBaseKey}"
			value="{$property.property_value}"
			class="input--number"
			rowclass="{$rowClass}"
			label="{$titleHtml}"
			hint="{$hintHtml}"
			explain="{$property.description}"
			dir="ltr" />

	<xf:elseif is="$property.value_type == 'template'" />

		<xf:if is="$valueOptions.template">
			<xf:set var="$includeHtml"><xf:include template="{$valueOptions.template}" /></xf:set>
			<xf:if is="$includeHtml is empty">
				<xf:formrow label="{$titleHtml}" hint="{$hintHtml}">
					<div class="blockMessage blockMessage--error blockMessage--iconic">{{ phrase('template_x_not_found', {'template': $valueOptions.template}) }}</div>
				</xf:formrow>
			<xf:else />
				{$includeHtml}
			</xf:if>
		<xf:else />
			<xf:formrow label="{$titleHtml}" hint="{$hintHtml}">
				<div class="blockMessage blockMessage--error blockMessage--iconic">{{ phrase('no_template_specified') }}</div>
			</xf:formrow>
		</xf:if>

	<xf:elseif is="$property.value_type == 'string' && $valueOptions.rows > 1" />

		<xf:if is="$property.has_variations">
			<xf:formrow rowtype="input"
				class="{$valueOptions.class}"
				rowclass="formRow-styleProperty {$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}">

				<xf:if is="$enableVariations">
					<ul class="listPlain inputGroup-container">
						<li>
							<div class="inputGroup inputGroup--grow">
								<xf:foreach loop="$property.getVariations()" value="$variation">
									<xf:if is="$variation != 'default'">
										<span class="inputGroup-splitter"></span>
									</xf:if>

									<xf:textarea name="{$formBaseKey}[default]" value="{{ $property.getVariationValue('default') }}"
										rows="{$valueOptions.rows}"
										autosize="true"
										code="{$valueOptions.code}"
										dir="auto" />
								</xf:foreach>
							</div>
						</li>
					</ul>
				<xf:else />
					<xf:textarea name="{$formBaseKey}[default]" value="{{ $property.getVariationValue('default') }}"
						rows="{$valueOptions.rows}"
						autosize="true"
						code="{$valueOptions.code}"
						dir="auto" />

					<xf:foreach loop="$property.getVariations(false)" value="$variation">
						<xf:hiddenval name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}" />
					</xf:foreach>
				</xf:if>
			</xf:formrow>
		<xf:else />
			<xf:textarearow name="{$formBaseKey}" value="{$property.property_value}"
				rows="{$valueOptions.rows}"
				autosize="true"
				class="{$valueOptions.class}"
				code="{$valueOptions.code}"
				rowclass="{$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}"
				dir="auto" />
		</xf:if>

	<xf:elseif is="$property.value_type == 'string' && $valueOptions.asset" />

		<xf:if is="$property.has_variations">
			<xf:formrow rowtype="input"
				class="{$valueOptions.class}"
				rowclass="formRow-styleProperty {$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}">

				<xf:if is="$enableVariations">
					<ul class="listPlain inputGroup-container">
						<li>
							<div class="inputGroup inputGroup--grow">
								<xf:foreach loop="$property.getVariations()" value="$variation">
									<xf:if is="$variation != 'default'">
										<span class="inputGroup-splitter"></span>
									</xf:if>

									<xf:assetupload name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}"
										asset="{$valueOptions.asset}_{$variation}" />
								</xf:foreach>
							</div>
						</li>
					</ul>
				<xf:else />
					<xf:assetupload name="{$formBaseKey}[default]" value="{{ $property.getVariationValue('default') }}"
						asset="{$valueOptions.asset}_default" />

					<xf:foreach loop="$property.getVariations(false)" value="$variation">
						<xf:hiddenval name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}" />
					</xf:foreach>
				</xf:if>
			</xf:formrow>
		<xf:else />
			<xf:assetuploadrow name="{$formBaseKey}" value="{$property.property_value}" asset="{$valueOptions.asset}"
				class="{$valueOptions.class}"
				rowclass="{$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}" />
		</xf:if>

	<xf:else />

		<xf:if is="$property.has_variations">
			<xf:formrow rowtype="input"
				class="{$valueOptions.class}"
				rowclass="formRow-styleProperty {$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}">

				<xf:if is="$enableVariations">
					<ul class="listPlain inputGroup-container">
						<li>
							<div class="inputGroup inputGroup--grow">
								<xf:foreach loop="$property.getVariations()" value="$variation">
									<xf:if is="$variation != 'default'">
										<span class="inputGroup-splitter"></span>
									</xf:if>

									<xf:textbox name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}" />
								</xf:foreach>
							</div>
						</li>
					</ul>
				<xf:else />
					<xf:textbox name="{$formBaseKey}[default]" value="{{ $property.getVariationValue('default') }}" />

					<xf:foreach loop="$property.getVariations(false)" value="$variation">
						<xf:hiddenval name="{$formBaseKey}[{$variation}]" value="{{ $property.getVariationValue($variation) }}" />
					</xf:foreach>
				</xf:if>
			</xf:formrow>
		<xf:else />
			<xf:textboxrow name="{$formBaseKey}"
				value="{$property.property_value}"
				type="{$valueOptions.type}"
				class="{$valueOptions.class}"
				code="{$valueOptions.code}"
				rowclass="{$rowClass}"
				label="{$titleHtml}"
				hint="{$hintHtml}"
				explain="{$property.description}"
				dir="auto" />
		</xf:if>

	</xf:if>
</xf:macro>


<xf:macro id="property_edit_css"
	arg-property="!"
	arg-definitionEditable="!"
	arg-isActive="{{ true }}"
	arg-customizationState="!"
	arg-submitName="!">

	<xf:css src="style_properties.less" />
	<xf:css src="public:color_picker.less" />
	<xf:js src="xf/color_picker.js" min="1" />

	<xf:set var="$formBaseKey" value="{$submitName}[{$property.property_name}]" />

	<div class="cssPropertyWrapper js-property--{$property.property_name}" data-toggle-wrapper="1">
		<h3 class="block-header block-header--separated">
			<span class="collapseTrigger collapseTrigger--block {{ $isActive ? 'is-active' : '' }}"
				data-xf-click="toggle"
				data-target="< :up :next"
				data-xf-init="toggle-storage"
				data-storage-key="sp-{$property.property_name}">
				<span class="u-anchorTarget" id="sp-{$property.property_name}"></span><span>{$property.title}</span>
				<xf:if is="$property.description"><span class="block-desc">{$property.description}</span></xf:if>
			</span>

			<!-- customization_hint -->
			<xf:macro id="customization_hint"
				arg-state="{$customizationState}"
				arg-submitName="{$submitName}"
				arg-property="{$property}"
				arg-checkbox="1"/>
			<!-- /customization_hint -->
			<xf:hiddenval name="{$submitName}_listed[]" value="{$property.property_name}" />
		</h3>
		<div class="block-body block-body--collapsible {{ $isActive ? 'is-active' : '' }}">
			<div class="block-row">
				<xf:if contentcheck="true">
					<div class="cssPropertyDescription">
					<xf:contentcheck>
						<xf:if is="$definitionEditable">
							<span class="u-pullRight">
								<xf:button href="{{ link('style-properties/edit', $property) }}"
									class="button--link button--small" icon="edit" />
							</span>
						</xf:if>
						<xf:if is="$xf.development"><div class="u-muted">{$property.property_name} {$property.display_order|parens}</div></xf:if>
					</xf:contentcheck>
					</div>
				</xf:if>

				<ul class="cssProperty">
					<xf:if is="$property.isValidCssComponent('text')">
						<li>
							<h4 class="cssPropertyHeader">{{ phrase('text') }}</h4>
							<table class="cssPropertySet">
							<tr class="cssPropertySet-headerRow">
								<th>{{ phrase('size') }}</th>
								<th>{{ phrase('color') }}</th>
								<th>{{ phrase('weight') }}</th>
							</tr>
							<tr>
								<td><xf:textbox
									name="{$formBaseKey}[font-size]"
									value="{{ $property.getCssPropertyValue('font-size') }}"
									title="font-size"
									class="input--cssProp input--cssLength"
									dir="ltr" />
								</td>

								<td><div class="inputGroup inputGroup--joined inputGroup--colorSmall" data-xf-init="color-picker">
									<xf:textbox name="{$formBaseKey}[color]" value="{{ $property.getCssPropertyValue('color') }}" title="color" class="input--cssProp" dir="ltr" />
									<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
								</div></td>

								<td><xf:select name="{$formBaseKey}[font-weight]"
									value="{{ $property.getCssPropertyValue('font-weight') }}"
									title="font-weight"
									class="input--cssProp">

									<xf:option value="">&nbsp;</xf:option>
									<xf:option value="@xf-fontWeightHeavy">{{ phrase('weight_bold') }}</xf:option>
									<xf:option value="@xf-fontWeightNormal">{{ phrase('weight_normal') }}</xf:option>
									<xf:option value="@xf-fontWeightLight">{{ phrase('weight_light') }}</xf:option>
								</xf:select></td>
							</tr>
							<tr>
								<td colspan="3">
									<xf:checkbox listclass="inputChoices--cssTextOptions">
										<xf:option name="{$formBaseKey}[font-style]" value="italic"
											selected="{{ $property.getCssPropertyValue('font-style') == 'italic' }}" >
											{{ phrase('italic') }}
										</xf:option>

										<xf:option name="{$formBaseKey}[text-decoration]" value="underline"
											selected="{{ $property.getCssPropertyValue('text-decoration') == 'underline' }}">
											{{ phrase('underline') }}
										</xf:option>

										<xf:option name="{$formBaseKey}[text-decoration]" value="none"
											selected="{{ $property.getCssPropertyValue('text-decoration') == 'none' }}">
											{{ phrase('no_text_decoration') }}
										</xf:option>
									</xf:checkbox>
								</td>
							</tr>
							</table>
						</li>
					</xf:if>

					<xf:if is="$property.isValidCssComponent('background')">
						<li>
							<h4 class="cssPropertyHeader">{{ phrase('background') }}</h4>
							<table class="cssPropertySet">
							<tr class="cssPropertySet-headerRow">
								<th>{{ phrase('color') }}</th>
							</tr>
							<tr>
								<td><div class="inputGroup inputGroup--joined inputGroup--color" data-xf-init="color-picker">
									<xf:textbox name="{$formBaseKey}[background-color]" value="{{ $property.getCssPropertyValue('background-color') }}" title="background-color" class="input--cssProp" dir="ltr" />
									<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
								</div></td>
							</tr>
							<tr class="cssPropertySet-headerRow">
								<th>{{ phrase('image') }}</th>
							</tr>
							<tr>
								<td><xf:assetupload name="{$formBaseKey}[background-image]" asset="style_properties"
									value="{{ $property.getCssPropertyValue('background-image') }}"
									title="background-image"
									class="input--cssProp input--colorWidthMatched" /></td>
							</tr>
							</table>
						</li>
					</xf:if>

					<xf:if is="$property.isValidCssComponent('border') OR $property.isValidCssComponent('border_radius')">
						<li>
							<table class="cssPropertySet">
							<tr class="cssPropertySet-headerRow cssPropertySet-headerRow--separated">
								<th class="cssPropertySet-headerSetLabel">{{ phrase('border') }}</th>
								<xf:if is="$property.isValidCssComponent('border')">
									<th>{{ phrase('width') }}</th>
									<th>{{ phrase('color') }}</th>
								</xf:if>
								<xf:if is="$property.isValidCssComponent('border_radius')">
									<th>{{ phrase('radius') }}</th>
								</xf:if>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('all') }}</td>

								<xf:if is="$property.isValidCssComponent('border')">
									<td><xf:textbox name="{$formBaseKey}[border-width]"
										value="{{ $property.getCssPropertyValue('border-width') }}"
										title="border-width"
										class="input--cssProp input--cssLength" dir="ltr" /></td>

									<td><div class="inputGroup inputGroup--joined inputGroup--colorSmall" data-xf-init="color-picker">
										<xf:textbox name="{$formBaseKey}[border-color]" value="{{ $property.getCssPropertyValue('border-color') }}" title="border-color" class="input--cssProp" dir="ltr" />
										<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
									</div></td>
								</xf:if>

								<xf:if is="$property.isValidCssComponent('border_radius')">
									<td><xf:textbox name="{$formBaseKey}[border-radius]"
										value="{{ $property.getCssPropertyValue('border-radius') }}"
										title="border-radius"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>
								</xf:if>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('top') }}</td>

								<xf:if is="$property.isValidCssComponent('border')">
									<td><xf:textbox name="{$formBaseKey}[border-top-width]"
										value="{{ $property.getCssPropertyValue('border-top-width') }}"
										title="border-top-width"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>

									<td><div class="inputGroup inputGroup--joined inputGroup--colorSmall" data-xf-init="color-picker">
										<xf:textbox name="{$formBaseKey}[border-top-color]"	value="{{ $property.getCssPropertyValue('border-top-color') }}" title="border-top-color" class="input--cssProp" dir="ltr" />
										<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
									</div></td>
								</xf:if>

								<xf:if is="$property.isValidCssComponent('border_radius')">
									<td><xf:textbox name="{$formBaseKey}[border-top-left-radius]"
										value="{{ $property.getCssPropertyValue('border-top-left-radius') }}"
										title="border-top-left-radius"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>
								</xf:if>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('right') }}</td>

								<xf:if is="$property.isValidCssComponent('border')">
									<td><xf:textbox name="{$formBaseKey}[border-right-width]"
										value="{{ $property.getCssPropertyValue('border-right-width') }}"
										title="border-right-width"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>

									<td><div class="inputGroup inputGroup--joined inputGroup--colorSmall" data-xf-init="color-picker">
										<xf:textbox name="{$formBaseKey}[border-right-color]" value="{{ $property.getCssPropertyValue('border-right-color') }}" title="border-right-color" class="input--cssProp" dir="ltr" />
										<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
									</div></td>
								</xf:if>

								<xf:if is="$property.isValidCssComponent('border_radius')">
									<td><xf:textbox name="{$formBaseKey}[border-top-right-radius]"
										value="{{ $property.getCssPropertyValue('border-top-right-radius') }}"
										title="border-top-right-radius"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>
								</xf:if>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('bottom') }}</td>

								<xf:if is="$property.isValidCssComponent('border')">
									<td><xf:textbox name="{$formBaseKey}[border-bottom-width]"
										value="{{ $property.getCssPropertyValue('border-bottom-width') }}"
										title="border-bottom-width"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>

									<td><div class="inputGroup inputGroup--joined inputGroup--colorSmall" data-xf-init="color-picker">
										<xf:textbox name="{$formBaseKey}[border-bottom-color]"
											value="{{ $property.getCssPropertyValue('border-bottom-color') }}"
											title="border-bottom-color"
											class="input--cssProp"
											dir="ltr" />
										<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
									</div></td>
								</xf:if>

								<xf:if is="$property.isValidCssComponent('border_radius')">
									<td><xf:textbox name="{$formBaseKey}[border-bottom-right-radius]"
										value="{{ $property.getCssPropertyValue('border-bottom-right-radius') }}"
										title="border-bottom-right-radius"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>
								</xf:if>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('left') }}</td>

								<xf:if is="$property.isValidCssComponent('border')">
									<td><xf:textbox name="{$formBaseKey}[border-left-width]"
										value="{{ $property.getCssPropertyValue('border-left-width') }}"
										title="border-left-width"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>

									<td><div class="inputGroup inputGroup--joined inputGroup--colorSmall" data-xf-init="color-picker">
										<xf:textbox name="{$formBaseKey}[border-left-color]"
											value="{{ $property.getCssPropertyValue('border-left-color') }}"
											title="border-left-color"
											class="input--cssProp"
											dir="ltr" />
										<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
									</div></td>
								</xf:if>

								<xf:if is="$property.isValidCssComponent('border_radius')">
									<td><xf:textbox name="{$formBaseKey}[border-bottom-left-radius]"
										value="{{ $property.getCssPropertyValue('border-bottom-left-radius') }}"
										title="border-bottom-left-radius"
										class="input--cssProp input--cssLength"
										dir="ltr" />
									</td>
								</xf:if>
							</tr>
							</table>
						</li>
					<xf:elseif is="$property.isValidCssComponent(['border_color_simple', 'border_width_simple', 'border_radius_simple'])" />
						<li>
							<h4 class="cssPropertyHeader">{{ phrase('border') }}</h4>
							<table class="cssPropertySet">
							<xf:if is="$property.isValidCssComponent('border_width_simple')">
								<tr class="cssPropertySet-headerRow">
									<th>{{ phrase('width') }}</th>
								</tr>
								<tr>
									<td><xf:textbox name="{$formBaseKey}[border-width]"
										value="{{ $property.getCssPropertyValue('border-width') }}"
										title="border-width"
										class="input--cssProp input--colorWidthMatched"
										dir="ltr" /></td>
								</tr>
							</xf:if>

							<xf:if is="$property.isValidCssComponent('border_color_simple')">
								<tr class="cssPropertySet-headerRow">
									<th>{{ phrase('color') }}</th>
								</tr>
								<tr>
									<td><div class="inputGroup inputGroup--joined inputGroup--color" data-xf-init="color-picker">
										<xf:textbox name="{$formBaseKey}[border-color]" value="{{ $property.getCssPropertyValue('border-color') }}" title="border-color" class="input--cssProp" dir="ltr" />
										<div class="inputGroup-text"><span class="colorPickerBox js-colorPickerTrigger"></span></div>
									</div></td>
								</tr>
							</xf:if>

							<xf:if is="$property.isValidCssComponent('border_radius_simple')">
								<tr class="cssPropertySet-headerRow">
									<th>{{ phrase('radius') }}</th>
								</tr>
								<tr>
									<td><xf:textbox name="{$formBaseKey}[border-radius]"
										value="{{ $property.getCssPropertyValue('border-radius') }}"
										title="border-radius"
										class="input--cssProp input--colorWidthMatched"
										dir="ltr" /></td>
								</tr>
							</xf:if>
							</table>
						</li>
					</xf:if>

					<xf:if is="$property.isValidCssComponent('padding')">
						<li>
							<h4 class="cssPropertyHeader">{{ phrase('padding') }}</h4>
							<table class="cssPropertySet">
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('all') }}</td>

								<td><xf:textbox name="{$formBaseKey}[padding]"
									value="{{ $property.getCssPropertyValue('padding') }}"
									title="padding"
									class="input--cssProp input--cssLength"
									dir="ltr" />
								</td>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('top') }}</td>

								<td><xf:textbox name="{$formBaseKey}[padding-top]"
									value="{{ $property.getCssPropertyValue('padding-top') }}"
									title="padding-top"
									class="input--cssProp input--cssLength"
									dir="ltr" />
								</td>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('right') }}</td>

								<td><xf:textbox name="{$formBaseKey}[padding-right]"
									value="{{ $property.getCssPropertyValue('padding-right') }}"
									title="padding-right"
									class="input--cssProp input--cssLength"
									dir="ltr" />
								</td>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('bottom') }}</td>

								<td><xf:textbox name="{$formBaseKey}[padding-bottom]"
									value="{{ $property.getCssPropertyValue('padding-bottom') }}"
									title="padding-bottom"
									class="input--cssProp input--cssLength"
									dir="ltr" />
								</td>
							</tr>
							<tr>
								<td class="cssPropertySet-rowLabel">{{ phrase('left') }}</td>

								<td><xf:textbox name="{$formBaseKey}[padding-left]"
									value="{{ $property.getCssPropertyValue('padding-left') }}"
									title="padding-left"
									class="input--cssProp input--cssLength"
									dir="ltr" />
								</td>
							</tr>
							</table>
						</li>
					</xf:if>

					<xf:if is="$property.isValidCssComponent('extra')">
						<li class="cssPropertyExtra">
							<h4 class="cssPropertyHeader">{{ phrase('extra') }}</h4>
							<table class="cssPropertySet">
								<tr class="cssPropertySet-headerRow">
									<th>{{ phrase('freeform_css_code') }}</th>
								</tr>
								<tr>
									<!--<td><xf:codeeditor name="{$formBaseKey}[extra]" value="{{ $property.getCssPropertyValue('extra') }}"
										mode="less"
										class="codeEditor&#45;&#45;autoSize"
										label="{{ phrase('extra') }}" /></td>-->
									<td><xf:textarea name="{$formBaseKey}[extra]" value="{{ $property.getCssPropertyValue('extra') }}"
										label="{{ phrase('extra') }}" /></td>
								</tr>
							</table>
						</li>
					</xf:if>
				</ul>
			</div>
		</div>
	</div>
</xf:macro>





<xf:macro id="customization_hint"
	arg-state="!"
	arg-submitName="!"
	arg-property="!"
	arg-checkbox="{{ false }}">

	<!-- customization_hint {$property.property_name} -->
	<span class="formRow-hint--customState cssCustomHighlight cssCustomHighlight--{$state}">

		<span class="hint hint--custom"
			data-xf-init="tooltip" title="{{ phrase('property_customized_in_this_style')|for_attr }}">
			<xf:if is="$checkbox">
				<xf:macro id="revert_code"
					arg-submitName="{$submitName}"
					arg-property="{$property}"
					arg-label="{{ phrase('revert_customized_value') }}"
					arg-Xcontainer="dl.xf-{$property.property_name} > dd"
					arg-container=".js-property--{$property.property_name}"
				/>
			<xf:else />
				{{ phrase('value_customized') }}
			</xf:if>
		</span>

		<span class="hint hint--inherited"
			data-xf-init="tooltip" title="{{ phrase('property_customized_in_parent_style')|for_attr }}">{{ phrase('value_inherited') }}</span>

		<span class="hint hint--added"
			data-xf-init="tooltip" title="{{ phrase('property_created_in_this_style')|for_attr }}">{{ phrase('custom_property') }}</span>

	</span>
	<!-- / customization_hint {$property.property_name} -->
</xf:macro>

<xf:macro id="revert_code"
	arg-submitName="!"
	arg-property="!"
	arg-label="!"
	arg-container="< dl">

	<xf:checkbox standalone="true">
		<xf:option name="{$submitName}_revert[]" value="{$property.property_name}"
			labelclass="formRow-revert"
			class="js-disablerExemption"
			data-xf-init="disabler" data-container="{$container}" data-invert="true"
			label="{$label}" />
	</xf:checkbox>
</xf:macro>

<xf:macro id="variation_labels"
	arg-property="!">

	<div class="inputGroup">
		<xf:foreach loop="$property.getVariations()" value="$variation">
			<xf:if is="$variation != 'default'">
				<span class="inputGroup-splitter"></span>
			</xf:if>

			<span class="inputGroup-label">{{ phrase_dynamic('style_variation.' . $variation) }}</span>
		</xf:foreach>
	</div>
</xf:macro>