/* Bottom right panel of help buttons */
.help {
  position: fixed;
  bottom: 1rem;
  right: 0.4rem;
  z-index: 11;

  @media (max-width: 39.95em) { right: 0; }
  @media (min-width: 60em) { right: 1.6rem; }

  .body--no-help & { display: none; }
}

.help__wrapper {
  display: inline-flex;
  align-items: flex-start;
}

@keyframes pulse-background {
  0% { background-size: 1% 0.1em; }
  100% { background-size: 200% 100em; }
}

.help__wrapper--loading {
  --size: 4rem;

  pointer-events: none;

  &::after {
    animation: pulse-background 1s ease infinite;
    animation-delay: 0.2s;
    background: url("/assets/icons/loader-3b324647.svg") center / 0.1em no-repeat;
    border-radius: 100%;
    content: '';
    height: var(--size);
    left: 50%;
    margin: -2rem 0 0 -2rem;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    width: var(--size);
    z-index: 1;
  }

  .help__button {
    opacity: 0.2;
  }
}

.help__button {
  width: 3rem;
  height: 3rem;
  min-width: inherit;
  background-color: transparent;

  &::before { background-size: 50%; }
}