diff --git a/src/components/calcite-radio/calcite-radio.scss b/src/components/calcite-radio/calcite-radio.scss
index fd66d8d1dda..50edb130e61 100644
--- a/src/components/calcite-radio/calcite-radio.scss
+++ b/src/components/calcite-radio/calcite-radio.scss
@@ -1,9 +1,7 @@
 :host {
   .radio {
-    border-radius: 100%;
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-1);
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
+    @apply rounded-full cursor-pointer transition-all duration-150 ease-in-out;
+    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
   }
 }
 :host([hovered]),
@@ -14,22 +12,31 @@
 }
 :host([disabled]) {
   .radio {
-    cursor: default;
-    opacity: var(--calcite-ui-opacity-disabled);
+    @apply cursor-default opacity-disabled;
   }
 }
 :host([hovered][disabled]) {
   .radio {
-    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-1);
+    box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
   }
 }
+
 :host([scale="s"]) {
-  .radio {
-    height: 12px;
-    min-width: 12px;
-    max-width: 12px;
-  }
+  --calcite-radio-size: theme("fontSize.-2");
+}
+:host([scale="m"]) {
+  --calcite-radio-size: theme("fontSize.-1");
 }
+:host([scale="l"]) {
+  --calcite-radio-size: theme("fontSize.1");
+}
+
+.radio {
+  height: var(--calcite-radio-size);
+  max-width: var(--calcite-radio-size);
+  min-width: var(--calcite-radio-size);
+}
+
 :host([scale="s"][checked]),
 :host([hovered][scale="s"][checked][disabled]) {
   .radio {
@@ -42,13 +49,6 @@
       0 0 0 4px var(--calcite-ui-brand);
   }
 }
-:host([scale="m"]) {
-  .radio {
-    height: 14px;
-    min-width: 14px;
-    max-width: 14px;
-  }
-}
 :host([scale="m"][checked]),
 :host([hovered][scale="m"][checked][disabled]) {
   .radio {
@@ -61,13 +61,6 @@
       0 0 0 4px var(--calcite-ui-brand);
   }
 }
-:host([scale="l"]) {
-  .radio {
-    height: 20px;
-    min-width: 20px;
-    max-width: 20px;
-  }
-}
 :host([scale="l"][checked]),
 :host([hovered][scale="l"][checked][disabled]) {
   .radio {
@@ -81,5 +74,5 @@
   }
 }
 :host([hidden]) {
-  display: none;
+  @apply hidden;
 }