@import "./InvisibleTextStyles.css";
@import "./FormComponents.css";

:host(:not([hidden])) {
	display: inline-block;
}

:host {
	min-width: var(--_ui5_radio_button_min_width);
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	color: var(--_ui5_radio_button_color);
	border-radius: var(--_ui5_radio_button_border_radius);
}

:host(:not([disabled])) .ui5-radio-root {
	cursor: pointer;
}

/* checked */
:host([checked]) {
	color: var(--_ui5_radio_button_checked_fill);
}

:host([checked]) .ui5-radio-svg-inner {
	fill: var(--_ui5_radio_button_inner_ring_color);
}

:host([checked]) .ui5-radio-svg-outer {
	stroke: var(--_ui5_radio_button_outer_ring_color);
}

/* disabled */
:host([disabled]) .ui5-radio-root {
	color: var(--_ui5_radio_button_color);
	opacity: var(--sapContent_DisabledOpacity);
}

:host([disabled][checked]) .ui5-radio-svg-outer {
	stroke: var(--_ui5_radio_button_color);
}

/* focused */
:host(:not([disabled])[desktop]) .ui5-radio-root:focus::before,
:host(:not([disabled])) .ui5-radio-root:focus-visible::before {
	content: "";
	display: var(--_ui5_radio_button_focus_outline);
	position: absolute;
	inset: var(--_ui5_radio_button_focus_dist);
	pointer-events: none;
	border: var(--_ui5_radio_button_border_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	border-radius: var(--_ui5_radio_button_border_radius);
}

/* hovered and value-state */
:host(:not([value-state="Negative"]):not([value-state="Critical"]):not([value-state="Positive"]):not([value-state="Information"])) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	stroke: var(--_ui5_radio_button_outer_ring_hover_color);
}

:host(:not([value-state="Negative"]):not([value-state="Critical"]):not([value-state="Positive"]):not([value-state="Information"])[checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
}

.ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer,
:host([checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	fill: var(--_ui5_radio_button_hover_fill);
}

/* active, checked */
:host([active][checked]:not([value-state]):not([disabled]):not([readonly])) .ui5-radio-svg-outer {
	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
}

/* active, not checked */
:host([active]:not([checked]):not([value-state]):not([disabled]):not([readonly])) .ui5-radio-svg-outer {
	stroke: var(--_ui5_radio_button_outer_ring_active_color);
}

/* with label */
:host([text]) .ui5-radio-root {
	padding-inline-end: var(--_ui5_radio_button_border_width);
}

:host([text][desktop]) .ui5-radio-root:focus::before,
:host([text]) .ui5-radio-root:focus-visible::before {
	inset-inline-end: 0px;
}

:host([text]) .ui5-radio-inner {
	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
}

/* readonly */
:host([checked][readonly]) .ui5-radio-svg-inner {
	fill: var(--_ui5_radio_button_read_only_inner_ring_color);
}

:host([readonly]) .ui5-radio-root .ui5-radio-svg-outer {
	fill: var(--sapField_ReadOnly_Background);
	stroke: var(--sapField_ReadOnly_BorderColor);
	stroke-dasharray: var(--_ui5_radio_button_read_only_border_type);
	stroke-width: var(--_ui5_radio_button_read_only_border_width);
}

/* value states */
:host([value-state="Negative"]) .ui5-radio-svg-outer,
:host([value-state="Critical"]) .ui5-radio-svg-outer {
	stroke-width: var(--sapField_InvalidBorderWidth);
}

:host([value-state="Information"]) .ui5-radio-svg-outer {
	stroke-width: var(--_ui5_radio_button_information_border_width);
}

/* Error state */
:host([value-state="Negative"][checked]) .ui5-radio-svg-inner {
	fill: var(--_ui5_radio_button_checked_error_fill);
}
:host([value-state="Negative"]) .ui5-radio-svg-outer,
:host([value-state="Negative"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
	stroke: var(--sapField_InvalidColor);
	fill: var(--sapField_InvalidBackground);
}

:host([value-state="Negative"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	fill: var(--_ui5_radio_button_hover_fill_error);
}

/* Warning state */
:host([value-state="Critical"][checked]) .ui5-radio-svg-inner {
	fill: var(--_ui5_radio_button_checked_warning_fill);
}
:host([value-state="Critical"]) .ui5-radio-svg-outer,
:host([value-state="Critical"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
	stroke: var(--sapField_WarningColor);
	fill: var(--sapField_WarningBackground);
}

:host([value-state="Critical"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	fill: var(--_ui5_radio_button_hover_fill_warning);
}

/* Success state */
:host([value-state="Positive"][checked]) .ui5-radio-svg-inner {
	fill: var(--_ui5_radio_button_checked_success_fill);
}
:host([value-state="Positive"]) .ui5-radio-svg-outer,
:host([value-state="Positive"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
	stroke: var(--sapField_SuccessColor);
	fill: var(--sapField_SuccessBackground);
}

:host([value-state="Positive"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	fill: var(--_ui5_radio_button_hover_fill_success);
}

/* Information state */
:host([value-state="Information"][checked]) .ui5-radio-svg-inner {
	fill: var(--_ui5_radio_button_checked_information_fill);
}
:host([value-state="Information"]) .ui5-radio-svg-outer,
:host([value-state="Information"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
	stroke: var(--sapField_InformationColor);
	fill: var(--sapField_InformationBackground);
}

:host([value-state="Information"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable .ui5-radio-svg-outer {
	fill: var(--_ui5_radio_button_hover_fill_information);
}

:host([value-state="Negative"]) .ui5-radio-root,
:host([value-state="Critical"]) .ui5-radio-root,
:host([value-state="Information"]) .ui5-radio-root {
	stroke-dasharray: var(--_ui5_radio_button_warning_error_border_dash);
}

.ui5-radio-root {
	height: auto;
	position: relative;
	display: inline-flex;
	flex-wrap: nowrap;
	outline: none;
	max-width: 100%;
	box-sizing: border-box;
	border: var(--_ui5_radio_button_border);
	border-radius: var(--_ui5_radio_button_border_radius);
}

/* Inner */
.ui5-radio-inner {
	display: flex;
	align-items: center;
	padding: var(--_ui5_radio_button_outer_ring_padding);
	flex-shrink: 0;
	height: var(--_ui5_radio_button_inner_size);
	font-size: 1rem; /* override font size of the message dialog */
	pointer-events: none;
	vertical-align: top;
}

.ui5-radio-inner {
	outline: none;
}

.ui5-radio-inner input {
	-webkit-appearance: none;
	visibility: hidden;
	width: 0;
	left: 0;
	position: absolute;
	font-size: inherit;
	margin: 0; /* FF puts margin */
}

/* Label */
[ui5-label].ui5-radio-label {
	display: flex;
	align-items: center;
	padding-inline-end: var(--_ui5_radio_button_label_offset);
	padding-block: var(--_ui5_radio_button_label_side_padding);
	vertical-align: top;
	max-width: 100%;
	pointer-events: none;
	color: var(--_ui5_radio_button_label_color);
	overflow-wrap: break-word;
}

:host([wrapping-type="None"][text]) .ui5-radio-root {
	height: var(--_ui5_radio_button_height);
}

:host([wrapping-type="None"][text]) [ui5-label].ui5-radio-label {
	text-overflow: ellipsis;
	overflow: hidden;
}

/* SVG */
.ui5-radio-svg {
	height: var(--_ui5_radio_button_svg_size);
	width: var(--_ui5_radio_button_svg_size);
	overflow: visible;
	pointer-events: none;
}

.ui5-radio-svg-outer {
	fill: var(--_ui5_radio_button_outer_ring_bg);
	stroke: currentColor;
	stroke-width: var(--_ui5_radio_button_outer_ring_width);
}

.ui5-radio-svg-inner {
	fill: none;
	r: var(--_ui5_radio_button_inner_ring_radius);
}

.ui5-radio-svg-outer,
.ui5-radio-svg-inner {
	flex-shrink: 0;
}

/* ListItem Context */
:host(.ui5-li-singlesel-radiobtn) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg-outer {
	fill: var(--sapList_Background);
}