From 67a224bfe1f66550bf5496e5570f53da27ddaccb Mon Sep 17 00:00:00 2001
From: Luke LaValva <lukelavalva@gmail.com>
Date: Fri, 25 Oct 2024 09:50:03 -0700
Subject: [PATCH] feat(file-preview-card): add description (#2474)

---
 .changeset/real-sheep-cough.md                    |  5 +++++
 dist/file-preview-card/file-preview-card.css      | 10 +++++++---
 src/sass/file-preview-card/file-preview-card.scss |  9 ++++++---
 3 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/real-sheep-cough.md

diff --git a/.changeset/real-sheep-cough.md b/.changeset/real-sheep-cough.md
new file mode 100644
index 000000000..39c4c86ca
--- /dev/null
+++ b/.changeset/real-sheep-cough.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+Add description to file preview card
diff --git a/dist/file-preview-card/file-preview-card.css b/dist/file-preview-card/file-preview-card.css
index 0fd4f406e..240d3c0eb 100644
--- a/dist/file-preview-card/file-preview-card.css
+++ b/dist/file-preview-card/file-preview-card.css
@@ -37,6 +37,7 @@ video.file-preview-card__asset {
 }
 
 .file-preview-card__asset--fade {
+    background-color: inherit;
     opacity: 0.5;
 }
 
@@ -45,16 +46,19 @@ video.file-preview-card__asset {
     width: 40%;
 }
 
-.icon-btn.file-preview-card__action {
+.file-preview-card__body .icon-btn {
     height: var(--spacing-400);
+    width: var(--spacing-400);
+}
+
+.file-preview-card__body > .file-preview-card__action {
     position: absolute;
     right: var(--spacing-100);
     top: var(--spacing-100);
-    width: var(--spacing-400);
     z-index: 1;
 }
 
-.file-preview-card__action:dir(rtl) {
+.file-preview-card__body > .file-preview-card__action:dir(rtl) {
     left: var(--spacing-100);
     right: auto;
 }
diff --git a/src/sass/file-preview-card/file-preview-card.scss b/src/sass/file-preview-card/file-preview-card.scss
index 1bd7908ca..8de3d46cd 100644
--- a/src/sass/file-preview-card/file-preview-card.scss
+++ b/src/sass/file-preview-card/file-preview-card.scss
@@ -53,16 +53,19 @@ video.file-preview-card__asset {
     width: 40%;
 }
 
-.icon-btn.file-preview-card__action {
+.file-preview-card__body .icon-btn {
     height: var(--spacing-400);
+    width: var(--spacing-400);
+}
+
+.file-preview-card__body > .file-preview-card__action {
     position: absolute;
     right: var(--spacing-100);
     top: var(--spacing-100);
-    width: var(--spacing-400);
     z-index: 1;
 }
 
-.file-preview-card__action:dir(rtl) {
+.file-preview-card__body > .file-preview-card__action:dir(rtl) {
     left: var(--spacing-100);
     right: auto;
 }