.gfgc-picker { --gfgc-trigger-bg: var( --gf-ctrl-bg-color, #ffffff );
--gfgc-trigger-color: var( --gf-ctrl-color, #242748 );
--gfgc-trigger-clr-hover: var( --gfgc-trigger-color );
--gfgc-trigger-clr-focus: var( --gfgc-trigger-color );
--gfgc-trigger-brd-clr: var( --gf-ctrl-border-color, #d0d1d3 );
--gfgc-trigger-brd-clr-hover: var( --gf-ctrl-border-color-hover, #9092b2 );
--gfgc-trigger-brd-clr-focus: var( --gf-ctrl-border-color-focus, #3985b7 );
--gfgc-trigger-brd-w: var( --gf-ctrl-border-width, 1px );
--gfgc-trigger-brd-rad: var( --gf-ctrl-radius, 4px );
--gfgc-trigger-bg-hover: var( --gf-ctrl-bg-color-hover, var( --gfgc-trigger-bg ) );
--gfgc-trigger-bg-focus: var( --gf-ctrl-bg-color-focus, var( --gfgc-trigger-bg ) );
--gfgc-trigger-pad-v: 0px;
--gfgc-trigger-pad-h: 16px;
--gfgc-trigger-min-h: 44px; --gfgc-panel-zindex: 40;
--gfgc-panel-gap: 12px;
--gfgc-panel-bg: var( --gf-ctrl-bg-color, #ffffff );
--gfgc-panel-color: var( --gf-ctrl-color, #242748 );
--gfgc-panel-brd-clr: var( --gf-ctrl-border-color, #d0d1d3 );
--gfgc-panel-brd-w: var( --gf-ctrl-border-width, 1px );
--gfgc-panel-brd-rad: var( --gf-ctrl-radius, 4px );
--gfgc-panel-shadow: 0 1px 4px rgba( 0, 0, 0, .11 ), 0 0 4px rgba( 18, 25, 97, .04 );
--gfgc-panel-pad-v: 16px;
--gfgc-panel-pad-h: 16px;
--gfgc-panel-w: 320px;
--gfgc-panel-w-max: 320px;
--gfgc-panel-clr-desc: #5b5e80; --gfgc-btn-gap: 8px;
--gfgc-btn-bg: var( --gf-ctrl-btn-bg-color-ctrl, #f2f3f5 );
--gfgc-btn-dim: 32px;
--gfgc-btn-bg-hover: var( --gf-ctrl-btn-bg-color-hover-ctrl, var( --gfgc-btn-bg ) );
--gfgc-btn-bg-focus: var( --gf-ctrl-btn-bg-color-focus-ctrl, var( --gfgc-btn-bg ) );
--gfgc-btn-color: var( --gf-ctrl-btn-color-ctrl, #242748 );
--gfgc-btn-clr-hover: var( --gf-ctrl-btn-color-hover-ctrl, var( --gfgc-btn-color ) );
--gfgc-btn-clr-focus: var( --gfgc-btn-color );
--gfgc-btn-brd-clr: var( --gf-ctrl-btn-border-color-ctrl, transparent );
--gfgc-btn-brd-clr-hover: var( --gf-ctrl-btn-border-color-hover-ctrl, var( --gfgc-btn-brd-clr ) );
--gfgc-btn-brd-clr-focus: var( --gf-ctrl-border-color-focus, #3985b7 );
--gfgc-btn-brd-w: var( --gf-ctrl-btn-border-width-ctrl, 0px );
--gfgc-btn-brd-rad: 50%;
--gfgc-btn-disabled-opacity: 0.4; --gfgc-fs: var( --gf-ctrl-font-size, 15px );
position: relative;
font-size: var(--gfgc-fs);
color: var(--gfgc-trigger-color);
} .gfgc-picker__trigger {
display: flex;
align-items: center;
width: 100%;
min-height: var(--gfgc-trigger-min-h);
padding: var(--gfgc-trigger-pad-v) var(--gfgc-trigger-pad-h);
background: var(--gfgc-trigger-bg);
color: var(--gfgc-trigger-color);
border: var(--gfgc-trigger-brd-w) solid var(--gfgc-trigger-brd-clr);
border-radius: var(--gfgc-trigger-brd-rad);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gfgc-picker__trigger:hover {
background: var(--gfgc-trigger-bg-hover);
color: var(--gfgc-trigger-clr-hover);
border-color: var(--gfgc-trigger-brd-clr-hover);
}
.gfgc-picker__trigger:focus-visible,
.gfgc-picker__trigger[aria-expanded="true"] {
background: var(--gfgc-trigger-bg-focus);
color: var(--gfgc-trigger-clr-focus);
border-color: var(--gfgc-trigger-brd-clr-focus);
}
.gfgc-picker__trigger-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gfgc-picker__panel {
position: absolute;
top: 100%;
left: 0;
z-index: var(--gfgc-panel-zindex);
width: var(--gfgc-panel-w);
max-width: var(--gfgc-panel-w-max);
margin-top: 4px;
padding: var(--gfgc-panel-pad-v) var(--gfgc-panel-pad-h);
background: var(--gfgc-panel-bg);
color: var(--gfgc-panel-color);
border: var(--gfgc-panel-brd-w) solid var(--gfgc-panel-brd-clr);
border-radius: var(--gfgc-panel-brd-rad);
box-shadow: var(--gfgc-panel-shadow);
}
.gfgc-picker__panel[hidden] {
display: none;
}
.gfgc-picker__panel:not([hidden]) {
display: flex;
flex-direction: column;
gap: var(--gfgc-panel-gap);
}
.gfgc-picker__panel--top {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 4px;
}
.gfgc-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gfgc-panel-gap);
}
.gfgc-row__info {
display: flex;
flex-direction: column;
min-width: 0;
}
.gfgc-row__title {
font-weight: 600;
}
.gfgc-row__desc {
font-size: 0.85em;
color: var(--gfgc-panel-clr-desc);
}
.gfgc-row__controls {
display: flex;
align-items: center;
gap: var(--gfgc-btn-gap);
flex-shrink: 0;
}
.gfgc-row__btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--gfgc-btn-dim);
height: var(--gfgc-btn-dim);
padding: 0;
background: var(--gfgc-btn-bg);
color: var(--gfgc-btn-color);
border: var(--gfgc-btn-brd-w) solid var(--gfgc-btn-brd-clr);
border-radius: var(--gfgc-btn-brd-rad);
font-size: 1.1em;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gfgc-row__btn:hover {
background: var(--gfgc-btn-bg-hover);
color: var(--gfgc-btn-clr-hover);
border-color: var(--gfgc-btn-brd-clr-hover);
}
.gfgc-row__btn:focus-visible {
background: var(--gfgc-btn-bg-focus);
color: var(--gfgc-btn-clr-focus);
border-color: var(--gfgc-btn-brd-clr-focus);
}
.gfgc-row__btn:disabled {
opacity: var(--gfgc-btn-disabled-opacity);
cursor: not-allowed;
}
.gfgc-row__state {
min-width: 1.5em;
text-align: center;
font-variant-numeric: tabular-nums;
}
.gfgc-picker--empty {
padding: var(--gfgc-panel-pad-v) var(--gfgc-panel-pad-h);
color: var(--gfgc-panel-clr-desc);
border: 1px dashed var(--gfgc-panel-brd-clr);
border-radius: var(--gfgc-panel-brd-rad);
}