Add icon_button disabled and active style

We should not use the button with label (tooltip) for this
behavior, but let the button have it.

app/assets/stylesheets/alchemy/buttons.scss

@@ -48,14 +48,14 @@ input.button {
 }
 
 .icon_button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   margin: 0;
   padding: 0;
-  overflow: hidden;
   text-shadow: none;
   border-radius: $default-border-radius;
 
@@ -66,7 +66,9 @@ input.button {
     border: none;
   }
 
-  &:hover {
+  &.active,
+  &:active,
+  &:hover:not([disabled]):not(.disabled):not(.linked) {
     text-decoration: none;
     background-color: $default-border-color;
     cursor: pointer;
@@ -79,25 +81,23 @@ input.button {
 
   &.disabled,
   &[disabled] {
-    span {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
+    pointer-events: none;
 
     i {
       opacity: 0.3;
     }
 
     &:hover {
-      cursor: not-allowed;
+      text-decoration: none;
+      cursor: default;
     }
   }
 
   &.linked {
     @include linked-button;
   }
 
-  &:focus {
+  &:focus:not(.disabled):not([disabled]) {
     @include default-focus-style;
   }
 }
@@ -125,15 +125,6 @@ button.icon_button {
   justify-content: center;
   text-align: center;
 
-  &.active,
-  &:active,
-  &:hover {
-    .icon_button:not([disabled]) {
-      background-color: $default-border-color;
-      cursor: pointer;
-    }
-  }
-
   .select2-container,
   select {
     margin: 0;