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

.widgetContainer {
  background-color: colors.$white;
  border: layout.$spacing-01 solid colors.$gray-20;
  margin-bottom: layout.$spacing-02;
}

.dropDownFilter {
  margin-right: layout.$spacing-03;
  min-width: 200px;
  text-align: start;
}

.widgetContainer :global(.cds--data-table) thead th button span {
  height: unset !important;
}

.tile {
  text-align: center;
  border: 1px solid colors.$gray-20;
  margin: layout.$spacing-03;
}

.content {
  @include type.type-style('heading-compact-01');
  color: colors.$gray-70;
  margin-top: layout.$layout-05;
  margin-bottom: layout.$spacing-03;
}

.desktopHeading,
.tabletHeading {
  text-align: left;
  text-transform: capitalize;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

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

    &:after {
      content: '';
      display: block;
      width: layout.$spacing-01;
      padding-top: layout.$spacing-03;
      border-bottom: layout.$spacing-01 solid;
      @include brand-03(border-bottom-color);
    }
  }
}

.btnSet {
  flex-flow: row wrap;
  gap: layout.$spacing-03;
}

.btn {
  padding-left: layout.$spacing-05;
  padding-right: layout.$spacing-05;
}

.sectionHeader {
  @include type.type-style('heading-02');
}

.modalQuiz {
  margin-bottom: layout.$spacing-05;
}

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

.buttonSet {
  padding: 0rem;
  margin-top: layout.$spacing-05;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: layout.$spacing-05;
}