.color-picker{background:#fff;background-color:#36393f;border-radius:4px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;padding:16px;width:252px}.color-picker .error-message{color:#f04747;font-size:12px;margin:4px 0 0}.color-picker .colors-swatchs{display:flex;margin-bottom:8px}.color-picker .colors-swatchs .secondary-swatchs{display:grid;gap:5px;grid-template-columns:repeat(10,1fr)}.color-picker .colors-swatchs .color-swatch{align-items:center;border:0;border-radius:3px;cursor:pointer;display:flex;height:14px;justify-content:center;padding:0;position:relative;width:14px}.color-picker .colors-swatchs .color-swatch .icon{color:#fff;font-size:12px}.color-picker .colors-swatchs .color-swatch.draftbot-color{background-color:#cd6e57;flex:1;height:33px;margin-right:5px;width:auto}.color-picker .colors-swatchs .color-swatch.draftbot-color .icon{font-size:20px}.color-picker .saturation{background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent);border-radius:3px;cursor:crosshair;height:150px;overflow:hidden;position:relative;width:220px}.color-picker .saturation .saturation-pointer{border-radius:50%;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;height:6px;margin-left:-.8px;margin-top:-1.8px;position:absolute;transform:translate(-2px,-2px);width:6px}.color-picker .controls{align-items:center;display:flex;padding-top:8px}.color-picker .controls .hue-color{border-radius:10px;height:20px;margin-right:12px;overflow:hidden;position:relative;width:20px;z-index:1}.color-picker .controls .hue-slider{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);border-radius:4px;cursor:pointer;flex:1;height:100%;height:8px;margin-top:5px 2px;position:relative}.color-picker .controls .hue-slider .hue-pointer{background-color:#f8f8f8;border-radius:3px;box-shadow:0 1px 4px #0000005e;cursor:ew-resize;height:16px;position:absolute;top:0;transform:translate(-4px,-4px);width:8px;z-index:2}.color-picker input{background:#2b2f33;border:1px solid #2b2f33;border-radius:3px;color:#fff;font-size:14px;line-height:18px;margin-top:16px;outline:none;padding:12px;transition:border-color .3s ease;width:100%}.color-picker input.error{border-color:#f04747}.color-picker input:focus{border-color:#cd6e57}