:root {
  --floating-cta-background: var(--color-static-background-light-primary);
  --floating-cta-border-radius: 50%;
  --floating-cta-dimensions: 4rem;
  --floating-cta-padding: 0.5rem;
  --floating-cta-top: calc(25vh - var(--floating-cta-dimensions) * 1.35);
  --floating-cta-left: calc(100vw - var(--floating-cta-dimensions) * 1.25);
  --floating-cta-content-right: calc(0px + var(--floating-cta-dimensions) + var(--floating-cta-padding));
}

.floating-cta {
  display: flex;
  z-index: 200;
  position: fixed;
  top: var(--floating-cta-top);
  left: var(--floating-cta-left);
  place-content: center;
  place-items: flex-end;
  width: var(--floating-cta-dimensions);
  height: var(--floating-cta-dimensions);
  transition: var(--transition-default) all;
}
@media (min-width: 576px) {
  .floating-cta {
    --floating-cta-dimensions: 6rem;
    --floating-cta-padding: 1rem;
    --floating-cta-left: calc(100vw - var(--floating-cta-dimensions) * 1.15);
    --floating-cta-content-right: calc(0px + var(--floating-cta-dimensions) + var(--floating-cta-padding));
    place-items: center;
  }
}
@media (min-width: 992px) {
  .floating-cta {
    width: var(--floating-cta-dimensions);
    height: var(--floating-cta-dimensions);
  }
}
@media (min-width: 992px) {
  .floating-cta {
    --floating-cta-top: calc(100vh - var(--floating-cta-dimensions) * 1.35);
  }
}
.floating-cta input ~ label {
  width: 100%;
  height: 100%;
  margin-bottom: 1rem;
  padding: var(--floating-cta-padding);
  border-radius: var(--floating-cta-border-radius);
  background: var(--floating-cta-background);
}
.floating-cta input ~ label .image-wrapper,
.floating-cta input ~ label img,
.floating-cta input ~ label svg {
  width: 100%;
  height: 100%;
}
@media (min-width: 576px) {
  .floating-cta input ~ label {
    margin-bottom: unset;
  }
}
.floating-cta input ~ .floating-cta--content-wrapper {
  display: flex;
  position: absolute;
  right: var(--floating-cta-content-right);
  bottom: 0px;
  flex-direction: column;
  width: 19rem;
  padding: var(--number-space-3);
  gap: var(--number-space-1);
  border: 1px solid var(--color-static-background-light-variant-30);
  border-radius: var(--number-corner-1);
  background: var(--color-static-background-light-primary);
  box-shadow: var(--shadow-10);
  text-align: right;
}
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  gap: var(--number-space-1);
}
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline .image-wrapper,
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline img,
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline svg {
  width: fit-content;
  height: 1em;
}
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline .image-wrapper.button-whatsapp,
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline img.button-whatsapp,
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline svg.button-whatsapp {
  height: 2.5em;
}
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline .image-wrapper path,
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline img path,
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline svg path {
  fill: var(--color-key-primary);
}
.floating-cta input ~ .floating-cta--content-wrapper .floating-cta--headline-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-2);
}
.floating-cta input ~ .floating-cta--content-wrapper a:hover {
  color: var(--color-key-primary);
}
.floating-cta input ~ .floating-cta--content-wrapper p {
  line-height: var(--text-line-height-variant-20);
}
.floating-cta input:not(:checked) ~ .floating-cta--content-wrapper {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  opacity: 0;
}
.floating-cta input:checked ~ .floating-cta--content-wrapper {
  clip-path: polygon(-25% -25%, 125% -25%, 125% 165%, -25% 125%);
  opacity: 1;
}

/* On scroll styles */
@media (min-width: 992px) {
  body.scroll-up .floating-cta, body.scroll-down .floating-cta {
    top: calc(100vh - var(--floating-cta-dimensions) * 1.5);
    left: calc(100vw - var(--floating-cta-dimensions) * 1.5);
  }
}