diff --git a/src/components/AccountMenu/AccountMenu.module.scss b/src/components/AccountMenu/AccountMenu.module.scss
index ed3c6f2e..dbe7af09 100644
--- a/src/components/AccountMenu/AccountMenu.module.scss
+++ b/src/components/AccountMenu/AccountMenu.module.scss
@@ -16,14 +16,11 @@
 
 .Content {
   @include flex.column($gap: 0.25rem);
+  @include variants.card($elevated: true);
   @include animate.duration-quick;
-  @include corners.normal;
-  @include shadows.elevated;
-  @include variants.card;
 
   margin: 0.25rem 0;
   padding: 0.25rem;
-  background-color: var(--card-bg);
 
   @include animate.style-pop; // Must list last because it contains nested declarations
 }
diff --git a/src/components/AvatarEditable/AvatarEditable.module.scss b/src/components/AvatarEditable/AvatarEditable.module.scss
index 58bf7841..c05ad7ac 100644
--- a/src/components/AvatarEditable/AvatarEditable.module.scss
+++ b/src/components/AvatarEditable/AvatarEditable.module.scss
@@ -25,14 +25,11 @@
 .ActionsMenu {
   @include flex.column($gap: 0.25rem);
   @include animate.duration-quick;
-  @include corners.normal;
-  @include shadows.elevated;
-  @include variants.card;
+  @include variants.card($elevated: true);
 
   z-index: 10000;
   margin: 0.25rem 0;
   padding: 0.25rem;
-  background-color: var(--card-bg);
 
   @include animate.style-pop; // Must list last because it contains nested declarations
 }
diff --git a/src/components/MatchResultCard/MatchResultCard.module.scss b/src/components/MatchResultCard/MatchResultCard.module.scss
index 93b2a24e..44f51d22 100644
--- a/src/components/MatchResultCard/MatchResultCard.module.scss
+++ b/src/components/MatchResultCard/MatchResultCard.module.scss
@@ -9,10 +9,7 @@
 
 .MatchResultCard {
   @include flex.column($gap: 0);
-
   @include variants.card;
-  @include shadows.surface;
-  @include corners.normal;
 
   position: relative;
   overflow: hidden;
diff --git a/src/components/MatchResultPlayers/MatchResultPlayers.module.scss b/src/components/MatchResultPlayers/MatchResultPlayers.module.scss
index f2268fae..7e32cacf 100644
--- a/src/components/MatchResultPlayers/MatchResultPlayers.module.scss
+++ b/src/components/MatchResultPlayers/MatchResultPlayers.module.scss
@@ -109,13 +109,10 @@
 }
 
 .FactionDetails {
-  @include variants.card;
-  @include shadows.elevated;
+  @include variants.card($elevated: true);
   @include animate.duration-quick;
   @include animate.style-pop;
   @include flex.column($gap: 0);
 
   margin: 0.25rem 0;
-  background-color: var(--card-bg);
-  border-radius: variables.$corner-radius;
 }
diff --git a/src/components/ToastProvider/ToastProvider.module.scss b/src/components/ToastProvider/ToastProvider.module.scss
index 515e06a8..838f09b3 100644
--- a/src/components/ToastProvider/ToastProvider.module.scss
+++ b/src/components/ToastProvider/ToastProvider.module.scss
@@ -26,8 +26,7 @@
 .Root {
   --icon-size: 1.25rem;
 
-  @include corners.wide;
-  @include variants.card;
+  @include variants.card($elevated: true);
   @include text.small;
 
   display: flex;
diff --git a/src/components/TournamentCard/TournamentCard.module.scss b/src/components/TournamentCard/TournamentCard.module.scss
index 154e3174..ef3f2706 100644
--- a/src/components/TournamentCard/TournamentCard.module.scss
+++ b/src/components/TournamentCard/TournamentCard.module.scss
@@ -12,8 +12,6 @@
   --banner-wide-size: 14rem;
 
   @include variants.card;
-  @include shadows.surface;
-  @include corners.normal;
   @include text.ui;
 
   position: relative;
diff --git a/src/components/generic/Card/Card.module.scss b/src/components/generic/Card/Card.module.scss
index 06b28ac2..a38e3dd4 100644
--- a/src/components/generic/Card/Card.module.scss
+++ b/src/components/generic/Card/Card.module.scss
@@ -8,11 +8,8 @@
 .Card {
   @include flex.column($gap: 0);
   @include variants.card;
-  @include shadows.surface;
-  @include corners.normal;
   @include flex.stretchy;
 
   min-height: 0;
   max-height: 100%;
-  background-color: var(--card-bg);
 }
diff --git a/src/components/generic/DataTable/DataTable.module.scss b/src/components/generic/DataTable/DataTable.module.scss
index 88c21621..bfd4bbf8 100644
--- a/src/components/generic/DataTable/DataTable.module.scss
+++ b/src/components/generic/DataTable/DataTable.module.scss
@@ -27,14 +27,11 @@ $row-height: 3rem;
 }
 
 .PopoverContent {
-  @include shadows.elevated;
   @include animate.duration-quick;
-  @include variants.card;
+  @include variants.card($elevated: true);
 
   margin: 0.25rem 0;
   padding: 1rem;
-  background-color: var(--card-bg);
-  border-radius: variables.$corner-radius;
 
   @include animate.style-pop; // Must list last because it contains nested declarations
 }
diff --git a/src/components/generic/InputDateTime/InputDateTime.module.scss b/src/components/generic/InputDateTime/InputDateTime.module.scss
index e8c25663..3d4c364e 100644
--- a/src/components/generic/InputDateTime/InputDateTime.module.scss
+++ b/src/components/generic/InputDateTime/InputDateTime.module.scss
@@ -20,8 +20,7 @@
 }
 
 .Content {
-  @include variants.card;
-  @include shadows.elevated;
+  @include variants.card($elevated: true);
   @include animate.duration-quick;
   @include animate.style-pop;
   @include flex.column($gap: 0);
diff --git a/src/components/generic/InputLocation/InputLocation.module.scss b/src/components/generic/InputLocation/InputLocation.module.scss
index a88ed4cb..ef0e349b 100644
--- a/src/components/generic/InputLocation/InputLocation.module.scss
+++ b/src/components/generic/InputLocation/InputLocation.module.scss
@@ -6,8 +6,7 @@
 @use "/src/style/flex";
 
 .InputDatePopoverContent {
-  @include variants.card;
-  @include shadows.elevated;
+  @include variants.card($elevated: true);
   @include animate.duration-quick;
   @include animate.style-pop;
 
diff --git a/src/components/generic/PopoverMenu/PopoverMenu.module.scss b/src/components/generic/PopoverMenu/PopoverMenu.module.scss
index 7ecad3cd..862c84d1 100644
--- a/src/components/generic/PopoverMenu/PopoverMenu.module.scss
+++ b/src/components/generic/PopoverMenu/PopoverMenu.module.scss
@@ -10,9 +10,7 @@
 .PopoverContent {
   @include flex.column($gap: 0.25rem);
   @include animate.duration-quick;
-  @include corners.normal;
-  @include shadows.elevated;
-  @include variants.card;
+  @include variants.card($elevated: true);
 
   z-index: 1;
   margin: 0.25rem 0;
diff --git a/src/pages/TournamentsPage/TournamentsPage.module.scss b/src/pages/TournamentsPage/TournamentsPage.module.scss
index 2c656ae7..64fe4150 100644
--- a/src/pages/TournamentsPage/TournamentsPage.module.scss
+++ b/src/pages/TournamentsPage/TournamentsPage.module.scss
@@ -11,15 +11,12 @@
 }
 
 .FilterPopover {
-  @include variants.card;
-  @include shadows.elevated;
+  @include variants.card($elevated: true);
   @include animate.duration-quick;
   @include animate.style-pop;
 
   margin: 0.25rem 0;
   padding: 1rem;
-  background-color: var(--card-bg);
-  border-radius: variables.$corner-radius;
 }
 
 .List {
diff --git a/src/style/_variants.scss b/src/style/_variants.scss
index df383775..f840d409 100644
--- a/src/style/_variants.scss
+++ b/src/style/_variants.scss
@@ -1,5 +1,7 @@
 @use "variables";
 @use "/src/style/borders";
+@use "/src/style/corners";
+@use "/src/style/shadows";
 
 // TODO: Move to utils
 @mixin reset {
@@ -190,9 +192,14 @@
   }
 }
 
-@mixin card {
+@mixin card($elevated: false) {
   @include borders.normal;
+  @include corners.normal;
+  @include shadows.surface;
 
   background-color: var(--card-bg);
-  border-color: var(--border-color-default);
+
+  @if $elevated {
+    @include shadows.elevated;
+  }
 }