From 6d83163951fc87e041aeba4c109720955e33be5c Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 13 Jan 2022 10:53:56 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20clean=20up=20specificity,?=
 =?UTF-8?q?=20lineheight?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/rose/components/form/_radio.scss     |  8 ++++----
 .../styles/rose/components/form/_radioCard.scss | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 addons/rose/addon/styles/rose/components/form/_radioCard.scss

diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 7ef3ddcea..353912dfe 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -1,6 +1,7 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
-@use 'sass:math';
+@use '../../variables/typography';
+
 $radio-svg: (
   'default':
     "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
@@ -32,12 +33,11 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
-  .rose-form-radio-label.helper-text {
+  .helper-text {
     display: flex;
     .rose-form-helper-text {
       margin-left: sizing.rems(xxs);
-      $lineHeight: math.div(20, 14);
-      line-height: $lineHeight;
+      line-height: typography.line-height(m);
     }
   }
   .rose-form-radio-label {
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
new file mode 100644
index 000000000..f24a15dae
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -0,0 +1,17 @@
+.rose-form-radio-card {
+    position: relative;
+    width: 370px;
+    height: 115px;    
+    background: #FFFFFF;
+    border: 1px solid #BAC1CC;    
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+  .rose-form-radio-field {
+    top: 89px;
+    right: 176px;
+    position: absolute;
+  }
+  .rose-form-radio-label {
+      color: #000;
+  }
+}
\ No newline at end of file