@use 'src/styles/abstracts' as *;

.GroupingPopover {
  width: 25rem;

  h3 {
    text-transform: uppercase;
  }

  &__container__select {
    padding: 1rem;
    &__selectedFieldsContainer {
      max-height: toRem(110px);
      overflow: auto;
      width: 100%;
    }
  }

  &__advanced__component {
    border-top: $border-main;
  }
  &__toggleMode__div {
    display: flex;
    flex-direction: column;
    border-top: $border-main;
    border-bottom: $border-main;
    padding: 1rem;
  }

  &__subtitle {
    margin-bottom: 0.75rem;
  }

  &__accordion__container {
    box-shadow: unset;
    margin: 0 !important;

    .GroupingPopover__subtitle {
      margin-bottom: unset;
    }

    .MuiAccordionSummary-expandIcon {
      padding: 0;
      transform: unset;
      margin: unset;

      &.Mui-expanded {
        transform: unset;
      }
    }

    .Mui-expanded {
      margin: 0;
    }
  }

  .MuiAccordionSummary-root {
    min-height: unset;
    height: 2.125rem;
    border-bottom: $border-main;
    padding: 0 1rem;
  }
  &__option {
    display: flex;
    width: 100%;
    overflow: hidden;
    &__label {
      margin-left: $space-xs;
      max-width: 100%;
      overflow: hidden;
      word-break: break-all;
    }
  }
}

.AdvancedPopover__container {
  width: 25rem;
}

.AdvancedPopover__paletteColors__container {
  display: flex;
  border-radius: 4px;
  width: 10.5rem;
  border-top: $border-main;
  height: 2rem;
  margin-right: 0.5rem;
  overflow: hidden;
}

.AdvancedPopover__paletteColors__colorItem {
  display: inline-block;
  flex: 1;
  height: 100%;
}
