.react-colorful{-webkit-user-select:none;user-select:none;flex-direction:column;width:200px;display:flex;position:relative}.react-colorful__saturation{background:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);border-radius:8px 8px 0 0;flex:1;position:relative;overflow:hidden}.react-colorful__alpha,.react-colorful__hue{height:24px;position:relative}.react-colorful__hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.react-colorful__alpha{background:linear-gradient(90deg,#0000,#000),url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"><rect width=\"8\" height=\"8\" fill=\"%23ccc\"/><rect x=\"8\" y=\"8\" width=\"8\" height=\"8\" fill=\"%23ccc\"/></svg>") 0 0/16px 16px;border-radius:0 0 8px 8px}.react-colorful__pointer{z-index:5;box-sizing:border-box;cursor:pointer;background-color:#fff;border:3px solid #fff;border-radius:50%;width:28px;height:28px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0003}.react-colorful__saturation-pointer{border-radius:50%}.react-colorful__interactive{cursor:pointer;touch-action:none}