/*
 * 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-filter-chooser {
  .bp6-popover-target {
    display: flex;
    flex: 1;
  }

  &__count {
    margin: 7px 4px;
    align-self: start;
  }

  // Popover mode - collapsed trigger expands into an overlaid popover.
  &--popover > .bp6-popover-target {
    display: flex;
    flex: 1;
  }

  &__trigger {
    .xh-select__value-container--is-multi {
      overflow-y: hidden !important;
    }
  }

  // Extra class names required to override the default styles of the popover.
  &__popover.bp6-popover.bp6-minimal {
    box-shadow: none;

    // Overlay the expanded input onto the collapsed 30px trigger. Offset follows Blueprint's
    // resolved placement, which flips (bottom-anchored) near the viewport's bottom edge.
    &.bp6-popover-placement-bottom {
      margin-top: -30px !important;
    }
    &.bp6-popover-placement-top {
      margin-bottom: -30px !important;
    }

    // Content is portaled out of .xh-filter-chooser - restate the flex rule so it fills the width.
    .bp6-popover-target {
      display: flex;
      flex: 1;
    }

    // Opaque bg to occlude the trigger and page beneath (--xh-input-bg is translucent in dark mode).
    .bp6-popover-content {
      background: var(--xh-bg);
    }

    .xh-select__value-container--is-multi {
      height: unset;
      line-height: unset;
    }
  }
}

.xh-filter-chooser-option {
  padding: 0 var(--xh-pad-px);

  .name {
    margin-right: var(--xh-pad-half-px);
    color: var(--xh-intent-primary);
  }

  .operator {
    margin-right: var(--xh-pad-half-px);
    color: var(--xh-text-color-muted);
    font-weight: bold;
  }

  .value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__history {
    padding: var(--xh-pad-half-px) !important;
  }

  &__history-tag {
    margin-right: var(--xh-pad-half-px);
    padding: 3px 5px;
    color: var(--xh-text-color);
    font-size: var(--xh-font-size-small-px);
    background-color: var(--xh-bg-alt);
    border: var(--xh-border-solid);
    border-radius: 2px;
  }

  &__message {
    color: var(--xh-text-color-muted);
    background: var(--xh-bg);
  }

  &__field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .prefix {
      color: var(--xh-text-color-muted);
    }

    .name {
      margin-left: var(--xh-pad-half-px);
      color: var(--xh-intent-primary);
    }

    .operators {
      margin-left: var(--xh-pad-half-px);
      color: var(--xh-text-color-muted);
    }

    .example {
      margin-left: var(--xh-pad-half-px);
      color: var(--xh-text-color-muted);
      font-weight: bold;
    }
  }

  &__minimal-field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--xh-intent-primary);
  }
}

.xh-filter-chooser-favorite-icon {
  margin-left: var(--xh-pad-half-px);
}

.xh-filter-chooser-favorite {
  align-items: center;
  max-width: 50vw;

  .xh-hbox {
    flex-wrap: wrap;
  }

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

  &__tag {
    margin: 1px 3px 0 1px;
    padding: 0 5px;
    color: var(--xh-text-color);
    font-size: var(--xh-font-size-small-px);
    background-color: var(--xh-bg-alt);
    border: var(--xh-border-solid);
    border-radius: 2px;
  }

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