@use '@carbon/layout';
@use '@carbon/type';
@use '@openmrs/esm-styleguide/src/vars' as *;

.searchResultsDesktop {
  height: calc(100vh - layout.$spacing-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.searchResultsTabletOrOverlay {
  height: 100%;
  margin-bottom: layout.$spacing-09;
}

.broadBottomMargin {
  margin-bottom: layout.$spacing-11;
}

.resultsHeader {
  margin: layout.$spacing-05 0 layout.$spacing-03 0;
}

.leftPaddedResultHeader {
  margin-left: layout.$spacing-05;
}

.productiveHeading02 {
  @include type.type-style('heading-02');
  align-self: center;
}

.results {
  border: 1px solid $ui-03;
}

.emptySearchResultsTile {
  text-align: center;
  margin: 0;
  padding: layout.$spacing-08 0;
}

.paddedEmptySearchResultsTile {
  margin: 0 layout.$spacing-05;
}

.emptyResultText {
  @include type.type-style('heading-02');
  color: $text-02;
  margin-top: layout.$spacing-03;
}

.actionText {
  margin-top: layout.$spacing-03;
  @include type.type-style('body-01');
  color: $text-02;
  margin: layout.$spacing-03 auto 0;
  max-width: 13.75rem;
  text-align: center;
}

.spacer {
  padding: layout.$spacing-05 0;
}

.pagination {
  @extend .spacer;
  background: $ui-01;
}

.errorMessage {
  @include type.type-style('heading-compact-02');
  margin-top: 2.25rem;
  margin-bottom: layout.$spacing-03;
}

.errorCopy {
  margin-bottom: layout.$spacing-03;
  @include type.type-style('body-01');
  color: $text-02;
}

// Refine Search Params
.advancedSearchPage {
  width: 100%;
  display: flex;
  grid-column-gap: layout.$spacing-09;
}

.dobFields {
  display: flex;
  input {
    margin-left: layout.$spacing-05;
  }
}

.identifierTypeSelect {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  & > div {
    max-width: 20rem;
  }
}
