.calendar-event-preview-modal {
  .modal__content {
    display: flex;
    flex-direction: column;
    gap: $pad-large;
  }

  &__preview {
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid $ui-fleet-black-10;
    background: $core-fleet-white;
  }

  &__preview-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;

    &__square-wrapper {
      display: flex;
      height: 30px;
      align-items: center;
      gap: 10px;
    }

    &__square {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: $ui-vibrant-blue-50;
    }
    &__info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    &__title {
      font-family: Inter;
      font-size: $medium;
      line-height: 30px; /* 150% */
    }
    &__time {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  &__preview-info {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;

    &__text__user-text {
      ul {
        padding-left: 20px;
        margin-top: $pad-xxsmall;
      }
      a {
        color: $core-fleet-black;
        font-weight: normal;
        text-decoration: underline;
      }
      white-space: pre-wrap;
    }
  }

  &__preview-invitee {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }

  &__footer {
    color: $ui-fleet-black-75;
    font-size: $xx-small;
    line-height: 18px; /* 150% */
  }

  .modal-cta-wrap {
    margin-top: 0; // Defer to new gap styling
  }
}

// Pop up preview immediately.
.modal__background:has(.calendar-event-preview-modal) {
  transition: none;
  animation: none;
}
