1 files changed, 18 insertions, 4 deletions

diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index 0f31d8fa0a..f0b8c71376 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -1,5 +1,6 @@
 <template>
 <div
+	v-panel
 	class="novjtctn"
 	:class="{ disabled, checked }"
 	:aria-checked="checked"
@@ -50,9 +51,10 @@ export default defineComponent({
 .novjtctn {
 	position: relative;
 	display: inline-block;
-	margin: 8px 20px 0 0;
 	text-align: left;
 	cursor: pointer;
+	padding: 11px 14px;
+	border-radius: 6px;
 	transition: all 0.3s;
 
 	> * {
@@ -68,6 +70,14 @@ export default defineComponent({
 	}
 
 	&.checked {
+		background: var(--accentedBg) !important;
+		border-color: var(--accent);
+		color: var(--accent);
+
+		&, * {
+			cursor: default !important;
+		}
+
 		> .button {
 			border-color: var(--accent);
 
@@ -79,6 +89,11 @@ export default defineComponent({
 		}
 	}
 
+	&:hover {
+		border-color: var(--inputBorderHover);
+		color: var(--accent);
+	}
+
 	> input {
 		position: absolute;
 		width: 0;
@@ -89,8 +104,8 @@ export default defineComponent({
 
 	> .button {
 		position: absolute;
-		width: 20px;
-		height: 20px;
+		width: 14px;
+		height: 14px;
 		background: none;
 		border: solid 2px var(--inputBorder);
 		border-radius: 100%;
@@ -114,7 +129,6 @@ export default defineComponent({
 	> .label {
 		margin-left: 28px;
 		display: block;
-		font-size: 16px;
 		line-height: 20px;
 		cursor: pointer;
 	}