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

.labSetPanel {
  width: 100%;
  margin-bottom: layout.$spacing-05;
  border: 1px solid colors.$gray-20;
  cursor: pointer;
  text-decoration: none;
  color: $text-02;
  box-sizing: border-box;
}

.activePanel {
  border: layout.$spacing-01 solid var(--brand-03);
}

.panelHeader {
  padding: layout.$spacing-05 layout.$spacing-05 layout.$spacing-03 layout.$spacing-05;
  background-color: $ui-02;
}

.productiveHeading02 {
  @include type.type-style('heading-compact-02');
}

.panelHeader::after {
  content: '';
  display: block;
  width: layout.$spacing-07;
  padding-top: layout.$spacing-02;
  border-bottom: layout.$spacing-03 solid var(--brand-03);
}

.subtitleText {
  @include type.type-style('body-compact-01');
}

.off-scale-high,
.off-scale-low,
.critically-high,
.critically-low,
.high,
.low {
  p {
    @include type.type-style('heading-compact-01');
  }
}

.high,
.low {
  td {
    background-color: colors.$orange-10;
    border-top: 1px solid colors.$orange-20;
  }
}

.critically-high,
.critically-low {
  td {
    background-color: colors.$red-20;
    border-top: 1px solid colors.$red-20-hover;
  }
}

.off-scale-low {
  span {
    font-weight: 600;
  }
  span::after {
    content: ' ↓↓↓';
  }
}

.off-scale-high {
  span {
    font-weight: 600;
  }
  span::after {
    content: ' ↑↑↑';
  }
}

.critically-low {
  span {
    font-weight: 600;
  }
  span::after {
    content: ' ↓↓';
  }
}

.critically-high {
  span {
    font-weight: 600;
  }
  span::after {
    content: ' ↑↑';
  }
}

.low {
  span {
    font-weight: 600;
  }
  span::after {
    content: ' ↓';
  }
}

.high {
  span {
    font-weight: 600;
  }
  span::after {
    content: ' ↑';
  }
}

.table {
  table-layout: fixed;
  width: 100%;

  tbody .col-testName {
    color: colors.$blue-60;
  }
}

.tableWithRange {
  .col-testName {
    width: 36%;
  }

  .col-resultDate {
    width: 22%;
  }

  .col-value {
    width: 17%;
  }

  .col-referenceRange {
    width: 25%;
  }
}

.tableWithoutRange {
  .col-testName {
    width: 50%;
  }

  .col-resultDate {
    width: 22%;
  }

  .col-value {
    width: 28%;
  }
}