/* Make the navbar theme toggle blend with the flat navbar surface:
   transparent button, themed icon, subtle hover — instead of the default
   chunky white-pill button. (The rainbow navbar gradient this was originally
   written against is gone; see the navbar re-skin block in styles.css.) */

.navbar-theme-switcher .theme-toggle-button,
body.theme-light .navbar-theme-switcher .theme-toggle-button,
body.theme-dark .navbar-theme-switcher .theme-toggle-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 18px !important;
}

.navbar-theme-switcher .theme-toggle-button:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
  transform: none !important;
}

.navbar-theme-switcher .theme-toggle-button:active {
  background: rgba(255, 255, 255, 0.32) !important;
}

.navbar-theme-switcher .theme-toggle-button .theme-icon {
  font-size: 16px;
}