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

.lucid-RadioButtonLabeled {
	align-items: flex-start;
	color: @color-darkGray;
	cursor: pointer;
	display: flex;
	font-size: @fontSize;
	font-family: @fontFamily;
	justify-content: flex-start;

	> .lucid-RadioButton {
		flex: 0 0 @RadioButton-size;
		margin-right: @size-XXS;
	}

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

	&&-is-disabled {
		color: @color-mediumGray;
		cursor: not-allowed;
	}

	&:hover .lucid-RadioButton-visualization-container {
		border-color: @color-primary;
		transition: @RadioButton-animation-timing;
	}

	&:hover .lucid-RadioButton-visualization-glow {
		.opacity();

		transform: @RadioButton-glow-scale;
	}

	&&-is-disabled .lucid-RadioButton-visualization-container,
	&&-is-disabled:hover .lucid-RadioButton-visualization-container {
		background-color: rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.1);
	}

	&&-is-disabled:hover .lucid-RadioButton-visualization-glow {
		.opacity(0);

		transform: none;
	}

	&&-is-disabled&&-is-selected:hover > .lucid-RadioButton .lucid-RadioButton-visualization-container,
	&&-is-selected > .lucid-RadioButton .lucid-RadioButton-visualization-container {
		background-color: @color-primary;
		border-color: @color-primary;
	}
}