.color-picker-wrapper{padding:20px}.color-picker-basic-color{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}.color-picker-basic-color button{border:1px solid #ccc;border-radius:4px;height:16px;width:16px;cursor:pointer;list-style-type:none}.color-picker-basic-color button.active{box-shadow:0 0 2px 2px rgba(0,0,0,.3)}.color-picker-saturation{width:100%;position:relative;height:150px;background-image:linear-gradient(transparent,#000),linear-gradient(90deg,#fff,transparent);-webkit-user-select:none;-moz-user-select:none;user-select:none}.color-picker-saturation_cursor{position:absolute;width:20px;height:20px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 15px #00000026;box-sizing:border-box;transform:translate(-10px,-10px)}.color-picker-hue{width:100%;position:relative;margin-top:15px;height:12px;background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:12px}.color-picker-hue_cursor{position:absolute;width:20px;height:20px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 .5px #0003;box-sizing:border-box;transform:translate(-10px,-4px)}.color-picker-info{display:flex;align-items:center;justify-content:space-between;height:20px;margin-top:15px;font-size:13px}.color-picker-info .color-picker-color{border:1px solid #ccc;width:80px;height:100%}