.qm--color-picker{display:flex;flex-direction:column;gap:var(--layout-gap-lg);align-items:flex-start;justify-content:center;width:calc(300px + 2 * var(--layout-border-weight-xs));padding:var(--layout-padding-lg);background-color:var(--color-background-elevated);border:var(--layout-border-weight-xs) solid var(--color-border-default);border-radius:var(--layout-border-radius-sm);box-shadow:var(--shadow-md)}.qm--color-picker-header{display:flex;align-items:center;width:100%}.qm--color-picker-header-title{flex:1 0 0;color:var(--color-text-default);font-weight:var(--layout-font-weight-form-semibold);font-size:var(--layout-font-size-form-default);font-family:var(--layout-font-family-default);line-height:var(--layout-font-line-height-form-default);letter-spacing:var(--layout-font-letter-spacing-form-default)}.qm--color-picker-header-close{color:var(--color-icon-default)}.qm--color-picker-header-close:hover{color:var(--color-icon-neutral-hover)}.qm--color-picker-content{display:flex;flex-direction:column;gap:var(--layout-gap-lg);align-items:center;width:100%}.qm--color-picker-content .react-colorful{gap:var(--layout-gap-lg);width:100%!important;height:auto!important}.qm--color-picker-content .react-colorful__saturation{height:220px;border-radius:var(--layout-border-radius-md);border-bottom:none}.qm--color-picker-content .react-colorful__hue{height:var(--layout-dimension-xs);border-radius:var(--layout-border-radius-sm)}.qm--color-picker-content .react-colorful__hue .react-colorful__interactive{border-radius:0}.qm--color-picker-content .react-colorful__pointer{width:var(--layout-dimension-sm);height:var(--layout-dimension-sm);border:var(--layout-border-weight-sm) solid var(--color-icon-inverted);box-shadow:0 0 2px #0000007f}.qm--color-picker-hex-input{display:flex;gap:var(--layout-gap-form-sm);align-items:center;width:100%;height:var(--layout-dimension-lg);padding:var(--layout-padding-md);background-color:var(--color-background-elevated);border:var(--layout-border-weight-xs) solid var(--color-border-default);border-radius:var(--layout-border-radius-sm);box-sizing:border-box}.qm--color-picker-hex-input:focus-within{border-color:var(--color-border-action-default)}.qm--color-picker-hex-input-prefix{display:flex;align-items:center;color:var(--color-text-subdued)}.qm--color-picker-hex-input input{flex:1 0 0;width:100%;padding:0;overflow:hidden;color:var(--color-text-default);font-weight:var(--layout-font-weight-form-regular);font-size:var(--layout-font-size-form-compact);font-family:var(--layout-font-family-default);line-height:var(--layout-font-line-height-form-compact);text-overflow:ellipsis;white-space:nowrap;background:none;border:none;outline:none}.qm--color-picker-swatches{display:flex;flex-direction:column;gap:var(--layout-gap-md);align-items:flex-start;width:100%}.qm--color-picker-swatches-label{overflow:hidden;color:var(--color-text-subdued);font-weight:var(--layout-font-weight-form-semibold);font-size:var(--layout-font-size-form-compact);font-family:var(--layout-font-family-default);line-height:var(--layout-font-line-height-body-sm);white-space:nowrap;text-overflow:ellipsis}.qm--color-picker-swatches-grid{display:flex;flex-wrap:wrap;gap:var(--layout-gap-sm);align-items:flex-start;width:100%}.qm--color-picker-swatch{width:var(--layout-dimension-lg);height:var(--layout-dimension-lg);padding:0;background:none;border:none;border-radius:var(--layout-border-radius-md);cursor:pointer;transition:transform .1s ease-out}.qm--color-picker-swatch:hover>.qm--color-picker-swatch-color{box-shadow:0 1px 2px -1px var(--color-effects-shadow-sm),0 1px 3px 0 var(--color-effects-shadow-sm);transform:scale(1.04)}.qm--color-picker-swatch.is-selected>.qm--color-picker-swatch-color{outline:var(--layout-border-weight-sm) solid var(--color-border-inverted-subtlest);outline-offset:var(--layout-border-weight-sm);box-shadow:0 1px 2px -1px var(--color-effects-shadow-sm),0 1px 3px 0 var(--color-effects-shadow-sm)}.qm--color-picker-swatch-color{width:100%;height:100%;border:var(--layout-border-weight-xs) solid var(--color-border-neutral-default);border-radius:var(--layout-border-radius-md)}.qm--color-picker-footer{display:flex;gap:var(--layout-gap-form-md);align-items:center;justify-content:flex-end;width:100%}