/* Styles for the search modal. It is opened both as a modal and as a route view, not as a component, so every
   rule hangs from the '.search-modal' root class to scope it and to outweigh generic classes on the same element
   (e.g. .panel-md). */

.search-modal {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  font-size: var(--md-font-size-4);
}

.search-modal .search-modal__heading {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
}

/* Title rows: modal header and side drawers */
.search-modal .search-modal__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* No top margin on the drawer titles: Bootstrap's h3 margin-top pushed them off the buttons' centre line. The
   bottom one stays as the gap to the drawer content. */
.search-modal .search-modal__drawer-title {
  margin-top: var(--md-spacing-none);
}

.search-modal .search-modal__title-actions {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

/* Simple and advanced search */
.search-modal .search-modal__search {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
}

.search-modal .search-modal__search-row {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

.search-modal .search-modal__search-input {
  flex: 1;
}

/* Results */
.search-modal .search-modal__summary {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}

.search-modal .search-modal__list-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}

.search-modal .search-modal__body {
  max-height: 48vh;
  overflow: auto;
}

/* Empty state: no search done yet, or no results */
.search-modal .search-modal__empty {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-xs);
  padding: var(--md-spacing-xl);
  color: var(--md-content-disabled);
}

.search-modal .search-modal__empty-icon {
  font-size: 96px; /* no token: the font-size ramp jumps from 80px to 104px */
}

.search-modal .search-modal__empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

.search-modal .search-modal__empty-title,
.search-modal .search-modal__empty-description {
  font-size: var(--md-font-size-7);
}

.search-modal .search-modal__empty-title {
  font-weight: var(--md-font-weight-bold);
}

.search-modal .search-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--md-spacing-xs);
}

/* Selected records drawer */
.search-modal .search-modal__selection {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--md-spacing-sm);
}

.search-modal .search-modal__selection-count {
  padding: var(--md-spacing-3xs);
  color: var(--md-color-neutral-30);
}

.search-modal .search-modal__selection-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
  overflow: auto;
}

.search-modal .search-modal__selection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--md-spacing-xs);
}

.search-modal .search-modal__selection-record {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-xs);
}

/* Description level badge */
.search-modal .search-modal__level {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--md-radius-circle);
  font-weight: var(--md-font-weight-bold);
  color: var(--md-content-primary-inverse);
  background: var(--md-color-blue-50);
}