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

.filterSetContent {
  max-height: calc(100vh - 9.5rem);
  overflow-y: auto;

  .treeNodeHeader:first-of-type {
    padding-top: 0;
  }

  .nestedAccordion:first-of-type {
    margin-top: 0;
  }
}

// background of filter, and spacing between containers
.nestedAccordion {
  background-color: $openmrs-background-grey;
  margin: layout.$spacing-02 0;

  @media (min-width: $breakpoint-small-desktop-min) {
    margin: layout.$spacing-02 0;
  }

  :global(.cds--accordion__item) {
    border: none;
  }

  :global(.cds--accordion__item:last-child) {
    border: none;
  }
}

.treeNodeHeader {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid colors.$gray-20;
  padding: layout.$spacing-03 0;
  margin-bottom: layout.$spacing-03;
  align-items: center;
}

.treeNodeHeaderTablet {
  padding-left: layout.$spacing-05;
  margin-bottom: 0;
}

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

// our special accordion rules
.nestedAccordion > :global(.cds--accordion--start) > :global(.cds--accordion__item--active) {
  border-left: layout.$spacing-03 solid var(--brand-01);

  @media (max-width: $breakpoint-tablet-max) {
    margin: layout.$spacing-06 0;
  }
}

.nestedAccordion :global {
  // extending carbon's accordion to handle nested accordions
  // accordion content
  .cds--accordion__content {
    padding: 0;
    margin: 0;
  }

  .cds--accordion__item > .cds--accordion__content {
    display: none;
  }

  .cds--accordion__item--active > .cds--accordion__content {
    display: block;
    padding-right: layout.$spacing-05;
  }

  .cds--accordion__title {
    margin-left: layout.$spacing-04;
    @media (min-width: $breakpoint-small-desktop-min) {
      margin-left: layout.$spacing-03;
    }
  }

  .cds--accordion__arrow {
    margin: 0 0 0 layout.$spacing-05;
    align-self: center;
    @media (min-width: $breakpoint-small-desktop-min) {
      margin: 0 0 0 layout.$spacing-04;
    }
  }

  @media (min-width: $breakpoint-small-desktop-min) {
    .cds--accordion__item > button {
      padding: 0;
    }
  }

  // Chevron transformations
  .cds--accordion__item > button[aria-expanded='false'] > .cds--accordion__arrow {
    transform: rotate(90deg);
  }

  .cds--accordion__item--active > .cds--accordion__heading > .cds--accordion__arrow {
    /*rtl:ignore*/
    transform: rotate(-90deg);
    fill: var(--brand-01);
  }

  .cds--checkbox-label-text {
    padding-left: layout.$spacing-04;
  }
}

.filterItem {
  padding: layout.$spacing-03 layout.$spacing-05 layout.$spacing-03 layout.$spacing-03;

  @media (min-width: $breakpoint-small-desktop-min) {
    padding: layout.$spacing-02 0 layout.$spacing-02 layout.$spacing-03;
  }
}