[ui-whatsapp] {
  color: var(--color-on-success);
  background-color: var(--color-success);
}
[ui-whatsapp]:hover {
    background-color: color-mix(in srgb, var(--color-on-success-container) 50%, var(--color-success));
  }
/* FAB */
[ui-whatsapp][data-type="fab"] {
  position: fixed;
  z-index: 90;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background-color: #087a43;
  box-shadow: 0 3px 12px #0004;
}
[ui-whatsapp][data-type="fab"]:hover {
  background-color: #066537;
}
[ui-whatsapp][data-type="fab"]:focus-visible {
  outline: 2px solid #16251e;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 3px 12px #0004;
  }
[ui-whatsapp][data-type="fab"] > svg {
  width: 30px;
  height: 30px;
}
/* CTA */
[ui-whatsapp][data-type="cta"] {
    height: fit-content;
    justify-content: start;
    padding-block: var(--spacing-12);
  }
[ui-whatsapp][data-type="cta"] > svg {
      width: 25px;
      height: 25px;
    }
[ui-whatsapp][data-type="cta"] .info {
      display: grid;
      gap: var(--spacing-4);
    }
:is([ui-whatsapp][data-type="cta"] .info) .subtitle {
        opacity: 0.8;
        font: var(--font-body-sm);
      }