Make checked switch button focus state visible

Author: angelikatyborska

assets/css/settings.css

@@ -92,6 +92,19 @@
   background-color: var(--main);
 }
 
+#settings-modal-content .switch-button__checkbox:focus {
+  outline: 0;
+}
+
+#settings-modal-content .switch-button__checkbox:focus + .switch-button__bg {
+  outline: 2px solid var(--main);
+  outline-offset: 2px;
+}
+
+#settings-modal-content .switch-button__checkbox:focus:not(:focus-visible) + .switch-button__bg {
+  outline: 0;
+}
+
 #settings-modal-content .settings-select {
   cursor: pointer;
   position: relative;