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

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.orderBasketContainer {
  margin: layout.$spacing-05;
  flex: 1;
}

.orderBasketContainer :global(.cds--btn-set .cds--btn) {
  max-width: 50%;
  height: layout.$spacing-10;
}

.orderLocationOuterContainer,
.providerSelectorContainer {
  margin-bottom: layout.$spacing-05;
}

.orderLocationContainer {
  max-height: 300px;
  overflow-y: auto;
  position: relative;
  margin-top: layout.$spacing-05;
  margin-bottom: layout.$spacing-05;
  > div {
    height: unset;
  }
}

.orderBasketSlot {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-07;
}

.orderBasketSlotTablet {
  gap: layout.$spacing-05;
}

.buttonSet {
  padding: 0;
}

.actionButton {
  height: layout.$spacing-10;
  display: flex;
  align-content: flex-start;
  align-items: baseline;
  min-width: 50%;

  :global(.cds--inline-loading) {
    min-height: layout.$spacing-05;
  }

  :global(.cds--inline-loading__text) {
    font-size: unset;
  }
}

.inlineNotification,
.actionNotification {
  max-width: unset !important;
  margin-bottom: layout.$spacing-02;
}

/* Tablet */
:global(.omrs-breakpoint-lt-desktop) {
  .container {
    height: 100%;
  }

  .buttonSet {
    padding: layout.$spacing-06 layout.$spacing-05;
    background-color: $ui-02;
  }
}

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

  .patientBanner {
    display: flex;
  }

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