[data-color-picker] .react-colorful{aspect-ratio:1;gap:0;width:100%;height:auto;overflow:visible}[data-color-picker] .color-picker-surface{padding-bottom:2px}[data-color-picker] .react-colorful__saturation{border-bottom:none;border-radius:8px 8px 0 0;flex-grow:1;flex-shrink:1;width:100%;min-height:0;overflow:hidden}[data-color-picker] .react-colorful__hue,[data-color-picker] .react-colorful__alpha{border-radius:0;flex-shrink:0;height:24px;margin:0;overflow:visible}[data-color-picker][data-show-alpha=false] .react-colorful__hue,[data-color-picker][data-show-alpha=true] .react-colorful__alpha{border-radius:0 0 8px 8px}[data-color-picker][data-show-alpha=false] .react-colorful__alpha{display:none}[data-color-picker] .react-colorful__pointer{background:0 0;border:2px solid #ffffffd1;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 1px #0000001f,0 1px 3px #00000024}[data-color-picker] .react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%)scale(1.05)}[data-color-picker] .react-colorful__hue-pointer,[data-color-picker] .react-colorful__alpha-pointer{background:#ffffffd1;border:2px solid #ffffffe0;border-radius:5px;width:10px;height:calc(100% + 6px);transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000001a,0 2px 4px #0000001f}[data-color-picker] .react-colorful__interactive:focus .react-colorful__hue-pointer,[data-color-picker] .react-colorful__interactive:focus .react-colorful__alpha-pointer{transform:translate(-50%,-50%)scale(1.04)}