fix: remove .btnStart unexpected margin-right

2 files changed, 26 insertions, 10 deletions

diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss
index 2cc0d0b..289b694 100644
--- a/src/components/shared/Basic.module.scss
+++ b/src/components/shared/Basic.module.scss
@@ -36,10 +36,7 @@ h2.sectionNameType {
  *
  */
 
-:root[data-theme='light'] {
-  /*
-     * --loading-dot-{dot-index}-{dot-keyframe-phase}
-     */
+@mixin light {
   --loading-dot-1-1: rgba(0, 0, 0, 0.1);
   --loading-dot-1-2: rgba(0, 0, 0, 0.5);
   --loading-dot-1-3: rgba(0, 0, 0, 0.3);
@@ -50,7 +47,8 @@ h2.sectionNameType {
   --loading-dot-3-2: rgba(0, 0, 0, 0.3);
   --loading-dot-3-3: rgba(0, 0, 0, 0.1);
 }
-:root[data-theme='dark'] {
+
+@mixin dark {
   --loading-dot-1-1: rgba(255, 255, 255, 0.5);
   --loading-dot-1-2: rgba(255, 255, 255, 0.1);
   --loading-dot-1-3: rgba(255, 255, 255, 0.3);
@@ -62,6 +60,27 @@ h2.sectionNameType {
   --loading-dot-3-3: rgba(255, 255, 255, 0.5);
 }
 
+:root[data-theme='auto'] {
+  @media (prefers-color-scheme: dark) {
+    @include dark;
+    color-scheme: dark;
+  }
+  @media (prefers-color-scheme: light) {
+    @include light;
+    color-scheme: light;
+  }
+}
+
+:root[data-theme='dark'] {
+  @include dark;
+  color-scheme: dark;
+}
+
+:root[data-theme='light'] {
+  @include light;
+  color-scheme: light;
+}
+
 .loadingDot,
 .loadingDot:before,
 .loadingDot:after {
diff --git a/src/components/shared/ThemeSwitcher.module.scss b/src/components/shared/ThemeSwitcher.module.scss
index c5de126..d2f296a 100644
--- a/src/components/shared/ThemeSwitcher.module.scss
+++ b/src/components/shared/ThemeSwitcher.module.scss
@@ -10,8 +10,6 @@
   outline: none;
   padding: 5px;
   color: var(--color-text);
-  border-radius: 100%;
-  border: 1px solid transparent;
 }
 .iconWrapper:hover {
   opacity: 0.6;
@@ -48,9 +46,8 @@
   }
   .iconWrapper {
     pointer-events: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    width: 100%;
+    height: 100%;
     position: absolute;
     left: 0;
     top: 0;