Fix button icons

assets/stylesheets/components/_header.scss

@@ -138,17 +138,24 @@
   position: absolute;
   top: .5em;
   right: 0;
-  padding: .5em;
-  width: 1rem;
-  height: 1rem;
+  width: 2rem;
+  height: 2rem;
   opacity: .3;
-  @extend %content-box, %hide-text;
+  @extend %hide-text;
 
   &:hover { opacity: .5; }
+
+  &:before {
+    position: absolute;
+    top: .5rem;
+    left: .5rem;
+    @extend %icon;
+  }
+
   @if $style == 'dark' {
-    &:before { @extend %icon, %icon-close-white; }
+    &:before { @extend %icon-close-white; }
   } @else {
-    &:before { @extend %icon, %icon-clear; }
+    &:before { @extend %icon-clear; }
   }
   ._search-active > & { display: block; }
 }

assets/stylesheets/components/_notif.scss

@@ -43,13 +43,17 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 1rem;
-  height: 1rem;
-  padding: .625rem;
+  width: 2.25rem;
+  height: 2.25rem;
   opacity: .9;
-  @extend %content-box, %hide-text;
+  @extend %hide-text;
 
-  &:before { @extend %icon, %icon-close-white; }
+  &:before {
+    position: absolute;
+    top: .625rem;
+    left: .625rem;
+    @extend %icon, %icon-close-white;
+  }
 }
 
 ._notif-content {

assets/stylesheets/global/_base.scss

@@ -171,6 +171,7 @@ input, button {
 }
 
 button {
+  padding: 0;
   background: none;
   border: 0;
   cursor: pointer;

assets/stylesheets/global/_classes.scss

@@ -7,11 +7,6 @@
        box-sizing: border-box;
 }
 
-%content-box {
-  -moz-box-sizing: content-box;
-       box-sizing: content-box;
-}
-
 %user-select-none {
   -webkit-user-select: none;
      -moz-user-select: -moz-none;
@@ -22,7 +17,7 @@
 %hide-text {
   white-space: nowrap;
   overflow: hidden;
-  text-indent: -1000px;
+  text-indent: 100%;
   @extend %user-select-none;
 }