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

.labsTabPanel {
  background-color: colors.$gray-10 !important;
}

.labTableContainer {
  border: 1px solid colors.$gray-20;
}

.priorityPill {
  @include type.type-style('label-01');
  background-color: colors.$gray-20;
  border-radius: layout.$spacing-05;
  padding: layout.$spacing-01 layout.$spacing-03;
  text-align: center;
  width: fit-content;

  // Match data attribute emitted by the component and real urgency values
  &[data-priority='routine'] {
    background-color: colors.$green-20;
  }

  &[data-priority='stat'] {
    background-color: colors.$red-20;
  }

  &[data-priority='on scheduled date'] {
    background-color: colors.$gray-20;
  }
}

.statusPill {
  @include type.type-style('label-01');
  background-color: colors.$gray-20;
  border-radius: layout.$spacing-05;
  padding: layout.$spacing-01;
  padding-inline: layout.$spacing-03;
  text-align: center;
  width: fit-content;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &[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'] {
    background-color: colors.$red-20;
  }
}