/* FormCheckbox.css */

.moon-item.moon-formcheckbox-item {
	padding: 0 0 0 @moon-spotlight-outset;
	margin-bottom: @moon-spotlight-outset;

	.moon-checkbox-item-label-wrapper {
		padding: 3px @moon-spotlight-outset;
		margin-left: @moon-checkbox-width + @moon-spotlight-outset;
	}

	&,
	&.spotlight {
		background-color: transparent;
	}

	.moon-checkbox {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		left: @moon-spotlight-outset;
		width: (@moon-checkbox-width + @moon-spotlight-outset);
		height: (@moon-checkbox-width + @moon-spotlight-outset);
		border-radius: @moon-button-border-radius;
		background-color: @moon-form-checkbox-bg-color;
		line-height: (@moon-checkbox-width + @moon-spotlight-outset);
		text-align: center;

		.moon-icon {
			padding-bottom: 3px;
		}
	}

	&.spotlight {
		.moon-checkbox {
			background-color: @moon-spotlight-color;
		}
		.moon-checkbox-item-label-wrapper {
			color: @moon-sub-header-text-color;

			.moon-neutral & {
				color: @moon-neutral-text-color;
			}
		}
	}

	.enyo-locale-right-to-left & {
		padding: 0 @moon-spotlight-outset 0 0;

		.moon-checkbox-item-label-wrapper {
			margin-left: auto;
			margin-right: (@moon-checkbox-width + 2*@moon-spotlight-outset);
		}
		.moon-checkbox {
			right: @moon-spotlight-outset;
		}
	}
}