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

.subHeading {
  @include type.type-style('label-01');
  color: var(--text-02);
}

.emptyText {
  padding: layout.$spacing-05;
  @include type.type-style('body-02');
}

.unit {
  @include type.type-style('body-compact-01');
  color: var(--text-02);
  margin-left: layout.$spacing-02;
}

.vitalValues {
  @include type.type-style('body-compact-02');
  color: $ui-05;
  margin-left: layout.$spacing-02;
}

.grid {
  padding-left: 0;
}

.vitalValuesWrapper {
  display: flex;
  align-items: center;
}

.notification {
  fill: $danger;
}

.danger-icon {
  color: $danger;
  height: layout.$spacing-02;
  width: layout.$spacing-02;
  margin-left: layout.$spacing-02;
}

.iconWrapper {
  margin-left: layout.$spacing-02;
}

.critically-low,
.critically-high,
.low,
.high {
  &::after {
    @include type.type-style('heading-compact-01');
  }
}

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

.critically-low::after {
  content: ' ↓↓';
}

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

.critically-high::after {
  content: ' ↑↑';
}

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

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: layout.$spacing-02 layout.$spacing-03;
}

.tile {
  background-color: $ui-02;
}