@use '@carbon/colors';
@use '@carbon/layout';
@use '@carbon/type';
@use '@openmrs/esm-styleguide/src/vars' as *;
@import '~@carbon/charts/styles.css';

.container {
  width: 100%;

  :global(.cds--cc--area path.area) {
    stroke: none;
    fill: colors.$green-20;
  }
}

.ui-shell-header-modal-bar-default {
  height: layout.$spacing-09;
  object-fit: contain;
  background-color: colors.$teal-70;
  color: white;
  padding-top: layout.$spacing-05;
  padding-left: layout.$spacing-05;
  display: flex;
}

.content {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-grow: 1;
}

.title {
  @include type.type-style('heading-compact-02');
  color: $text-02;
  margin-right: layout.$spacing-02;
}

.reference-range {
  @include type.type-style('helper-text-01');
}

.header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background: white;
  border-bottom: 1px solid $ui-03;
  padding: layout.$spacing-04 0;
}

.loadingHeader {
  padding: layout.$spacing-04 layout.$spacing-05 0;
}

.loadingTabs {
  padding: layout.$spacing-04 layout.$spacing-05;
}

.loadingChart {
  height: 400px;
  margin: 0 layout.$spacing-05 layout.$spacing-03;
  background: white;
  border-radius: 4px;
  width: auto;
}

.backButton {
  align-items: center;
  display: flex;
  justify-content: flex-start;

  a {
    text-decoration: none;
  }

  button {
    display: flex;

    svg {
      order: 1;
      margin-right: layout.$spacing-03;
    }

    span {
      order: 2;
    }
  }
}

.inlineLoader {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: layout.$spacing-05;
}

.background {
  width: 100%;
  padding: 0 layout.$spacing-05 layout.$spacing-03;
  background: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  :global(.cds--cc--chart-holder) {
    min-height: 400px;
  }
}

.range-tabs :global(.cds--tabs--scrollable__nav-link) {
  width: 7rem;
}

.tabPanel {
  :global(.cds--tab--list) {
    width: 100%;
  }
}

.show-hide-table {
  margin-top: layout.$spacing-04;
  margin-bottom: layout.$spacing-04;
  width: 100%;
  justify-content: center;
}

.tableControls {
  margin-top: layout.$spacing-05;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.background :global(.cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options) {
  // Carbon charts always left-align the overflow menu; override to align with the trigger inside this modal.
  inset-inline-start: auto !important;
  inset-inline-end: 0;
  width: auto;
  min-width: 0;
  margin-top: layout.$spacing-03;
}

.background
  :global(.cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__option) {
  inline-size: auto;
}

.background :global(.cds--chart-holder .cds--cc--toolbar .cds--overflow-menu-options .cds--overflow-menu-options__btn) {
  max-inline-size: none !important;
}