/*
 * 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-button.xh-grouping-chooser-button {
    &--as-input {
      background-color: var(--xh-input-bg) !important;
      border: none;
      box-shadow: var(--xh-form-field-box-shadow);
      display: inline;
      overflow: hidden;
      padding-left: var(--xh-pad-px) !important;
      padding-right: var(--xh-pad-px) !important;
      text-overflow: ellipsis;
      white-space: nowrap;

      & > .xh-icon {
        color: var(--xh-text-color-muted);
      }

      // Preserve input-style box-shadow and add subtle surface highlight on hover/active —
      // Blueprint's minimal button rules set `box-shadow: none` on these states, hiding the
      // input outline in dark mode.
      &:hover {
        background-color: color-mix(in srgb, var(--xh-input-bg) 94%, gray) !important;
        box-shadow: var(--xh-form-field-box-shadow) !important;
      }

      &:active,
      &.bp6-active {
        background-color: color-mix(in srgb, var(--xh-input-bg) 88%, gray) !important;
        box-shadow: var(--xh-form-field-box-shadow) !important;
      }
    }
  }

  // Outer box is sized via layoutSupport - all nested inner elements should stretch to fill.
  .bp6-popover-target,
  .xh-grouping-chooser-button {
    width: 100%;
  }

  .bp6-popover-target span {
    position: relative;
  }

  &-popover {
    // 60/40 split in favor of favorites in left/right orientation
    &--faves-right,
    &--faves-left {
      .xh-grouping-chooser__editor {
        width: 40%;
      }
    }

    &--faves-disabled {
      .xh-grouping-chooser__editor {
        flex: 1;
      }
    }
  }

  &__list {
    margin-bottom: var(--xh-pad-half-px);
    background-color: var(--xh-bg-alt);
  }

  &__row {
    padding: var(--xh-pad-half-px) 0 var(--xh-pad-half-px) var(--xh-pad-half-px);
    display: flex;
    align-items: center;
    background-color: var(--xh-bg);
    height: 30px;

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

    &__select {
      flex: 1;

      .xh-select__control {
        cursor: pointer;
        background: none;
        box-shadow: none;
      }

      .xh-select__single-value {
        color: var(--xh-input-text-color);
      }

      &:hover {
        border-bottom: var(--xh-border-solid);
      }
    }

    &__text {
      flex: 1;
    }

    &__remove-btn {
      opacity: 0;
    }

    &:hover .xh-grouping-chooser__row__remove-btn {
      opacity: 1;
    }

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

  &__add-control {
    display: flex;
    align-items: center;
    padding: 0 var(--xh-pad-half-px);
    border-top: var(--xh-border-solid);

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      width: 20px;
      color: var(--xh-input-placeholder-text-color);
    }

    .xh-select__control {
      background: none;
      box-shadow: none;
    }
  }

  &__favorites {
    &--top {
      border-bottom: 1px solid var(--xh-popup-border-color);
    }

    &--right {
      flex: 1;
      border-left: 1px solid var(--xh-popup-border-color);
    }

    &--bottom {
      border-top: 1px solid var(--xh-popup-border-color);
    }

    &--left {
      flex: 1;
      border-right: 1px solid var(--xh-popup-border-color);
    }

    --xh-menu-border: none;

    .bp6-menu {
      padding: 0;
    }

    &__favorite {
      align-items: center;

      .xh-button {
        padding: 0 !important;
        min-width: 20px !important;
        min-height: 20px !important;
        visibility: hidden;
      }

      &:hover {
        background-color: var(--xh-bg-highlight);

        .xh-button {
          visibility: unset;
        }
      }
    }
  }
}