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

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

.heading:after {
  content: '';
  display: block;
  width: layout.$spacing-07;
  padding-top: 0.188rem;
  border-bottom: 0.375rem solid var(--brand-03);
}

.mainContainer {
  padding-bottom: layout.$spacing-06;
  background: $ui-01;
  display: flex;
  justify-content: center;
}

.title {
  padding: layout.$spacing-05;
  font-size: 1.2rem;
}

.desktopContainer {
  width: 50%;
}

.tabletContainer {
  width: 90%;
}

.cohortBuilder {
  :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
    width: auto;
  }

  :global(.cds--tab-content) {
    width: 100% !important;
    padding: 0;
  }

  :global(.cds--tab--list) {
    flex-direction: column;
    max-height: 30rem;
  }

  :global(.cds--tabs) {
    width: auto;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  :global(.cds--tabs__panel) {
    height: 100%;
    overflow-y: auto;
  }

  :global(.cds--tabs .cds--tabs__nav-link) {
    border-bottom: 0;
    border-left: 3px solid $ui-03;
    line-height: 3.5;
  }

  :global(.cds--tabs .cds--tabs__nav-item--selected) {
    border-left: 3px solid var(--brand-03);
    border-bottom: 0;
    font-weight: 600;
  }

  :global(.cds--tabs__nav-link) {
    &:active,
    &:focus {
      outline: 0 !important;
      outline-offset: 0 !important;
    }

    max-height: layout.$spacing-10;
  }

  :global(.cds--col) {
    padding-left: 0;
    width: 100%;
  }
}

.tabletTab {
  width: 25%;
}

.desktopTab {
  width: 20%;
}

.tab {
  display: flex;
}

.tabContainer {
  background: white;
  padding-left: layout.$spacing-06;
  padding-right: layout.$spacing-05;
  padding-top: layout.$spacing-05;
  margin-bottom: layout.$spacing-05;
}

.optionCell {
  padding: 0 !important;
}

.optionHeader {
  width: layout.$spacing-06 !important;
}

.text {
  font-size: 0.9rem;
  padding: layout.$spacing-03;
}