+
+ my-global-icon.not-displayed {
+ display: none;
+ }
+
+ &:hover {
+ my-global-icon.hover-display-toggle.not-displayed {
+ display: inherit;
+ }
+ my-global-icon.hover-display-toggle {
+ display: none;
+ }
+ }
+}
+
+.more-settings {
+ text-transform: uppercase;
+ font-size: 80%;
+ color: #6c757d;
+}
+
+.icon {
+ @include disable-outline;
+ @include icon(22px);
+ opacity: 0.8;
+
+ &.icon-shortcuts {
+ position: relative;
+ top: -1px;
+ margin-right: 10px;
+
+ background-image: url('../../assets/images/menu/keyboard.png');
+ }
+}
+
+input[type=checkbox]{
+ position: absolute;
+ visibility: hidden;
+}
+
+label {
+ cursor: pointer;
+ text-indent: -9999px;
+ width: 35px;
+ height: 20px;
+ background: #cccccc;
+ display: block;
+ border-radius: 100px;
+ position: relative;
+ margin: 0;
+
+ &:after {
+ content: '';
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ width: 14px;
+ height: 14px;
+ background: pvar(--mainBackgroundColor);
+ border-radius: 50%;
+ transition: 0.3s ease-out;
+ }
+
+ &:active:after {
+ width: 40px;
+ }
+}
+
+input:checked + label {
+ background: pvar(--mainColor);
+
+ &:after {
+ left: calc(100% - 3px);
+ transform: translateX(-100%);
+ }