.sKJ10a_wrapper{flex-direction:column;gap:4px;min-width:0;display:flex}.sKJ10a_label{font-family:Inter,sans-serif;font-size:var(--text-sm);font-weight:var(--font-weight-normal);line-height:var(--leading-sm);color:var(--text-secondary);padding-bottom:2px}.sKJ10a_controls{align-items:center;gap:6px;display:flex}.sKJ10a_size-sm .sKJ10a_trigger{height:24px;padding:0 3px}.sKJ10a_size-sm .sKJ10a_swatch{width:16px;height:16px}.sKJ10a_size-sm .sKJ10a_hexValue,.sKJ10a_size-sm .sKJ10a_opacityValue{font-size:12px}.sKJ10a_trigger{background:var(--bg-surface-1);border:.5px solid var(--border-2);cursor:pointer;border-radius:8px;flex-shrink:0;align-items:center;gap:0;width:148px;max-width:148px;height:32px;padding:0 4px;transition:border-color .15s;display:flex;overflow:hidden;box-shadow:inset 0 1px 2px #3232320a}.sKJ10a_trigger:hover{border-color:var(--border-3)}.sKJ10a_variant-surface .sKJ10a_trigger{background:var(--bg-surface-2);border:.5px solid var(--border-3)}.sKJ10a_variant-surface .sKJ10a_colorSection{border-right-color:var(--border-3)}.sKJ10a_colorSection{border-right:1px solid var(--border-2);flex-shrink:0;align-items:center;gap:8px;max-width:90px;padding-right:8px;display:flex;overflow:hidden}.sKJ10a_colorSectionGradient{width:auto}.sKJ10a_swatch{border-radius:4px;flex-shrink:0;width:20px;height:20px}.sKJ10a_hexValue{font-family:Inter,sans-serif;font-size:var(--text-sm);font-weight:var(--font-weight-normal);line-height:var(--leading-sm);color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.sKJ10a_hexValueUppercase{text-transform:uppercase}.sKJ10a_opacitySection{flex-shrink:0;align-items:center;gap:2px;padding-left:8px;padding-right:4px;display:flex}.sKJ10a_opacityValue,.sKJ10a_opacityPercent{font-family:Inter,sans-serif;font-size:var(--text-sm);font-weight:var(--font-weight-normal);line-height:var(--leading-sm);color:var(--text-secondary)}.sKJ10a_pickerPopover{z-index:2147483647}.sKJ10a_pickerContent{flex-direction:column;gap:16px;display:flex}.sKJ10a_presetsSection{gap:16px;display:flex}.sKJ10a_currentColorWrapper{flex-shrink:0}.sKJ10a_currentColor{border:1px solid var(--border-2);border-radius:6px;width:40px;height:40px;position:relative}.sKJ10a_addPresetButton{background:var(--core-white);border:1px solid var(--border-2);cursor:pointer;color:var(--text-secondary);border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;padding:0;transition:background-color .15s,color .15s;display:flex;position:absolute;bottom:-4px;right:-4px}.sKJ10a_addPresetButton:hover{background:var(--core-neutral-50);color:var(--text-primary)}.sKJ10a_presetColors{flex-wrap:wrap;flex:1;gap:6px;display:flex}.sKJ10a_presetSwatch{border:1px solid var(--border-2);cursor:pointer;border-radius:4px;width:24px;height:24px;padding:0;transition:border-color .15s,transform .1s}.sKJ10a_presetSwatch:hover{transform:scale(1.1)}.sKJ10a_presetSwatchActive{border-color:var(--core-purple-500);box-shadow:0 0 0 2px var(--core-purple-100)}.sKJ10a_dynamicTrigger{border:.5px solid var(--border-3);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:background-color .15s,transform .15s;display:flex;box-shadow:inset 0 1px 2px #3232320a}.sKJ10a_dynamicTrigger:hover{background-color:var(--bg-surface-2)}.sKJ10a_dynamicTrigger:active{transform:scale(.98)}.sKJ10a_dynamicTrigger-base{background-color:var(--core-white)}.sKJ10a_dynamicTrigger-surface{background:var(--core-surface-1);border:.5px solid var(--border-3);transition:filter .15s;box-shadow:inset 0 0 2px #3232320a;&:hover{filter:brightness(.97)}}.sKJ10a_dynamicTriggerDisabled{border:.5px solid var(--border-3);background-color:var(--core-white);opacity:.7;cursor:not-allowed;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex;box-shadow:inset 0 0 1px 1px #ffffff14,0 .5px 1.5px #00000012}.sKJ10a_dynamicTriggerDisabled svg{color:var(--core-neutral-400)}.sKJ10a_dynamicPopover{flex-direction:column;gap:12px;min-width:200px;display:flex}.sKJ10a_dynamicCustom{flex-direction:column;gap:6px;margin-top:4px;display:flex}.sKJ10a_dynamicCustomLabel{color:var(--text-secondary);font-family:Inter,sans-serif;font-size:12px;line-height:1}