:root {
  --mode-font-size: 13px;
  --mode-font-color: #424242;
  --mode-font-weight: 500;
  --mode-switch-width: 140px;
  --mode-switch-height: 33px;
  --mode-switch-bg: #E0E0E0;
  --mode-switch-radius: 26px;
  --mode-switch-transition: all 0.3s ease;
  --mode-switch-shadow: 0px 0px 6px -2px #111;
  --mode-inner-font-size: 12px;
  --mode-inner-font-weight: 500;
  --mode-inner-top: 3px;
  --mode-inner-right: 20px;
  --mode-inner-left: 20px;
  --mode-switch-checked-bg: #151515;
  --mode-switch-checked-inner-bg: #3c3c3c;
  --mode-dark-preview-bg: #0d0d0d;
  --mode-white-preview-bg: #fff;
  --mode-svg-sun: #dd0000;
  --mode-svg-moon: #FFA500;
  --mode-svg-moon-path: #000;
  --animation-duration: 0.6s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mode-bi.mode-bi-sun-fill {
  fill: var(--mode-svg-sun);
}

.mode-bi.mode-bi-moon-stars-fill {
  fill: var(--mode-svg-moon);
}

.mode-bi.mode-bi-moon-stars-fill path:nth-child {
  fill: var(--mode-svg-moon-path);
}

.mode-btn-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.mode-btn-container i {
  display: inline-block;
  position: relative;
  top: -9px;
}

.mode-switch {
  font-size: var(--mode-font-size);
  color: var(--mode-font-color);
  font-weight: var(--mode-font-weight);
}

.mode-btn-color-mode-switch {
  display: inline-block;
  margin: 0px;
  position: relative;
}

.mode-btn-color-mode-switch > .mode-btn-color-mode-switch-inner {
  margin: 0px;
  width: var(--mode-switch-width);
  height: var(--mode-switch-height);
  background: var(--mode-switch-bg);
  border-radius: var(--mode-switch-radius);
  overflow: hidden;
  position: relative;
  transition: var(--mode-switch-transition);
  display: block;
}

.mode-btn-color-mode-switch > .mode-btn-color-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  font-size: var(--mode-inner-font-size);
  font-weight: var(--mode-inner-font-weight);
  top: var(--mode-inner-top);
  right: var(--mode-inner-right);
  cursor: pointer;
}

.mode-btn-color-mode-switch > .mode-btn-color-mode-switch-inner:after {
  content: attr(data-off);
  width: 70px;
  height: fit-content;
  background: #fff;
  border-radius: var(--mode-switch-radius);
  position: absolute;
  left: 2px;
  top: 2.2px;
  text-align: center;
  transition: var(--mode-switch-transition);
  box-shadow: var(--mode-switch-shadow);
  padding: 0px;
  cursor: pointer;
}

.mode-btn-color-mode-switch > .mode-alert {
  display: none;
  background: #FF9800;
  border: none;
  color: #fff;
}

.mode-btn-color-mode-switch input[type="checkbox"] {
  cursor: pointer;
  width: 50px;
  height: 25px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0px;
}

.mode-btn-color-mode-switch input[type="checkbox"]:checked + .mode-btn-color-mode-switch-inner {
  background: var(--mode-switch-checked-bg);
  color: #fff;
  animation: fadeIn var(--animation-duration);
}

.mode-btn-color-mode-switch input[type="checkbox"]:checked + .mode-btn-color-mode-switch-inner:after {
  content: attr(data-on);
  left: 68px;
  background: var(--mode-switch-checked-inner-bg);
}

.mode-btn-color-mode-switch input[type="checkbox"]:checked + .mode-btn-color-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: var(--mode-inner-left);
}

.mode-btn-color-mode-switch input[type="checkbox"]:checked ~ .mode-alert {
  display: block;
}

.mode-dark-preview {
  background: var(--mode-dark-preview-bg);
}

.mode-white-preview {
  background: var(--mode-white-preview-bg);
}

.mode-btn-color-mode-switch input:focus-visible + .mode-btn-color-mode-switch-inner {
  outline: 3px solid #d51709;
  outline-offset: -2px;
  border-radius: 16px;
  animation: focusPulse 0.4s cubic-bezier(.2,.7,.3,1);
}