@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/spacing';
@use '@carbon/colors';
@use '~@openmrs/esm-styleguide/src/vars' as *;

.desktopHeading {
  h4 {
    @include type.type-style('heading-compact-02');
    color: $text-02;
    padding-top: spacing.$spacing-02;
  }
}

.tabletHeading {
  h4 {
    @include type.type-style('heading-03');
    color: $text-02;
  }
}

.desktopHeading,
.tabletHeading {
  text-align: left;
  text-transform: capitalize;
  padding-top: spacing.$spacing-02;
}

.heading:after {
  content: '';
  display: block;
  width: 2rem;
  padding-top: 0.188rem;
  border-bottom: 0.375rem solid var(--brand-03);
}

.card {
  background-color: $ui-02;
  padding-bottom: spacing.$spacing-04;
}

.title {
  @include type.type-style('productive-heading-03');
  color: colors.$gray-100;
  margin-left: spacing.$spacing-05;
}

.label {
  font-weight: bold;
  @include type.type-style('label-01');
  color: colors.$gray-70;
}

.container {
  display: flex;
  flex-direction: row;
  padding-left: 1rem;
  flex-wrap: wrap;
}

.value {
  @include type.type-style('body-short-02');
  color: colors.$gray-100;
}

.content {
  width: 30%;
  margin: spacing.$spacing-03 0;

  & > p:first-child {
    @include type.type-style('label-01');
    color: colors.$gray-70;
    margin-bottom: spacing.$spacing-02;
  }

  & span {
    @include type.type-style('body-short-02');
    color: colors.$gray-100;
  }
}