.gfpp-picker {
--gfpp-gap: 10px;
--gfpp-image-size: 48px;
--gfpp-image-radius: var( --gf-ctrl-radius, 4px );
--gfpp-image-bg: #f2f3f5;
--gfpp-title-clr: var( --gf-ctrl-color, #242748 );
--gfpp-desc-clr: #5b5e80;
--gfpp-placeholder-clr: #686e77; --gfpp-trigger-bg: var( --gf-ctrl-bg-color, #ffffff );
--gfpp-trigger-brd-clr: var( --gf-ctrl-border-color, #d0d1d3 );
--gfpp-trigger-brd-clr-hover: var( --gf-ctrl-border-color-hover, #9092b2 );
--gfpp-trigger-brd-clr-focus: var( --gf-ctrl-border-color-focus, #3985b7 );
--gfpp-trigger-brd-w: var( --gf-ctrl-border-width, 1px );
--gfpp-trigger-brd-rad: var( --gf-ctrl-radius, 4px );
--gfpp-trigger-pad-v: 8px;
--gfpp-trigger-pad-h: 16px;
--gfpp-trigger-min-height: 44px; --gfpp-panel-bg: var( --gf-ctrl-bg-color, #ffffff );
--gfpp-panel-brd-clr: var( --gf-ctrl-border-color, #d0d1d3 );
--gfpp-panel-brd-w: var( --gf-ctrl-border-width, 1px );
--gfpp-panel-brd-rad: var( --gf-ctrl-radius, 4px );
--gfpp-panel-shadow: 0 8px 24px rgba( 0, 0, 0, .12 );
--gfpp-panel-zindex: 40;
--gfpp-panel-max-height: 320px;
--gfpp-option-bg-hover: #f2f3f5;
--gfpp-option-bg-selected: #eaf1f8;
position: relative;
} .gfpp-label__wrapper {
display: flex;
align-items: center;
gap: var( --gfpp-gap );
width: 100%;
min-width: 0;
}
.gfpp-label__image {
flex: none;
width: var( --gfpp-image-size );
height: var( --gfpp-image-size );
border-radius: var( --gfpp-image-radius );
overflow: hidden;
background: var( --gfpp-image-bg );
}
.gfpp-label__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .gfpp-label__image--placeholder {
background: var( --gfpp-image-bg );
}
.gfpp-label__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
text-align: left;
}
.gfpp-label__title {
font-weight: 600; font-size: var( --gf-ctrl-label-font-size-secondary, 14px );
color: var( --gfpp-title-clr );
}
.gfpp-label__title--placeholder {
font-weight: 400;
color: var( --gfpp-placeholder-clr );
}
.gfpp-label__description {
font-size: var( --gf-ctrl-desc-font-size, .875em );
color: var( --gfpp-desc-clr ); white-space: pre-line;
} .gfpp-picker--list {
--gfpp-card-gap: 12px;
--gfpp-card-pad: 12px;
--gfpp-card-border-clr: #d2d5db;
--gfpp-card-radius: 3px;
--gfpp-card-bg: #ffffff;
--gfpp-card-shadow: 0 0 0 0 rgba( 18, 25, 97, .05 ), 0 2px 5px 0 rgba( 18, 25, 97, .1 ), 0 1px 1px 0 rgba( 18, 25, 97, .15 );
}
.gfpp-picker--list .gfield_radio,
.gfpp-picker--list .gfield_checkbox {
display: flex;
flex-direction: column;
gap: var( --gfpp-card-gap );
}
.gfpp-picker--list .gfpp-choice-card {
display: flex;
align-items: center;
gap: var( --gfpp-card-gap );
padding: var( --gfpp-card-pad );
border: 1px solid var( --gfpp-card-border-clr );
border-radius: var( --gfpp-card-radius );
background: var( --gfpp-card-bg );
box-shadow: var( --gfpp-card-shadow );
}
.gfpp-picker--list .gfpp-choice-card .gfield-choice-input {
flex: none;
margin: 0; width: var( --gf-ctrl-choice-size, 20px );
height: var( --gf-ctrl-choice-size, 20px );
}
.gfpp-picker--list .gfpp-choice-card label.gform-field-label {
display: block;
flex: 1;
min-width: 0;
cursor: pointer;
} .gfpp-picker--list .gfpp-choice-card:has( .gfield-choice-input:disabled ) {
opacity: .55;
}
.gfpp-picker--list .gfpp-choice-card:has( .gfield-choice-input:disabled ) label.gform-field-label {
cursor: not-allowed;
} .gfpp-picker--editor .gfield-choice-input {
pointer-events: none;
} .gfpp-picker--editor .gfpp-label__description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
} .gfpp-select-trigger {
display: flex;
align-items: center;
width: 100%;
min-height: var( --gfpp-trigger-min-height );
padding: var( --gfpp-trigger-pad-v ) var( --gfpp-trigger-pad-h );
background: var( --gfpp-trigger-bg );
border: var( --gfpp-trigger-brd-w ) solid var( --gfpp-trigger-brd-clr );
border-radius: var( --gfpp-trigger-brd-rad );
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.gfpp-select-trigger:hover {
border-color: var( --gfpp-trigger-brd-clr-hover );
}
.gfpp-select-trigger:focus-visible,
.gfpp-select-trigger[aria-expanded="true"] {
border-color: var( --gfpp-trigger-brd-clr-focus );
outline: 0;
box-shadow: 0 0 0 2px rgba( 57, 133, 183, .25 );
} .gfpp-select-trigger[data-multi="true"] {
align-items: flex-start;
}
.gfpp-select-trigger-list {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.gfpp-select-trigger-item:not( :last-child ) {
padding-bottom: 8px;
border-bottom: 1px solid var( --gfpp-trigger-brd-clr );
}
.gfpp-select-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var( --gfpp-panel-zindex );
margin: 4px 0 0;
padding: 6px 0;
max-height: var( --gfpp-panel-max-height );
overflow-y: auto;
list-style: none;
background: var( --gfpp-panel-bg );
border: var( --gfpp-panel-brd-w ) solid var( --gfpp-panel-brd-clr );
border-radius: var( --gfpp-panel-brd-rad );
box-shadow: var( --gfpp-panel-shadow );
}
.gfpp-select-panel[hidden] {
display: none;
}
.gfpp-select-panel--top {
top: auto;
bottom: 100%;
margin: 0 0 4px;
}
.gfpp-select-option {
display: flex;
align-items: center;
padding: 8px 16px;
cursor: pointer;
}
.gfpp-select-option:hover,
.gfpp-select-option:focus-visible {
background: var( --gfpp-option-bg-hover );
outline: 0;
}
.gfpp-select-option.-selected {
background: var( --gfpp-option-bg-selected );
} .gfpp-select-option.-disabled {
opacity: .55;
cursor: not-allowed;
}
.gfpp-select-option.-disabled:hover {
background: none;
} .gfpp-picker--empty {
padding: 10px 12px;
background: #fef8ee;
border: 1px solid #f0dfa8;
border-radius: 3px;
color: #7a5c00;
font-size: .8125rem;
}