From 9a9b2df6d7d3df022a94cac7676b78140a0561d0 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 27 Dec 2023 11:41:02 -0300
Subject: [PATCH] reorganize styles

---
 .../src/components/Card/Card.stories.tsx      |  2 +-
 .../src/components/Card/Card.styles.scss      | 56 ++++++++-----------
 2 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/packages/fuselage/src/components/Card/Card.stories.tsx b/packages/fuselage/src/components/Card/Card.stories.tsx
index 6a17dfa661..0c9a3e9c86 100644
--- a/packages/fuselage/src/components/Card/Card.stories.tsx
+++ b/packages/fuselage/src/components/Card/Card.stories.tsx
@@ -140,7 +140,7 @@ export const Horizontal: ComponentStory<typeof Card> = () => (
 );
 
 export const Clickable: ComponentStory<typeof Card> = () => (
-  <Card horizontal>
+  <Card horizontal clickable>
     <CardRow>
       <FramedIcon icon='document-eye' info />
       <CardCol>
diff --git a/packages/fuselage/src/components/Card/Card.styles.scss b/packages/fuselage/src/components/Card/Card.styles.scss
index e8c294191e..70e91752b1 100644
--- a/packages/fuselage/src/components/Card/Card.styles.scss
+++ b/packages/fuselage/src/components/Card/Card.styles.scss
@@ -39,39 +39,37 @@ $card-hero-padding: lengths.padding(28);
     gap: $card-spacing;
   }
 
-  &__controls {
-    align-items: center;
+  &__col {
+    display: flex;
+    flex-direction: column;
   }
-}
 
-// Card horizontal
-.rcx-card__horizontal {
-  align-items: center;
+  &__row {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
 
-  padding: $card-horizontal-padding;
-  gap: $card-horizontal-gap;
+  &__horizontal {
+    align-items: center;
 
-  .rcx-card__controls {
-    justify-content: flex-end;
-    flex-shrink: 0;
-  }
+    padding: $card-horizontal-padding;
+    gap: $card-horizontal-gap;
 
-  &--wrap {
-    flex-wrap: wrap;
+    &--wrap {
+      flex-wrap: wrap;
+    }
   }
-}
 
-// Card vertical
-.rcx-card__vertical {
-  flex-direction: column;
+  &__vertical {
+    flex-direction: column;
 
-  padding: $card-vertical-padding;
-  gap: $card-vertical-gap;
-}
+    padding: $card-vertical-padding;
+    gap: $card-vertical-gap;
+  }
 
-// Card hero
-.rcx-card__hero {
-  padding: $card-hero-padding;
+  &__hero {
+    padding: $card-hero-padding;
+  }
 }
 
 .rcx-card__title,
@@ -81,13 +79,3 @@ $card-hero-padding: lengths.padding(28);
   display: flex;
   align-items: center;
 }
-
-.rcx-card__col {
-  display: flex;
-  flex-direction: column;
-}
-
-.rcx-card__row {
-  // flex-grow: 1;
-  // flex-shrink: 1;
-}