/* Grid-lookup: de dropdown met een echt grid erin (GridLookupPropertyEditor). */

.pfx-gridlookup {
    width: 100%;
}

.pfx-gridlookup-dropdown .dxbl-popup-body {
    padding: 0;
}

.pfx-gridlookup-body {
    width: 100%;
}

/* De hoogte moet op het grid zelf staan: in een Blazor-popup doet RelativeSize niets. Laag houden, dit is
   een keuzelijst en geen scherm.

   Een bovengrens en geen vaste hoogte. Zonder vaste hoogte past het grid zich aan zijn rijen aan, ook met
   virtueel scrollen (DevExpress: "without a height constraint the grid adjusts its height to fit all rows").
   Met een vaste hoogte was de keuzelijst op het inlogscherm een vlak van 320 pixels met twee regels erin.

   LET OP — hier staat bewust GEEN table-layout of max-content meer. Met auto-layout meet de browser de
   kolommen opnieuw zodra er rijen bij komen of afvallen, en dan verspringen ze bij elke aanslag tijdens
   het zoeken. De kolombreedtes komen uit het model (ColumnInfo Width) en het verslepen schrijft ze daar
   ook weer naartoe; de breedte van de dropdown zelf wordt één keer bij het openen bepaald. */
.pfx-gridlookup-body .dxbl-grid {
    max-height: 320px;
}

/* Zolang de breedte nog uit de inhoud gemeten wordt (gridLookupMeasureWidth in gridlookup.js): onzichtbaar,
   maar wél opgemaakt, want anders valt er niets te meten. Zonder dit zag je de dropdown na het openen nog
   van breedte verspringen. !important omdat DevExpress tijdens het positioneren zelf aan de zichtbaarheid
   zit. */
.pfx-gridlookup-measuring {
    visibility: hidden !important;
}

/* De knoppen in het veld gebruiken de iconen van XAF (potlood, plus) en die van DevExpress zelf (het
   pijltje), zodat ze er hetzelfde uitzien als bij elke andere lookup. */
.pfx-gridlookup-button {
    min-width: 1.75rem;
}

.pfx-gridlookup-icon {
    width: 1rem;
    height: 1rem;
}

/* Zelfde maat als DevExpress hun eigen iconen geeft (--dxbl-image-height: 1rem). */
.pfx-gridlookup-button svg,
.pfx-gridlookup-button img {
    width: 1rem;
    height: 1rem;
}

/* Het pijltje in het grijs van het thema. Zonder deze regel erft de svg de tekstkleur van het veld en
   wordt hij bijna zwart, terwijl die van DevExpress grijs is. */
.pfx-gridlookup-button svg {
    color: var(--pfx-muted, #64748B);
}

/* Conditional appearance (GridLookupComponentModel.AppearanceStyle) staat als style op de DxTextBox; het
   invoervak zelf moet kleur en letterstijl daarvan overnemen. */
.pfx-gridlookup .dxbl-text-edit-input {
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
}