body.theme-icr .icr-theme-toggle{
  min-width: 40px;
  height: 40px;
  padding: 0 .72rem;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);

  font-size: .86rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  cursor: pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .08s ease,
    box-shadow .16s ease;
}

body.theme-icr .icr-theme-toggle:hover,
body.theme-icr .icr-theme-toggle:focus{
  background: rgba(212,175,55,.14);
  border-color: rgba(212,175,55,.36);
  color: var(--icr-gold);
  transform: translateY(-1px);
  outline: none;
}

body.theme-icr .icr-theme-toggle:active{
  transform: translateY(0);
}

body.theme-icr .icr-theme-toggle i{
  font-size: .95rem;
  line-height: 1;
}

/* Light mode appearance */
html[data-icr-theme="light"] body.theme-icr .icr-theme-toggle{
  background: #fff8e8;
  border-color: rgba(181,139,35,.28);
  color: #6b4e16;
  box-shadow: 0 6px 16px rgba(84,65,28,.10);
}

html[data-icr-theme="light"] body.theme-icr .icr-theme-toggle:hover,
html[data-icr-theme="light"] body.theme-icr .icr-theme-toggle:focus{
  background: linear-gradient(135deg, #d4af37, #f4d77a);
  border-color: rgba(181,139,35,.55);
  color: #17140f;
}

@media (max-width: 575.98px){
  body.theme-icr .icr-theme-toggle{
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
  }
}