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

.patientSearchContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.patientBannerContainer {
  display: flex;
  flex-direction: column;
  background-color: $ui-01;
  border-top: 1px solid $ui-03;
  border-bottom: 1px solid $ui-03;
}

.patientBanner {
  text-decoration: none;
  display: grid;
  grid-template-columns: 5.5rem 1fr; // Matches 3.5rem avatar + 2×1rem margins
}

.patientPhoto {
  width: 3.5rem;
  height: 3.5rem;
  margin: layout.$spacing-05;
  border-radius: 1px;
}

.backButton {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin: layout.$spacing-03 0;
  @include type.type-style('body-compact-01');

  button {
    display: flex;

    svg {
      order: 1;
      margin-right: layout.$spacing-03;
      margin-left: 0 !important;
      fill: $color-blue-60-2 !important;
    }

    span {
      order: 2;
    }
  }
}

.noVisitContainer {
  margin: layout.$spacing-05;
}

.toggleContactDetailsButton {
  > svg {
    fill: $color-blue-60-2 !important;
  }
}