@use '@carbon/layout';
@use '@carbon/colors';
@use '@carbon/type';

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

.cardItems {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: layout.$spacing-05;
  padding: layout.$spacing-03 layout.$spacing-05;
}

.cardItem {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-01;

  .title {
    @include type.type-style('heading-01');
    color: colors.$gray-70;
  }

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

.cardHeaderButtons {
  display: flex;
  gap: layout.$spacing-01;
}