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

.form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.grid {
  margin: layout.$spacing-05 layout.$spacing-05;
  padding: layout.$spacing-05 0 0 0;
}

.button {
  height: layout.$spacing-10;
  display: flex;
  align-content: flex-start;
  align-items: baseline;
  min-width: 50%;
}

.buttonSet {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.datePickerInput span,
.datePickerInput div,
.datePickerInput input,
.datePickerInput {
  min-width: 100%;
}

.title {
  @include type.type-style('heading-02');
  padding: layout.$spacing-03;
}

.heading {
  text-align: left;
  text-transform: capitalize;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: layout.$spacing-03 0 layout.$spacing-03 0;

  h4 {
    @include type.type-style('heading-compact-02');
    color: colors.$gray-70;

    &:after {
      content: '';
      display: block;
      width: 2rem;
      padding-top: 3px;
      border-bottom: 0.375rem solid;
      @include brand-03(border-bottom-color);
    }
  }
}

.btnSet {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  gap: layout.$spacing-03;
  align-items: center;
  margin-top: layout.$spacing-03;
}

.textHeading {
  font-weight: bold;
}

.statusLabel {
  display: flex;
  flex-direction: row;
  margin-bottom: layout.$spacing-05;
}

.statusBody {
  display: flex;
  justify-content: space-between;
  align-items: center;
}