/* Style rules for SearchKit Admin
   Forked on 19 July 24. Called on SearchKit pages
   Status: merged */

/* Sortable headers */
.crm-search-display th.crm-sortable-col {
  cursor: var(--crm-hover-clickable);
  white-space: nowrap;
}
.crm-search-display th.crm-sortable-col span {
  white-space: break-spaces;
  word-wrap: initial;
}
.crm-search-display th i.fa-sort-desc,
.crm-search-display th i.fa-sort-asc {
  color: var(--crm-c-primary);
}
.crm-search-display th:not(:hover) i.fa-sort {
  opacity: .5;
}
.crm-search input.ng-invalid,
.crm-search-display input.ng-invalid,
.crm-search-task-dialog input.ng-invalid {
  border-color: var(--crm-c-warning);
}
.crm-search-display button.dropdown-toggle {
  white-space: nowrap;
  font-size: var(--crm-font-size);
}

/* Loading placeholders */
.crm-search-loading-placeholder {
  height: 2em;
  width: 80%;
  min-width: 4em;
  position: relative;
  overflow: hidden;
  background-color: rgba(0,0,0,.03);
  display: inline-block;
}
.crm-search-loading-placeholder::before {
  content: '';
  display: block;
  position: absolute;
  left: -150px;
  top: 0;
  height: 100%;
  width: 150px;
  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 50%, transparent 100%);
  animation: searchKitLoadingAnimation 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes searchKitLoadingAnimation {
  from {
    left: -150px;
  }
  to {
    left: 100%;
  }
}
.crm-search-display ul.pagination > li {
  margin: 0;
}

/* Contact page */

#mainTabContainer .crm-search-display .form-group.pull-right,
#bootstrap-theme .afform-directive .btn-group.pull-right {
  display: flex;
  gap: var(--crm-flex-gap);
  justify-content: end;
  float: inherit;
}
.crm-contact-page .crm-search-display-pager {
  padding: 0 var(--crm-r) var(--crm-r) var(--crm-r);
}
/* Inline Edit */

#bootstrap-theme .crm-search-field-editing .form-group,
#bootstrap-theme .crm-search-field-editing .radio-inline,
#bootstrap-theme .crm-search-field-editing .checkbox-inline {
  margin-bottom: 0; /* Fix for < 768px */
  display: flex; /* Stops wrap of radios */
}
.crm-editable-enabled:has(span.crm-search-field-value:empty)::before {
  content: "\f303";
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome";
  font-weight: 400;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
}
.crm-editable-enabled:has(span.crm-search-field-value:empty)::after {
  /* This is a short-term anglo-centric a11y hack for the icon added above */
  content: 'Edit';
  text-indent: -10000px;
  position: absolute;
}
.crm-container td.crm-search-field-editing.crm-search-col-type-field {
  padding-block: 0; /* Removes top/bottom padding on uneditable fields */
}
.crm-container td.crm-search-field-editing.crm-search-field-editable,
.crm-container .crm-search-field-editing .form-inline {
  padding: 0;
}
.crm-search-display-batch span.crm-form-date-wrapper {
  flex-wrap: nowrap;
  gap: 0;
}
#bootstrap-theme .crm-search-field-editing
:where(input,.select2-container):where(:not(.crm-form-date,.crm-form-time):not([type="checkbox"]):not([type="radio"])) {
  width: 12ch !important /* vs inline width */;
}
#bootstrap-theme .crm-search-field-editing .crm-ajax-select {
  width: 16ch !important /* vs inline width */;
}
#bootstrap-theme .crm-search-field-editing input[type=number] {
  width: 9ch;
}
.crm-search-display tr:has(.crm-search-field-editing) td.crm-search-ctrl-column:has(.btn-group) { /* Controls for full-row edit */
  display: inline-table;
  vertical-align: text-top;
}