.opened-call-module {
  position: fixed;
  box-shadow: var(--shadow-fancy);
  background: var(--color-white-base);
  border-radius: var(--radius-medium);
}

.top-section,
.bottom-section {
  padding: 1rem;
}

.bottom-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.link {
  text-decoration: none;
  &:hover {
    opacity: 0.6;
  }
}

.close-button {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  /* The button needs this padding or tap-size will be too small for accesibility */
  padding: 0.5rem !important;
}

.feedback {
  padding: 1rem 0;
}

.button-icon {
  margin-right: 0.5rem;
}

.title {
  padding-right: 2rem;
}

@media (--mobile) {
  .opened-call-module {
    right: 0;
    left: 0;
    bottom: 0;
    max-width: 30rem;
    margin: auto;
  }
  .backdrop {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  .text {
    /* FIXME: ma-text should have a responsive size prop */
    font-size: 0.75rem !important;
  }
}

@media (--desktop) {
  .opened-call-module {
    right: 1rem;
    bottom: 3rem;
    width: 24rem;
  }
  .backdrop {
    display: none;
  }
}

@media (max-height: 375px) {
  .opened-call-module {
    top: 1rem;
    bottom: 1rem;
    overflow: auto;
  }
}