.radio {
	display: flex;
    flex-direction: row;
	position: relative;
	padding-left: calc(var(--unit-8) - (var(--unit-1) / 2));
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	user-select: none;
	color: var(--text-default);
	align-items: center;
}
.radio .label {
	cursor: pointer;
    display: flex;
    flex-direction: column;
}
.radio .label .helper {
	margin-top: var(--unit-0);
}
.radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: var(--unit-0);
	width: var(--unit-0);
}
.radio .mark {
	position: absolute;
	left: var(--unit-0);
	height: calc(var(--unit-6) - var(--unit-1));
	width: calc(var(--unit-6) - var(--unit-1));
	border: calc(var(--unit-1) / 2) solid var(--border-default);
	background: var(--action-default);
	border-radius: var(--rounded-full);
	display: flex;
	justify-content: center;
    align-items: center;
	cursor: pointer;
}
.radio input:focus ~ .mark {
	box-shadow: var(--shadow-white), var(--shadow-blue-50);
}
.radio:hover input ~ .mark {
	background: var(--surface-default);
	border: calc(var(--unit-1) / 2) solid var(--action-default);
}
.radio input:checked ~ .mark {
	background: var(--action-default);
	border: calc(var(--unit-1) / 2) solid var(--action-default);
}
.radio:hover input:checked ~ .mark {
	background: var(--action-hovered);
	border: calc(var(--unit-1) / 2) solid var(--action-hovered);
}
.radio .mark:after {
	content: "";
	position: absolute;
	width: var(--unit-5);
	height: var(--unit-5);
	background: var(--white);
	position: relative;
	border-radius: var(--rounded-full);
}
.radio input:checked ~ .mark:after {
	width: var(--unit-3);
	height: var(--unit-3);
}
.radio.right {
	padding-left: var(--unit-0);
	padding-right: var(--unit-8);
}
.radio.right .mark {
	left: unset;
	right: var(--unit-0);
}
.radio input:disabled ~ .mark {
	background: var(--bg-default);
	border: calc(var(--unit-1) / 2) solid var(--action-disabled);
}
.radio input:disabled:checked ~ .mark {
	background: var(--action-disabled);
	border: calc(var(--unit-1) / 2) solid var(--action-disabled);
}
.radio input:disabled:checked ~ .mark:after {
	border-color: var(--bg-default);
}