@import "ansyn/less/common";

:host {
	margin-left: 5px;
	display: flex;
	padding: 4px 0;

	&.disabled {
		opacity: 0.5;
	}

	label {
		user-select: none;
	}

	input + label {
		border: 1px solid #C9C9C9;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);
		padding: 5px;
		border-radius: 1px;
		display: inline-block;
		position: relative;
	}

	input:disabled + label {
		opacity: .5;
	}

	input:hover:not(:disabled) + label:hover {
		border: 1px solid #FFFFFF;
	}

	input + label:active {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	input:checked + label {
		background-color: #FFFFFF;
		border: 1px solid #FFFFFF;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
		color: #FFFFFF;

		&:after {
			content: '\2714';
			font-size: 8px;
			position: absolute;
			top: -1px;
			right: 2px;
			color: @background-color-3;
		}
	}

	div.ansyn-checkbox-text {
		color: white;
		margin-right: 5px;
		overflow: hidden;

		label {
			text-overflow: ellipsis;
			overflow: hidden;
			display: inline-block;
			max-width: 100%;
		}
	}
}
