@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-CheckboxLabeled {
	align-items: flex-start;
	color: @color-darkGray;
	cursor: pointer;
	display: flex;
	font-size: @fontSize;
		justify-content: flex-start;
	width: fit-content;

	> .@{prefix}-Checkbox {
		flex: 0 0 @Checkbox-size;
		margin-right: @size-XXS;
	}

	&-label {
		padding-top: @size-XXS;
	}

	&&-is-disabled {
		cursor: not-allowed;
	}

	&:hover .@{prefix}-Checkbox-visualization-container {
		border: @color-primary solid @size-borderWidthFocused;
		transition: @Checkbox-animation-timing;
	}

	&-is-selected:hover .@{prefix}-Checkbox-visualization-container,
	&-is-selected:hover .@{prefix}-CheckboxLabeled-Checkbox,
	&:hover .@{prefix}-Checkbox-visualization-glow,
	&-is-selected:hover .@{prefix}-CheckboxLabeled-Checkbox {
		.opacity(0.8);
	}

	&&-is-disabled .@{prefix}-Checkbox-visualization-container,
	&&-is-disabled:hover .@{prefix}-Checkbox-visualization-container {
		background-color: @Checkbox-disabled-backgroundColor;
		border-color: @Checkbox-disabled-borderColor;
	}

	&&-is-disabled:hover .@{prefix}-Checkbox-visualization-glow {
		.opacity(0);
		transform: none;
	}

	&&-is-disabled&&-is-selected:hover .@{prefix}-Checkbox-visualization-container {
		.opacity(0.5);
		background-color: @color-primary;
	}

	&&-is-selected .@{prefix}-Checkbox-visualization-container {
		border-color: @color-primary;
		background-color: @color-primary;
	}
}