Add CSS variables test

sass/components/breadcrumb.sass

@@ -29,7 +29,7 @@ $breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
     justify-content: center
     padding: var(--breadcrumb-item-padding-vertical) var(--breadcrumb-item-padding-horizontal)
     &:hover
-      color: var(--breadcrumb-item-hover-color)
+      --breadcrumb-item-color: var(--breadcrumb-item-hover-color)
   li
     align-items: center
     display: flex
@@ -37,7 +37,7 @@ $breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
       +ltr-property("padding", 0, false)
     &.is-active
       a
-        color: var(--breadcrumb-item-active-color)
+        --breadcrumb-item-color: var(--breadcrumb-item-active-color)
         cursor: default
         pointer-events: none
     & + li::before

sass/components/card.sass

@@ -16,7 +16,8 @@ $card-content-background-color: transparent !default
 $card-content-padding: 1.5rem !default
 
 $card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border-light !default
+$card-footer-border-top-color: var(--border-light, #{$border-light}) !default
+$card-footer-border-top: 1px solid $card-footer-border-top-color !default
 $card-footer-padding: 0.75rem !default
 
 $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
@@ -38,6 +39,7 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
   --card-footer-border-top: #{$card-footer-border-top}
   --card-footer-padding: #{$card-footer-padding}
   --card-media-margin: #{$card-media-margin}
+
   background-color: var(--card-background-color)
   box-shadow: var(--card-shadow)
   color: var(--card-color)
@@ -92,7 +94,7 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
   justify-content: center
   padding: var(--card-footer-padding)
   &:not(:last-child)
-    +ltr-property("border", $card-footer-border-top)
+    +ltr-property("border", var(--card-footer-border-top))
 
 // Combinations
 

sass/components/dropdown.sass

@@ -84,7 +84,7 @@ button.dropdown-item
   text-align: inherit
   white-space: nowrap
   width: 100%
-  &:hover
+  &:hover:not(.is-active)
     background-color: var(--dropdown-item-hover-background-color)
     color: var(--dropdown-item-hover-color)
   &.is-active

sass/components/level.sass

@@ -2,11 +2,12 @@ $level-item-spacing: calc(var(--block-spacing, #{$block-spacing}) / 2) !default
 
 .level
   --level-item-spacing: #{$level-item-spacing}
+
   @extend %block
   align-items: center
   justify-content: space-between
   code
-    border-radius: $radius
+    border-radius: var(--radius, #{$radius})
   img
     display: inline-block
     vertical-align: top

sass/components/media.sass

@@ -30,7 +30,8 @@ $media-spacing-large: 1.5rem
   // Sizes
   &.is-large
     & + .media
-      --media-spacing: var(--media-spacing-large)
+      margin-top: var(--media-spacing-large)
+      padding-top: var(--media-spacing-large)
 
 .media-left,
 .media-right

sass/components/menu.sass

@@ -19,7 +19,7 @@ $menu-label-letter-spacing: 0.1em !default
 $menu-label-spacing: 1em !default
 
 .menu
-  --menu-font-size: #{$content-font-size}
+  --menu-font-size: #{$menu-font-size}
   --menu-list-line-height: #{$menu-list-line-height}
   --menu-item-radius: #{$menu-item-radius}
   --menu-item-color: #{$menu-item-color}