From c816fe4eae825aafe83651fe8a071a1f479cbd30 Mon Sep 17 00:00:00 2001
From: h-banii <hbanii@outlook.com>
Date: Sun, 28 Jan 2024 06:10:41 -0300
Subject: [PATCH] Fix disabled button

---
 css/sakura-dark-solarized.css | 16 ++++++-----
 css/sakura-dark.css           | 16 ++++++-----
 css/sakura-earthly.css        | 16 ++++++-----
 css/sakura-ink.css            | 16 ++++++-----
 css/sakura-pink.css           | 16 ++++++-----
 css/sakura-radical.css        | 16 ++++++-----
 css/sakura-vader.css          | 16 ++++++-----
 css/sakura.css                | 16 ++++++-----
 scss/_main.scss               | 50 +++++++++++++++++++----------------
 9 files changed, 99 insertions(+), 79 deletions(-)

diff --git a/css/sakura-dark-solarized.css b/css/sakura-dark-solarized.css
index 763b075..531aa36 100644
--- a/css/sakura-dark-solarized.css
+++ b/css/sakura-dark-solarized.css
@@ -174,7 +174,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -187,16 +187,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #657b83;
   color: #002b36;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura-dark.css b/css/sakura-dark.css
index 2c50836..d423266 100644
--- a/css/sakura-dark.css
+++ b/css/sakura-dark.css
@@ -174,7 +174,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -187,16 +187,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #c9c9c9;
   color: #222222;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura-earthly.css b/css/sakura-earthly.css
index 1ef4053..3ba8f9d 100644
--- a/css/sakura-earthly.css
+++ b/css/sakura-earthly.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #006994;
   color: #ffffff;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura-ink.css b/css/sakura-ink.css
index 2a657e7..59d03fd 100644
--- a/css/sakura-ink.css
+++ b/css/sakura-ink.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #DA4453;
   color: #ffffff;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura-pink.css b/css/sakura-pink.css
index 62610d0..027d18f 100644
--- a/css/sakura-pink.css
+++ b/css/sakura-pink.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #753851;
   color: #ffe4f5;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura-radical.css b/css/sakura-radical.css
index 9924632..f443cfb 100644
--- a/css/sakura-radical.css
+++ b/css/sakura-radical.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #00ffff;
   color: #000000;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura-vader.css b/css/sakura-vader.css
index e8ce27a..4fba478 100644
--- a/css/sakura-vader.css
+++ b/css/sakura-vader.css
@@ -174,7 +174,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -187,16 +187,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #DA4453;
   color: #120c0e;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/css/sakura.css b/css/sakura.css
index 3992573..fb0378f 100644
--- a/css/sakura.css
+++ b/css/sakura.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #982c61;
   color: #f9f9f9;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }
diff --git a/scss/_main.scss b/scss/_main.scss
index 64b38ea..703e0fc 100644
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -172,34 +172,38 @@ textarea {
     width: 100%;
 }
 
-.button, button, input[type="submit"], input[type="reset"], input[type="button"], input[type=file]::file-selector-button {
-    display: inline-block;
-    padding: 5px 10px;
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-
-    background-color: $color-blossom;
-    color: $color-bg;
-    border-radius: 1px;
-    border: 1px solid $color-blossom;
-    cursor: pointer;
-    box-sizing: border-box;
+.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+    @at-root &, input[type=file]::file-selector-button {
+        display: inline-block;
+        padding: 5px 10px;
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+
+        background-color: $color-blossom;
+        color: $color-bg;
+        border-radius: 1px;
+        border: 1px solid $color-blossom;
+        cursor: pointer;
+        box-sizing: border-box;
+
+        &:hover {
+            background-color: $color-fade;
+            color: $color-bg;
+            outline: 0;
+        }
+    }
 
-    &[disabled] {
+    @at-root &[disabled], input[type=file][disabled]::file-selector-button {
         cursor: default;
         opacity: .5;
     }
 
-    &:hover {
-        background-color: $color-fade;
-        color: $color-bg;
-        outline: 0;
-    }
-    
-    &:focus-visible {
-        outline-style: solid;
-        outline-width: 2px;
+    @at-root &, input[type=file] {
+        &:focus-visible {
+            outline-style: solid;
+            outline-width: 2px;
+        }
     }
 }