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

.workLoadCard {
  display: flex;
  color: colors.$black;
}

.monthlyWorkLoadCard {
  color: #525252;
  display: flex;
  flex-wrap: wrap;
}

.workLoadContainer {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding-bottom: layout.$spacing-05;
}

.cardContainer {
  background-color: $ui-02;
  display: flex;
  height: layout.$spacing-12;
}

.tileContainer {
  padding: layout.$spacing-03;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid colors.$blue-30;

  &:first-child {
    border-left-width: 1px;
  }

  & label {
    color: colors.$gray-70;
  }
}

.tileHeader {
  display: flex;
  justify-content: space-between;
  padding-bottom: layout.$spacing-05;
}
.dayLabel {
  @include type.type-style('heading-compact-01');
  color: colors.$blue-30;
  text-decoration: underline;
  border-bottom: 5px;
}

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

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

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

.headerLabelContainer {
  display: flex;
  align-items: center;
  height: layout.$spacing-07;
}

.link {
  text-decoration: none;
}

.activeWorkloadCard {
  background-color: colors.$blue-10;

  & label {
    color: colors.$blue-60;
  }
}