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

.container {
  flex-grow: 1;
}

/* Tablet viewport */
:global(.omrs-breakpoint-lt-desktop) {
  // The card containing the dropdown element should be the first to overflow on tablet
  .cardWithChildren {
    order: 3;
  }
}

.tileContainer {
  border: 0.0625rem solid $ui-03;
  height: 10.875rem;
  padding: spacing.$spacing-05;
  margin: spacing.$spacing-03 spacing.$spacing-03;
}

.tileHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: spacing.$spacing-03;
}

.headerLabel {
  @include type.type-style('heading-compact-01');
  color: $text-02;
}

.totalsLabel {
  font-weight: bold !important;
  @include type.type-style('label-01');
  color: $text-02;
}

.totalsValue {
  @include type.type-style('heading-04');
  color: $ui-05;
}

.headerLabelContainer {
  display: flex;
  height: spacing.$spacing-07;

  :global(.cds--dropdown__wrapper--inline) {
    gap: 0;
    margin-top: -0.75rem;
  }

  :global(.cds--list-box__menu-icon) {
    height: 1rem;
  }
}

.link {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: $interactive-01;

  svg {
    margin-left: spacing.$spacing-03;
  }
}

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

.valueInnerContainer {
  display: flex;
}

.valueStatus {
  padding-left: 0.5rem;
}

.status {
  display: flex;
  align-items: start;
  margin-right: 10px;
}

.statusValue {
  margin: 0 5px 0 0;
  font-size: 0.8em;
}

.statusLabel {
  margin: 0;
  font-size: 0.8em;
}

.statusOrange {
  color: colors.$orange-30;
}

.statusGreen {
  color: colors.$green-50;
}

.statusBlue {
  color: colors.$blue-30;
}