fixed checkbox styles, optimized default shadows

src/App.scss

@@ -58,8 +58,6 @@ button {
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
-  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black;
   box-shadow: var(--buttonShadow);
   font-size: 14px;
@@ -80,8 +78,7 @@ button {
   }
 
   &:active {
-    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
-    /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
+    box-shadow: var(--buttonPressedShadow);
   }
 
   &:disabled {
@@ -106,8 +103,6 @@ input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
-  /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
   box-shadow: 0px 0px 2px black inset;
   box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
@@ -184,8 +179,6 @@ input, textarea, .select {
       height: 1.1em;
       border-radius: $fallback--checkBoxRadius;
       border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: .5em;

src/components/tab_switcher/tab_switcher.scss

@@ -34,13 +34,13 @@
       border-bottom-right-radius: 0;
       padding: 5px 1em 99px;
 
-      &:hover {
-        z-index: 6;
-      }
-
       &:not(.active) {
         z-index: 4;
 
+        &:hover {
+          z-index: 6;
+        }
+
         &::after {
           content: '';
           position: absolute;

src/services/style_setter/style_setter.js

@@ -256,40 +256,26 @@ const generateRadii = (input) => {
 }
 
 const generateShadows = (input) => {
-  const buttonInsetFakeBorders = [{
+  const border = (top, shadow) => ({
     x: 0,
-    y: 1,
+    y: top ? 1 : -1,
     blur: 0,
     spread: 0,
-    color: '#FFFFFF',
+    color: shadow ? '#000000' : '#FFFFFF',
     alpha: 0.2,
     inset: true
-  }, {
+  })
+  const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+  const inputInsetFakeBorders = [border(true, true), border(false, false)]
+  const hoverGlow = {
     x: 0,
-    y: -1,
-    blur: 0,
+    y: 0,
+    blur: 4,
     spread: 0,
-    color: '#000000',
-    alpha: 0.2,
-    inset: true
-  }]
-  const inputInsetFakeBorders = [{
-    x: 0,
-    y: 1,
-    blur: 0,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.2,
-    inset: true
-  }, {
-    x: 0,
-    y: -1,
-    blur: 0,
-    spread: 0,
-    color: '#FFFFFF',
-    alpha: 0.2,
-    inset: true
-  }]
+    color: '--faint',
+    alpha: 1
+  }
+
   const shadows = {
     panel: [{
       x: 1,
@@ -332,14 +318,8 @@ const generateShadows = (input) => {
       color: '#000000',
       alpha: 1
     }, ...buttonInsetFakeBorders],
-    buttonHover: [{
-      x: 0,
-      y: 0,
-      blur: 4,
-      spread: 0,
-      color: '--faint',
-      alpha: 1
-    }, ...buttonInsetFakeBorders],
+    buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
+    buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
     input: [...inputInsetFakeBorders, {
       x: 0,
       y: 0,