/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */
.xh-grouping-chooser {
  .xh-grouping-chooser-button {
    width: 100%;
    justify-content: flex-start;

    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &__editor {
    .xh-panel__content {
      padding: var(--xh-pad-px);
    }
  }

  &__row {
    display: flex;
    align-items: center;
    background-color: var(--xh-bg);
    height: 45px;
    flex-shrink: 0;

    &__grabber {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
    }

    &__select {
      flex: 1;
      border-bottom: var(--xh-border-solid);

      .xh-select {
        border: none;
      }
    }

    &--dragging {
      top: unset !important;
      left: unset !important;
      border: var(--xh-border-solid);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
  }

  &__add-control {
    // Align with already-added level controls.
    padding: 5px 40px 5px 30px;
  }

  &__favorites {
    // Fix at 50% of dialog height, preventing panel's default flex:auto
    flex: none !important;
    height: 50%;

    // Section heading style for internal title (like colChooser)
    .xh-panel-header {
      background-color: var(--xh-appbar-bg);
      color: var(--xh-appbar-title-color);
      padding-left: var(--xh-pad-px);
    }

    .xh-panel__content {
      padding: var(--xh-pad-px);
    }

    // Empty state placeholder - don't flex as it pushes add button down.
    .xh-placeholder {
      flex: none;
      margin: var(--xh-pad-px);
    }

    // Individual favorite items (hBoxes w/buttons)
    &__favorite {
      flex: none !important;
      height: 35px;
      align-items: center;

      .xh-button {
        justify-content: left;
      }
    }

    &__add-btn {
      width: 200px;
      margin: var(--xh-pad-px) auto;
    }
  }
}