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

.buttonSection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.testsOrderedActions {
  display: flex;
  justify-content: flex-end;
  padding: layout.$spacing-03 0;
  width: 100%;
}

.menuLink {
  display: inline-flex;
}

.orderDetailsContainer {
  width: 80%;
  display: flex;
  flex-direction: column;
  background-color: colors.$white-0;
  padding: layout.$spacing-03;
  gap: layout.$spacing-03;
  margin-bottom: layout.$spacing-05;
}

.orderDetailsContainer:last-child {
  margin-bottom: 0;
}

.orderDetailsRow {
  &:first-child {
    border-top: none !important;
  }
}

.orderDetailsWrapper {
  :global(.cds--structured-list-td) {
    align-content: center;
    padding: layout.$spacing-03 !important;
  }
}

.textBold {
  font-weight: bold;
}

.orderDetailsTextBold {
  @extend .textBold;
}

.labResultSlot {
  text-align: center;
  margin-bottom: layout.$spacing-03;
}

.accordionTitle {
  @extend .textBold;
}

.instructionLabelContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pill {
  @include type.type-style('label-01');
  display: inline-block;
  background-color: colors.$gray-20;
  border-radius: layout.$spacing-03;
  padding: layout.$spacing-02;
  padding-inline: layout.$spacing-03;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priorityPill {
  @extend .pill;

  &[data-urgency='ROUTINE'] {
    background-color: colors.$green-20;
  }

  &[data-urgency='ON SCHEDULED_DATE'] {
    background-color: colors.$red-20;
  }
}

.statusPill {
  @extend .pill;

  &[data-status='RECEIVED'] {
    background-color: colors.$blue-20;
  }

  &[data-status='IN PROGRESS'] {
    background-color: colors.$cyan-20;
  }

  &[data-status='ON HOLD'] {
    background-color: colors.$teal-20;
  }

  &[data-status='EXCEPTION'] {
    background-color: colors.$magenta-20;
  }

  &[data-status='COMPLETED'] {
    background-color: colors.$green-20;
  }

  &[data-status='DISCONTINUED'],
  &[data-status='DECLINED'],
  &[data-status='Order not picked'] {
    background-color: colors.$red-20;
  }
}