Style more button parts

sass/components/breadcrumb.sass

@@ -17,7 +17,6 @@ $breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
   --breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
   --breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
   --breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}
-
   @extend %block
   @extend %unselectable
   font-size: var(--breadcrumb-font-size)

sass/components/card.sass

@@ -39,7 +39,6 @@ $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)

sass/components/dropdown.sass

@@ -35,7 +35,6 @@ $dropdown-divider-background-color: var(--border-light, #{$border-light}) !defau
   --dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
   --dropdown-item-active-color: #{$dropdown-item-active-color}
   --dropdown-divider-background-color: #{$dropdown-divider-background-color}
-
   display: inline-flex
   position: relative
   vertical-align: top

sass/components/level.sass

@@ -2,7 +2,6 @@ $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

sass/components/media.sass

@@ -6,7 +6,6 @@ $media-spacing-large: 1.5rem
   --media-border-color: #{$media-border-color}
   --media-spacing: #{$media-spacing}
   --media-spacing-large: #{$media-spacing-large}
-
   align-items: flex-start
   display: flex
   text-align: inherit

sass/components/menu.sass

@@ -36,7 +36,6 @@ $menu-label-spacing: 1em !default
   --menu-label-letter-spacing: #{$menu-label-letter-spacing}
   --menu-label-spacing: #{$menu-label-spacing}
   --menu-label-spacing: #{$menu-label-spacing}
-
   font-size: var(--menu-font-size)
   // Sizes
   &.is-small

sass/components/message.sass

@@ -37,7 +37,6 @@ $message-colors: $colors !default
   --message-body-pre-background-color: #{$message-body-pre-background-color}
   --message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
   --message-header-body-border-width: #{$message-header-body-border-width}
-
   @extend %block
   background-color: var(--message-background-color)
   border-radius: var(--message-radius)

sass/components/modal.sass

@@ -52,7 +52,6 @@ $modal-card-body-padding: 20px !default
   --modal-card-foot-border-top: #{$modal-card-foot-border-top}
   --modal-card-body-background-color: #{$modal-card-body-background-color}
   --modal-card-body-padding: #{$modal-card-body-padding}
-
   @extend %overlay
   align-items: center
   display: none

sass/components/navbar.sass

@@ -96,9 +96,9 @@ $navbar-colors: $colors !default
   --navbar-dropdown-z: #{$navbar-dropdown-z}
   --navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
   --navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
+  --navbar-dropdown-offset: #{$navbar-dropdown-offset}
   --navbar-item-active-color: #{$navbar-item-active-color}
   --navbar-item-active-background-color: #{$navbar-item-active-background-color}
-
   background-color: var(--navbar-background-color)
   min-height: var(--navbar-height)
   position: relative
@@ -106,10 +106,8 @@ $navbar-colors: $colors !default
   @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-
     &.is-#{$name}
       --navbar-burger-color: var(--#{$name}-invert, #{$color-invert})
-
       background-color: var(--#{$name}, #{$color})
       color: var(--#{$name}-invert, #{$color-invert})
       .navbar-brand
@@ -128,7 +126,6 @@ $navbar-colors: $colors !default
       +from($navbar-breakpoint)
         --navbar-dropdown-item-active-background-color: var(--#{$name}, #{$color})
         --navbar-dropdown-item-active-color: var(--#{$name}-invert, #{$color-invert})
-
         .navbar-brand,
         .navbar-start,
         .navbar-end
@@ -187,7 +184,7 @@ body
 
 .navbar-burger
   color: var(--navbar-burger-color)
-  +hamburger($navbar-height)
+  +hamburger(var(--navbar-height))
   +ltr-property("margin", auto, false)
 
 .navbar-menu
@@ -421,7 +418,7 @@ a.navbar-item,
       display: block
       opacity: 0
       pointer-events: none
-      top: calc(100% + (#{$navbar-dropdown-offset}))
+      top: calc(100% + #{var(--navbar-dropdown-offset)})
       transform: translateY(-5px)
       transition-duration: var(--speed, #{$speed})
       transition-property: opacity, transform

sass/components/pagination.sass

@@ -51,11 +51,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
   --pagination-current-border-color: #{$pagination-current-border-color}
   --pagination-current-color: #{$pagination-current-color}
   --pagination-ellipsis-color: #{$pagination-ellipsis-color}
-
   @extend %block
   font-size: var(--pagination-font-size)
   margin: var(--pagination-margin)
-
   // Sizes
   &.is-small
     --pagination-font-size: var(--size-small, #{$size-small})

sass/components/panel.sass

@@ -54,7 +54,6 @@ $panel-colors: $colors !default
   --panel-block-active-icon-color: #{$panel-block-active-icon-color}
   --panel-block-hover-background-color: #{$panel-block-hover-background-color}
   --panel-icon-color: #{$panel-icon-color}
-
   border-radius: var(--panel-radius)
   box-shadow: var(--panel-shadow)
   font-size: var(--panel-font-size)
@@ -66,12 +65,12 @@ $panel-colors: $colors !default
     $color-invert: nth($components, 2)
     &.is-#{$name}
       .panel-heading
-        background-color: $color
-        color: $color-invert
+        background-color: var(--#{$name}, #{$color})
+        color: var(--#{$name}-invert, #{$color-invert})
       .panel-tabs a.is-active
-        border-bottom-color: $color
+        border-bottom-color: var(--#{$name}, #{$color})
       .panel-block.is-active .panel-icon
-        color: $color
+        color: var(--#{$name}, #{$color})
 
 .panel-tabs,
 .panel-block

sass/components/tabs.sass

@@ -53,10 +53,9 @@ $tabs-toggle-link-active-color: var(--link-invert, #{$link-invert}) !default
   --tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color}
   --tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color}
   --tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color}
-
   @extend %block
-  +overflow-touch
   @extend %unselectable
+  +overflow-touch
   align-items: stretch
   display: flex
   font-size: var(--tabs-font-size)