/* Пилюля-переключатель */
.theme-switch {
  --w: 56px;
  --h: 30px;
  --pad: 3px;

  display: inline-block;
  position: relative;
  width: var(--w);
  height: var(--h);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

.theme-switch input { display: none; }

.theme-switch .slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--h);
  transition: background .25s ease, border-color .25s ease;
  display: flex; align-items: center;
  padding: 0 var(--pad);
}

.theme-switch .slider::after {
  content: "";
  position: absolute;
  left: var(--pad); top: var(--pad);
  width: calc(var(--h) - var(--pad)*2);
  height: calc(var(--h) - var(--pad)*2);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .25s ease;
}
.theme-switch .icon { font-size: 14px; opacity: .9; }
.theme-switch .icon.sun { margin-left: calc(var(--h) + 4px); }
.theme-switch .icon.moon { margin-left: auto; margin-right: calc(var(--h) + 4px); }

.theme-switch input:checked + .slider { background: rgba(255,255,255,0.14); }
.theme-switch input:checked + .slider::after { transform: translateX(calc(var(--w) - var(--h))); }

/* Чтоб тумблер не налезал на ник/кнопки */
.navbar .theme-switch { margin-right: 4px; }
.navbar .navbar-text { white-space: nowrap; }