.radioGroup {
	display: flex;
	flex-direction: column;
	gap: var(--component-spacing-sm);
}

.radioItem {
	display: flex;
	align-items: flex-start;
	gap: var(--component-spacing-sm);
	cursor: pointer;
	background-color: transparent;
	text-align: left;
	border: none;
	color: var(--color-neutral-canvas-default-fg-default);
	padding-inline-start: 0;
	padding-inline-end: 0;
	font: var(--font-label-sm);
}

.radioItemBefore {
	width: var(--size-100);
	height: var(--size-100);
	border-radius: var(--component-radii-pill);
	display: grid;
	place-items: center;
	border: var(--component-border-width-md) solid var(--stroke-default);
	padding: var(--component-border-width-lg);
}

.radioItemBefore:hover {
		border-color: var(--stroke-strong);
		background-color: var(--color-neutral-surface-ghost-active-bg);
	}

.radioItemBefore .radioIndicator {
		width: var(--size-50);
		height: var(--size-50);
		border-radius: var(--component-radii-pill);
		background-color: var(--color-accent-surface-default-idle-bg);
		border: none;
	}

.radioItemBefore[data-state='checked'] .radioIndicator {
	background-color: var(--color-accent-surface-default-idle-bg);
}

.radioItemBefore[data-state='unchecked'] {
	background-color: transparent;
}

.radioItemTitle {
	display: flex;
	flex-direction: column;
	gap: var(--component-spacing-xs);
	align-items: flex-start;
	font: var(--font-label-sm);
}

.radioItemDescription {
	color: var(--color-neutral-canvas-default-fg-subtle);
	font: var(--font-body-xs-default);
}