.calendar-events-modal {
  .placeholder {
    display: flex;
    flex-direction: column;
    gap: 24px;
    line-height: 150%;

    img {
      width: 100%;
      height: 100%;
    }

    .modal-cta-wrap {
      margin-top: 0;
    }
  }
  .form-header {
    display: flex;
    justify-content: space-between;
    .button--text-link {
      white-space: nowrap;
    }
  }

  .form-fields {
    &--disabled {
      @include disabled;
    }
  }

  pre {
    box-sizing: border-box;
    margin: 0;
  }

  &__hide-main {
    visibility: hidden;
  }

  &__preview-button {
    white-space: nowrap;
  }
}

.calendar-event-preview {
  p {
    margin: 24px 0;
  }
}

.policy-row {
  &__preview-button {
    flex: 0 0 auto;
    /* This prevents growing and shrinking */
    width: fit-content;
    /* This ensures button isn't cut off */
    visibility: hidden;
  }

  &:hover {
    &__preview-button {
      visibility: visible;
    }
  }
}

// If we're hiding the modal (because the preview is showing), hide the background as well.
.modal__background:has(.calendar-events-modal.calendar-events-modal__hide-main) {
  visibility: hidden;
}
