@import '../../styles/abstracts/variables';

.data-capture-creation-modal {
  .timezone-select--option-offset {
    margin-right: 20px;
  }
  .ant-modal-title {
    display: flex;
  }
  .ant-modal-footer {
    display: none;
  }

  .ant-modal-header {
    .atom--tag {
      margin-left: 15px;
    }
  }

  .step-1 {
    display: flex;
    flex-direction: column;
    gap: 16px;

    // TODO - Apply these styles to the version in @komi-app/components
    .timezone-select {
      ul {
        bottom: 36px; // This is just for this use case: it displays the options above the panel, so they don't go off the bottom of the page
        box-shadow: 0 0 15px rgba(0 0 0 / 15%);
        border-radius: 12px;
        min-width: 100%;
        width: max-content;
      }
    }
  }

  .image-upload {
    display: flex;
    gap: 16px;

    &--disabled {
      .image-upload-dropzone {
        pointer-events: none;
      }
    }

    .image-upload-dropzone {
      width: 80px;
      height: 80px;
      margin: 0;
    }
    .image-upload-label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }
  }
  .preview {
    .inline-message {
      margin-bottom: 16px;
    }
  }
}

.footer {
  margin-top: 24px;
  @include modalActions;
}

.signup-methods-card {
  margin-bottom: 16px;
}

.contact-data-card,
.signup-methods-card {
  .title {
    font-size: 18px;
    font-weight: 600;
  }

  .method-list {
    margin-top: 16px;
  }
}

.ant-checkbox-wrapper {
  span {
    font-size: 14px;
    font-weight: 400;
    margin-right: 4px;
  }
}

.ant-checkbox-inner,
.ant-checkbox-input {
  transform: scale(1.3);
}

.visible-toggle {
  cursor: pointer;
  display: flex;

  svg {
    margin: auto;
  }
}
.additional-contact-method-row {
  margin-bottom: 16px;
}

.additional-contact-method-row,
.contact-method-row {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  .label {
    font-size: 16px;
    font-weight: 600;
    color: #636363 !important;
  }
}

.method-list__item--dragging {
  box-shadow: $boxShadow2 !important;
  background-color: white;
  border-radius: 8px;
}

textarea {
  padding: 12px !important;
}

.date-time-fields-wrapper {
  display: flex;
  gap: 16px;

  > * {
    flex: 1;
  }
}
