@layer components {
  .whatsapp-button {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    border-radius: 9999px;
    background: #25d366;
    box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
    transition: transform 150ms ease;

    &:hover {
      transform: scale(1.08);
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 4px;
    }

    & svg {
      width: 34px;
      aspect-ratio: 1;
      fill: #fff;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .whatsapp-button {
      transition: none;

      &:hover {
        transform: none;
      }
    }
  }
}