@import '~@2600hz/sds-core/sds-tools';

// Tokens
*{
	--sds_radio_background: var(
		--sds_theme_control_background,
		#{sds-color(white)}
	);
	--sds_radio_border_color: var(
		--sds_theme_control_border,
		#{sds-color(grey, 30)}
	);
	--sds_radio_border_radius: 50%;
	--sds_radio_border_style: solid;
	--sds_radio_border_width: 1px;
	--sds_radio_text: var(--sds_theme_control_text, #{sds-color(grey, 100)});

	--sds_radio_hover_background: var(
		--sds_theme_control_hover_background,
		#{sds-color(white)}
	);
	--sds_radio_hover_border_color: var(
		--sds_theme_control_hover_border,
		#{sds-color(grey)}
	);
	--sds_radio_hover_border_width: 1px;

	--sds_radio_focus_background: var(
		--sds_theme_control_hover_background,
		#{sds-color(white)}
	);
	--sds_radio_focus_border_color: var(
		--sds_theme_control_hover_border,
		#{sds-color(grey)}
	);
	--sds_radio_focus_border_width: 1px;
	--sds_radio_focus_shadow: var(
		--sds_theme_focus_shadow,
		0 0 0 2px #{sds-color(grey, 05)},
		0 0 0 4px #{sds-color(blue)}
	);

	--sds_radio_checked_background: var(
		--sds_theme_color_primary,
		#{sds-color(blue)}
	);
	--sds_radio_checked_border_color: var(
		--sds_theme_color_primary_interactive,
		#{sds-color(blue, 60)}
	);
	--sds_radio_checked_border_width: 1px;

	--sds_radio_error_background: var(
		--sds_theme_control_error_background,
		#{sds-color(red, 05)}
	);
	--sds_radio_error_border_color: var(
		--sds_theme_control_error_border,
		#{sds-color(red)}
	);
	--sds_radio_error_border_width: 1px;
	--sds_radio_error_text: var(
		--sds_theme_control_error_text,
		#{sds-color(red, 60)}
	);

	--sds_radio_disabled_background: var(
		--sds_theme_control_disabled_background,
		#{sds-color(white)}
	);
	--sds_radio_disabled_border_color: var(
		--sds_theme_control_disabled_border,
		#{sds-color(grey, 30)}
	);
	--sds_radio_disabled_border_width: 1px;
	--sds_radio_disabled_opacity: var(--sds_theme_disabled_opacity, 48%);
	--sds_radio_disabled_text: var(
		--sds_theme_control_disabled_text,
		#{sds-color(grey, 100)}
	);
}

// Component
.sds_RadioRaw_Input{
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	pointer-events: none;
	&:focus.sds_RadioRaw_Input + .sds_RadioRaw{
		background: var(--sds_radio_focus_background);
		border: var(--sds_radio_border_width) var(--sds_radio_border_style) var(--sds_radio_focus_border_color);
		box-shadow: var(--sds_radio_focus_shadow);
	}
	&:focus.sds_RadioRaw_Input + .sds_RadioRaw_Error{
		background: var(--sds_radio_error_background);
		border: var(--sds_radio_focus_border_width) var(--sds_radio_border_style) var(--sds_radio_error_border_color);
		box-shadow: var(--sds_radio_focus_shadow), inset 0 0 0 calc(var(--sds_radio_error_border_width) - 1px) var(--sds_radio_error_border_color);
	}
	&:checked.sds_RadioRaw_Input + .sds_RadioRaw{
		background: var(--sds_radio_checked_background);
		border: var(--sds_radio_border_width) var(--sds_radio_border_style) var(--sds_radio_checked_border_color);
		&::after{
		opacity: 1;
		}
	}
	&:checked.sds_RadioRaw_Input + .sds_RadioRaw.sds_RadioRaw_Indeterminate{
		&::after{
		border-left: none;
		transform: rotate(0);
		}
	}
	&:checked.sds_RadioRaw_Input + .sds_RadioRaw_Error{
		background: var(--sds_radio_checked_background);
		border: calc(var(--sds_radio_error_border_width) - 1px) var(--sds_radio_border_style) var(--sds_radio_checked_border_color);
		box-shadow: none;
	}
	&:checked:focus.sds_RadioRaw_Input + .sds_RadioRaw_Error{
		box-shadow: var(--sds_radio_focus_shadow);
	}
}

.sds_RadioRaw {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	background: var(--sds_radio_background);
	border-radius: var(--sds_radio_border_radius);
	border: var(--sds_radio_border_width) var(--sds_radio_border_style) var(--sds_radio_border_color);
	cursor: pointer;
	transition: sds-transition(standard, interactive);
	&:hover{
		background: var(--sds_radio_hover_background);
		border: var(--sds_radio_hover_border_width) var(--sds_radio_border_style) var(--sds_radio_hover_border_color);
	}
	&::after{
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: sds-color(white);
		opacity: 0;
	}
}

.sds_RadioRaw_Error {
	background: var(--sds_radio_error_background);
	border: calc(var(--sds_radio_error_border_width) - 1px) var(--sds_radio_border_style) var(--sds_radio_error_border_color);
	box-shadow: inset 0 0 0 calc(var(--sds_radio_error_border_width) - 1px) var(--sds_radio_error_border_color);
	&:hover{
		background: var(--sds_radio_error_background);
		border: calc(var(--sds_radio_error_border_width) - 1px) var(--sds_radio_border_style) var(--sds_radio_error_border_color);
	}
}

.sds_RadioRaw_Disabled{
	opacity: var(--sds_radio_disabled_opacity);
	cursor: not-allowed;
}
