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

.tableContainer :global(.cds--data-table-header) {
  padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-02 layout.$spacing-05;

  *:not(:first-child) {
    margin: layout.$spacing-02 0;
  }

  h4 {
    @include type.type-style('heading-compact-02');
    max-width: 50%;
  }
}

.tableContainer {
  &.desktop {
    h4 {
      color: $text-02;
    }
  }
}

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

.col-name {
  width: 50%;
}

.col-value {
  width: 25%;
}

.col-range {
  width: 25%;
}

.offScaleHigh,
.offScaleLow,
.criticallyHigh,
.criticallyLow,
.high,
.low {
  span {
    @include type.type-style('heading-compact-01');
  }
}

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

.criticallyHigh,
.criticallyLow {
  background-color: colors.$red-20 !important;
  border-top: 1px solid colors.$red-20-hover !important;
}

.offScaleLow {
  span::after {
    content: ' ↓↓↓';
  }
}

.offScaleHigh {
  span::after {
    content: ' ↑↑↑';
  }
}

.criticallyLow {
  span::after {
    content: ' ↓↓';
  }
}

.criticallyHigh {
  span::after {
    content: ' ↑↑';
  }
}

.low {
  span::after {
    content: ' ↓';
  }
}

.high {
  span::after {
    content: ' ↑';
  }
}