focusable border size variable dropped

src/App/styles.less

@@ -82,13 +82,6 @@ html {
         width: 100%;
         height: 100%;
 
-        :global(.focusable) {
-            &:focus, &:focus-within {
-                outline-offset: calc(-1 * var(--focusable-border-size));
-                outline: var(--focusable-border-size) solid var(--color-surfacelighter);
-            }
-        }
-
         :global(.disabled) {
             pointer-events: none;
         }
@@ -124,7 +117,6 @@ html {
 @media only screen and (max-width: @medium) {
     html {
         --scroll-bar-width: 8px;
-        --focusable-border-size: 2px;
         font-size: 14px;
     }
 }
@@ -132,7 +124,6 @@ html {
 @media only screen and (min-width: @medium) and (max-width: @large) {
     html {
         --scroll-bar-width: 8px;
-        --focusable-border-size: 2px;
         font-size: 15px;
     }
 }
@@ -140,7 +131,6 @@ html {
 @media only screen and (min-width: @large) and (max-width: @xxlarge) {
     html {
         --scroll-bar-width: 8px;
-        --focusable-border-size: 2px;
         font-size: 16px;
     }
 }
@@ -148,7 +138,6 @@ html {
 @media only screen and (min-width: @xxlarge) {
     html {
         --scroll-bar-width: 10px;
-        --focusable-border-size: 3px;
         font-size: 18px;
     }
 }

src/common/Button/Button.js

@@ -2,6 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useFocusable } = require('stremio-navigation');
+const styles = require('./styles');
 
 const ENTER_KEY_CODE = 13;
 
@@ -33,7 +34,7 @@ const Button = React.forwardRef(({ children, ...props }, ref) => {
         {
             ...props,
             ref,
-            className: classnames(props.className, { 'focusable': focusable }, { 'disabled': props.disabled }),
+            className: classnames(props.className, styles['button-container'], { 'disabled': props.disabled }),
             tabIndex: (props.tabIndex === null || isNaN(props.tabIndex)) ?
                 (focusable ? 0 : -1)
                 :

src/common/Button/styles.less

@@ -0,0 +1,8 @@
+.button-container {
+    cursor: pointer;
+
+    &:focus {
+        outline-offset: -2px;
+        outline: 2px solid var(--color-surfacelighter);
+    }
+}