sass/custom.sass

@@ -9,6 +9,7 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
 // TODO: consider changing to npm install
 @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css')
 
+// TODO: refactor style custom
 .dfdb
   --border-radius: var(--spacer)
   --border-radius-lg: calc(var(--spacer) * 2)
@@ -50,6 +51,7 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
 
   // TODO: consider changing to Sass include from Web Assets instead
   &.is-dark-mode
+    // TODO: check Web Assets v2 upgrade colours dark mode
     --color-bg: hsl(213, 10%, 18%)
     --color-bg-primary: hsl(213, 10%, 21%)
     --color-bg-secondary: hsl(213, 10%, 16%)
@@ -95,7 +97,11 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
     +media-xs
       --fs-lg: 28px
 
+a
+  text-decoration: underline
+
 h2
+  // TODO: convert rules to Web Assets mixins if possible
   font-variation-settings: "wght" var(--fw-normal)
 
 /* Custom utilities. */
@@ -132,10 +138,22 @@ h2
 .h-0
   height: 0
 
+.form-control,
+input
+  // Reassign custom properties within scope
+  // TODO: fix and improve form colours in Web Assets
+  --border-width: 2px
+  --input-color-bg: white
+  --input-color-bg-hover: var(--input-color-bg)
+
+  background-color: var(--input-color-bg)
+  font-size: var(--fs-h4)
+
 +media-xs
   .justify-content-xs-center
     justify-content: center !important
 
+// TODO: add style utility to Web Assets
 .rounded-lg
   border-radius: var(--border-radius-lg)
 
@@ -166,11 +184,11 @@ h2
 
 .btn-lg
   @extend .fs-4
-  line-height: var(--spacer-5)
+  line-height: var(--spacer-5) !important
-  padding: var(--spacer-4)
+  padding: var(--spacer-4) !important
 
 .btn-link
-  border: 2px solid var(--btn-color)
+  border: 2px solid var(--btn-color) !important
 
 .btn-link
   &:active,
@@ -181,9 +199,8 @@ h2
 
   &.active
     border-color: var(--color-accent) !important
-    // '!important' is needed for Wiki
+    --btn-color-bg: transparent !important
-    --btn-color-bg: var(--color-accent) !important
+    --btn-color: var(--color-accent) !important
-    --btn-color: white !important
 
 .btn-sm
   @extend .fs-7
@@ -210,6 +227,9 @@ h2
   --btn-color-bg: var(--color-accent)
   --btn-color: white
 
+  &:hover
+    --btn-color: var(--color-accent)
+
 .btn-tabbed
   @extend .btn-primary
   @extend .fs-5
@@ -219,9 +239,11 @@ h2
   flex-grow: 1
   padding: var(--spacer-4) var(--spacer)
 
-  &.active
+  &:active,
-    background-color: var(--color-accent)
+  &.active,
-    color: white
+  &:focus
+    background-color: var(--color-accent) !important
+    color: white !important
 
 +media-sm
   .donation-box-message