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

.header {
  @include type.type-style('body-compact-02');
  color: $text-02;
  height: spacing.$spacing-12;
  background-color: $ui-02;
  border: 1px solid $ui-03;
  border-left: 0px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.left-justified-items {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.right-justified-items {
  @include type.type-style('body-compact-02');
  color: $text-02;
  padding-top: 1rem;
}

.page-name {
  @include type.type-style('heading-04');
}

.page-labels {
  p:first-of-type {
    margin-bottom: 0.25rem;
  }
}

.date-and-location {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 1rem;
}
.clinic {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
  margin-right: 2rem;
}

.value {
  margin-left: 0.25rem;
}

.middot {
  margin: 0 0.5rem;
}

.view {
  @include type.type-style('label-01');
}

.dropdown {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.25rem;

  :global(.cds--dropdown__wrapper--inline) {
    align-items: center;
    display: flex;
  }

  :global(.cds--list-box__menu) {
    left: -10.15rem;
  }
}