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

.widgetCard {
  border: 1px solid colors.$gray-20;

  > .desktop {
    border-top: none !important;
  }
}

.row {
  span {
    margin: auto;
  }

  p {
    padding: layout.$spacing-02 0;
  }
}

.tooltip {
  margin: 0 (-(layout.$spacing-03)) -0.625rem;
}

.menuItem {
  max-width: none;
}

.dropdownContainer {
  min-width: max-content;
  margin-right: layout.$spacing-05;

  :global(.cds--dropdown__wrapper--inline) {
    grid-gap: 0 0.5rem;
  }
}

.buttons {
  justify-content: flex-end;
}

.tile {
  text-align: center;
  border-bottom: 1px solid vars.$ui-03;

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

.table {
  td {
    &::after {
      display: none;
    }
  }
}

.hiddenRow {
  display: none;
}

.layer {
  height: 100%;
}

.unknownOrderTypeText {
  @include type.type-style('body-compact-01');
}

.paginationContainer {
  > div {
    border-top: none !important;
  }
}

.toolBarContent {
  background-color: colors.$gray-10;

  :global(.cds--table-toolbar-content) {
    width: 100%;
  }

  :global(.cds--search) {
    width: 100%;
    max-width: none;
  }
}

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

.tileContainer {
  background-color: colors.$white-0;
  border-top: 1px solid colors.$gray-70;
  padding: layout.$spacing-11 0;
}

.emptyStateTile {
  margin: auto;
  width: fit-content;
}

.tileContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.helperText {
  @include type.type-style('helper-text-02');
}

.button {
  svg {
    fill: currentColor !important;
  }
}

.printButton {
  margin-left: 1.25rem;
  @extend .button;
}

.addButton {
  @extend .button;
}

@media print {
  html,
  body {
    margin: 0 !important;
    width: fit-content;
    padding: 0 !important;
    overflow: hidden;
    page-break-inside: avoid;
  }
}

.filterContainer {
  display: flex;
  align-items: center;
}

.inlineDateRange {
  :global(.cds--form-item) {
    margin-top: 0;
    margin-bottom: 0;
  }
  :global(.cds--date-picker-container) {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    grid-column-gap: layout.$spacing-03;
  }
  :global(.cds--label) {
    @extend .helperText;
    margin-right: 0;
    margin-bottom: 0;
  }
}