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

@RadioButton-size: 22px;
@RadioButton-animation-timing: 0.1s linear;

@RadioButton-container-offset: @size-XXS;
@RadioButton-container-radius: 8px;

@RadioButton-dot-offset: 8px;
@RadioButton-dot-radius: @size-XXS;

@RadioButton-glow-offset: @size-XXS;
@RadioButton-glow-radius: 8px;
@RadioButton-glow-scale: scale(1.375);

.lucid-RadioButton {
	cursor: pointer;
	display: inline-block;
	height: @RadioButton-size;
	position: relative;
	user-select: none;
	width: @RadioButton-size;

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

	&-native {
		.opacity(0);
	}

	&-visualization-container {
		.box-sizing();

		background-color: white;
		border-radius: @RadioButton-container-radius + 1;
		border: solid 1px rgba(0, 0, 0, 0.3);
		height: @RadioButton-container-radius * 2;
		left: @RadioButton-container-offset;
		position: absolute;
		top: @RadioButton-container-offset;
		width: @RadioButton-container-radius * 2;
	}

	&-visualization-dot {
		.box-sizing();
		.opacity(0);

		background-color: white;
		border-radius: @RadioButton-dot-radius;
		height: @RadioButton-dot-radius * 2;
		left: @RadioButton-dot-offset;
		position: absolute;
		top: @RadioButton-dot-offset;
		transition: @RadioButton-animation-timing;
		width: @RadioButton-dot-radius * 2;
	}

	&-visualization-glow {
		.box-sizing();
		.opacity(0);

		background-color: @color-primary;
		border-radius: @RadioButton-glow-radius;
		height: @RadioButton-glow-radius * 2;
		left: @RadioButton-glow-offset;
		position: absolute;
		top: @RadioButton-glow-offset;
		transition: @RadioButton-animation-timing;
		width: @RadioButton-glow-radius * 2;
	}

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

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

		transform: @RadioButton-glow-scale;
	}

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

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

		transform: none;
	}

	&-is-disabled&-is-selected &-visualization-container {
		.opacity();
	}

	&-is-disabled&-is-selected:hover &-visualization-container,
	&-is-selected &-visualization-container,
	&:active &-visualization-container {
		background-color: @color-primary;
		border-color: @color-primary;
	}

	&-is-selected &-visualization-dot {
		.opacity(1);
	}

	&-native:focus ~ &-visualization-glow {
		.opacity();

		transform: @RadioButton-glow-scale;
	}
}