/* FAB (borda direita, um pouco abaixo do meio da viewport). Círculo = fundo do tema oposto; ícone = fundo do tema atual.
   --bg vem de base.css; o hex do tema oposto é repetido aqui porque o token do outro tema não é acessível. */
.fab {
  --fab-size: 50px;
  --fab-dark-bg: #131417; /* cópia de --bg no tema escuro (css/base.css) */
  --fab-light-bg: #e8eaec; /* cópia de --bg no tema claro (css/base.css) */
  --fab-bg: var(--fab-dark-bg);
  --fab-border-alpha: 70%; /* opacidade da borda sobre o fundo da página */
  position: fixed;
  top: 57%;
  right: calc(1em + env(safe-area-inset-right));
  transform: translateY(-50%);
  z-index: 50;
  width: var(--fab-size);
}
body[data-theme="dark"] .fab { --fab-bg: var(--fab-light-bg); }
.fab__main,
.fab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--bg) var(--fab-border-alpha), transparent);
  border-radius: 50%;
  background-color: var(--fab-bg);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.2s ease-out, scale 0.2s ease-out;
}
.fab__item:hover,
.fab__item:focus,
.fab__item:active {
  color: var(--bg);
  text-decoration: none;
}
.fab__item::before,
.fab__item::after { content: none; }
.fab__main,
.fab__item { width: var(--fab-size); height: var(--fab-size); }
.fab__main:hover, .fab__main:focus-visible, .fab__main:active,
.fab__item:hover, .fab__item:focus-visible, .fab__item:active {
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.3);
}
.fab__main:focus-visible,
.fab__item:focus-visible {
  outline: 2px solid var(--fab-bg);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .fab__main:focus-visible,
  .fab__item:focus-visible { scale: 1.1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fab__main:hover,
  .menu--floating--open .fab__item:hover { scale: 1.1; }
}
.fab__icon { display: block; width: 25px; height: 25px; }
.fab__icon svg { display: block; width: 100%; height: 100%; }
.fab__list {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  pointer-events: none;
}
.fab__list li {
  opacity: 0;
  transform: translateY(50px);
  visibility: hidden;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.menu--floating--open .fab__list { pointer-events: auto; }
.menu--floating--open .fab__list li {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.2s ease-out var(--fab-delay, 0s), transform 0.2s ease-out var(--fab-delay, 0s), visibility 0s;
}
.menu--floating--open .fab__list li:nth-last-child(4) { --fab-delay: 0s; }
.menu--floating--open .fab__list li:nth-last-child(3) { --fab-delay: 0.1s; }
.menu--floating--open .fab__list li:nth-last-child(2) { --fab-delay: 0.2s; }
.menu--floating--open .fab__list li:nth-last-child(1) { --fab-delay: 0.3s; }
@keyframes fab-float {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 -10px; rotate: 1deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .fab__main { animation: fab-float 2.5s ease-in-out infinite alternate; }
  .menu--floating--open .fab__main { animation-play-state: paused; }
}
@media (max-height: 560px) {
  .fab__list {
    top: 0;
    bottom: 0;
    left: auto;
    right: 100%;
    flex-direction: row-reverse;
    padding: 0 20px 0 0;
  }
  .fab__list li { transform: translateX(50px); }
  .menu--floating--open .fab__list li { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fab__list li { transform: none; }
  .menu--floating--open .fab__list li:nth-last-child(n) { --fab-delay: 0s; }
}