/* SHARED CONTROLS — the round floating buttons used for theme, language, and
 * misc toggles on both the portfolio and the blog. */

.ctrl-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: var(--blank);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.ctrl-button:hover {
  background-color: var(--burgundy);
  border-color: var(--burgundy);
}

/* Tint the language flag toward the site's text color */
.ctrl-button .flag-icon,
#language-toggle .flag-icon {
  display: block;
  filter: sepia(1) saturate(0.5) brightness(0.9) contrast(1.5);
}

.ctrl-icon {
  font-family: var(--font-symbol);
}

#back-to-top,
#back-to-top .ctrl-button,
#language-toggle,
#language-toggle .ctrl-button,
#theme-toggle,
#theme-toggle .ctrl-icon,
#music-toggle,
#music-toggle .ctrl-icon {
  -webkit-user-select: none;
  user-select: none;
}