{"mappings":"ACEC,oGAKA,oFAIA,gGAKA,qHAMA,kHAOC,kFAIA,+FAIA,sGAIA,+FAMD,mOAaA,iMAWC,yIASD,sSAiBC,mJAQD,qFAKA,8FAIA,gGAIA,wFAKA,mFAIA,gIAOA,yOAcA,kMAOA,gPAeA,oMAQA,mIAQA,yMAaA,wGAKA,sJAQA,wIAQA,0PAeA,kJAKA,yJAKA,mRAeC,gNAUA,sGAMA,8HAMD,wJAMC,kIAOA,wHAIA","sources":["control.css","src/control.scss"],"sourcesContent":[".customize-control-kirki-react-colorful .kirki-control-form {\n  box-sizing: border-box;\n  position: relative;\n}\n\n.customize-control-kirki-react-colorful .kirki-control-form * {\n  box-sizing: border-box;\n}\n\n.customize-control-kirki-react-colorful .kirki-control-cols {\n  align-items: flex-start;\n  display: flex;\n}\n\n.customize-control-kirki-react-colorful .kirki-control-left-col {\n  width: 90%;\n  width: calc(100% - 35px);\n  padding-right: 30px;\n}\n\n.customize-control-kirki-react-colorful .kirki-control-right-col {\n  width: 35px;\n  justify-content: flex-end;\n  display: flex;\n}\n\n.customize-control-kirki-react-colorful .use-hue-mode .react-colorful {\n  height: auto;\n}\n\n.customize-control-kirki-react-colorful .use-hue-mode .react-colorful__saturation {\n  display: none;\n}\n\n.customize-control-kirki-react-colorful .use-hue-mode .react-colorful__last-control {\n  border-radius: 4px;\n}\n\n.customize-control-kirki-react-colorful .use-hue-mode input.kirki-color-input {\n  padding-left: 8px;\n}\n\n.customize-control-kirki-react-colorful .kirki-trigger-circle-wrapper {\n  width: 33px;\n  height: 33px;\n  border: 1px solid #ccc;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  padding: 3px;\n  display: flex;\n  position: relative;\n  top: -3px;\n}\n\n.customize-control-kirki-react-colorful .kirki-trigger-circle {\n  width: 25px;\n  height: 25px;\n  cursor: pointer;\n  background-size: 10px;\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  display: block;\n  position: relative;\n}\n\n.customize-control-kirki-react-colorful .kirki-trigger-circle .kirki-color-preview {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.customize-control-kirki-react-colorful .colorPickerContainer {\n  width: 100%;\n  z-index: 9999;\n  opacity: 0;\n  visibility: hidden;\n  background-color: #fff;\n  border-radius: 6px;\n  margin-top: 5px;\n  padding: 15px;\n  transition: opacity .2s, visibility .2s;\n  position: absolute;\n  top: 35px;\n  right: 0;\n  box-shadow: 0 12px 15px rgba(0, 0, 0, .09);\n}\n\n.customize-control-kirki-react-colorful .colorPickerContainer.is-open {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity .2s 10ms, visibility .2s 10ms;\n}\n\n.customize-control-kirki-react-colorful .react-colorful {\n  width: 100%;\n  border-radius: 4px;\n}\n\n.customize-control-kirki-react-colorful .react-colorful__saturation {\n  border-radius: 4px 4px 0 0;\n}\n\n.customize-control-kirki-react-colorful .react-colorful__last-control {\n  border-radius: 0 0 4px 4px;\n}\n\n.customize-control-kirki-react-colorful .react-colorful__pointer {\n  width: 20px;\n  height: 20px;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-input-wrapper {\n  margin-top: 15px;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-input-control {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.customize-control-kirki-react-colorful input.kirki-color-input {\n  width: 100%;\n  height: 30px;\n  color: #333;\n  z-index: 1;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding-left: 32px;\n  padding-right: 8px;\n  line-height: 30px;\n  display: block;\n  position: relative;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-input:focus, .customize-control-kirki-react-colorful .kirki-color-input:active {\n  border-color: #2271b1;\n  outline: none;\n  box-shadow: 0 0 0 1px #2271b1;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-preview-wrapper {\n  width: 22px;\n  height: 22px;\n  z-index: 2;\n  background-repeat: repeat;\n  background-size: 8px;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  position: absolute;\n  left: 6px;\n  box-shadow: 0 0 0 1px #ddd;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-preview, .customize-control-kirki-react-colorful .kirki-control-reset {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0);\n  padding: 0;\n  position: absolute;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-preview {\n  width: 100%;\n  height: 100%;\n  border-width: 0;\n  border-radius: 50%;\n  display: block;\n}\n\n.customize-control-kirki-react-colorful .kirki-control-reset {\n  width: 17px;\n  height: 17px;\n  z-index: 3;\n  border-width: 0;\n  border-radius: 50%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  top: 4px;\n  right: 35px;\n}\n\n.customize-control-kirki-react-colorful .kirki-control-reset:hover i {\n  color: red;\n  transform: rotate(-45deg);\n}\n\n.customize-control-kirki-react-colorful .kirki-control-reset i {\n  width: auto;\n  height: auto;\n  font-size: 12px;\n  transition: transform .2s;\n  transform: rotate(45deg);\n}\n\n.customize-control-kirki-react-colorful .kirki-color-swatches {\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 12px;\n  display: flex;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-swatch {\n  width: 25px;\n  height: 25px;\n  cursor: pointer;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  padding: 0;\n  transition: transform .2s;\n  display: block;\n  position: relative;\n  transform: scale(1);\n  box-shadow: 0 0 0 1px #ddd;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-swatch:active, .customize-control-kirki-react-colorful .kirki-color-swatch:focus {\n  outline: none;\n}\n\n.customize-control-kirki-react-colorful .kirki-color-swatch:hover, .customize-control-kirki-react-colorful .kirki-color-swatch:focus {\n  transform: scale(1.1);\n}\n\n.customize-control-kirki-react-colorful .kirki-label-tooltip {\n  width: auto;\n  width: max-content;\n  max-width: 100px;\n  color: #fff;\n  opacity: 0;\n  visibility: hidden;\n  background-color: rgba(0, 0, 0, .7);\n  border-radius: 4px;\n  padding: 7px 10px 3px;\n  transition: all .2s;\n  position: absolute;\n  bottom: 45px;\n  left: -8px;\n}\n\n.customize-control-kirki-react-colorful .kirki-label-tooltip:before {\n  content: \"\";\n  border: 7px solid rgba(0, 0, 0, 0);\n  border-top: 8px solid rgba(0, 0, 0, .7);\n  border-bottom-width: 0;\n  position: absolute;\n  bottom: -8px;\n  left: 19px;\n}\n\n.customize-control-kirki-react-colorful .kirki-label-tooltip .customize-control-title {\n  line-height: 1.2;\n}\n\n.customize-control-kirki-react-colorful .kirki-trigger-circle-wrapper:hover ~ .kirki-label-tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=\"kirki-multicolor\"] {\n  width: 35px;\n  margin-bottom: 20px;\n  margin-right: 8px;\n  padding-right: 0;\n}\n\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=\"kirki-multicolor\"] .kirki-control-reset {\n  top: -19px;\n  right: 8px;\n}\n\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=\"kirki-typography\"] .colorPickerContainer {\n  top: 55px;\n}\n\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=\"kirki-typography\"] .kirki-control-reset {\n  top: 30px;\n  left: 35px;\n  right: auto;\n}\n\n/*# sourceMappingURL=control.css.map */\n","// React colorful control.\n.customize-control-kirki-react-colorful {\n\t.kirki-control-form {\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.kirki-control-form * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.kirki-control-cols {\n\t\tdisplay: flex;\n\t\talign-items: flex-start;\n\t}\n\n\t.kirki-control-left-col {\n\t\tpadding-right: 30px;\n\t\twidth: 90%;\n\t\twidth: calc(100% - 35px);\n\t}\n\n\t.kirki-control-right-col {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\twidth: 35px;\n\t}\n\n\t.use-hue-mode {\n\t\t.react-colorful {\n\t\t\theight: auto;\n\t\t}\n\n\t\t.react-colorful__saturation {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.react-colorful__last-control {\n\t\t\tborder-radius: 4px;\n\t\t}\n\n\t\tinput.kirki-color-input {\n\t\t\tpadding-left: 8px;\n\t\t\tpadding-left: 8px;\n\t\t}\n\t}\n\n\t.kirki-trigger-circle-wrapper {\n\t\tposition: relative;\n\t\ttop: -3px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 3px;\n\t\twidth: 33px;\n\t\theight: 33px;\n\t\tborder-radius: 50%;\n\t\tborder: 1px solid #ccc;\n\t}\n\n\t.kirki-trigger-circle {\n\t\tposition: relative;\n\t\tpadding: 0;\n\t\tdisplay: block;\n\t\twidth: 25px;\n\t\theight: 25px;\n\t\tbackground-size: 10px;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t\tcursor: pointer;\n\n\t\t.kirki-color-preview {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t}\n\n\t.colorPickerContainer {\n\t\tposition: absolute;\n\t\ttop: 35px;\n\t\tright: 0;\n\t\tmargin-top: 5px;\n\t\twidth: 100%;\n\t\tpadding: 15px;\n\t\tbackground-color: #fff;\n\t\tborder-radius: 6px;\n\t\tbox-shadow: rgba(0, 0, 0, 0.09) 0 12px 15px 0;\n\t\tz-index: 9999;\n\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: all 0.2s;\n\t\ttransition-property: opacity, visibility; // Yes, only opacity and visibility please.\n\n\t\t&.is-open {\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t\ttransition: all 0.2s ease 10ms; // When we open the picker popup, the top offset is changed, so we need to wait a bit.\n\t\t\ttransition-property: opacity, visibility; // Yes, only opacity and visibility please.\n\t\t}\n\t}\n\n\t.react-colorful {\n\t\twidth: 100%;\n\t\tborder-radius: 4px;\n\t}\n\n\t.react-colorful__saturation {\n\t\tborder-radius: 4px 4px 0 0;\n\t}\n\n\t.react-colorful__last-control {\n\t\tborder-radius: 0 0 4px 4px;\n\t}\n\n\t.react-colorful__pointer {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t}\n\n\t.kirki-color-input-wrapper {\n\t\tmargin-top: 15px;\n\t}\n\n\t.kirki-color-input-control {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t}\n\n\tinput.kirki-color-input {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tpadding-left: 32px;\n\t\tpadding-right: 8px;\n\t\twidth: 100%;\n\t\theight: 30px;\n\t\tline-height: 30px;\n\t\tcolor: #333;\n\t\tborder: 1px solid #ccc;\n\t\tborder-radius: 4px;\n\t\tz-index: 1;\n\t}\n\n\t.kirki-color-input:focus,\n\t.kirki-color-input:active {\n\t\tbox-shadow: 0 0 0 1px #2271b1;\n\t\toutline: none;\n\t\tborder-color: #2271b1;\n\t}\n\n\t.kirki-color-preview-wrapper {\n\t\tposition: absolute;\n\t\tleft: 6px;\n\t\twidth: 22px;\n\t\theight: 22px;\n\t\tbackground-repeat: repeat;\n\t\tbackground-size: 8px;\n\t\tborder-radius: 50%;\n\t\tborder: 1px solid #ddd;\n\t\tborder: 2px solid #fff;\n\t\t-webkit-box-shadow: 0px 0px 0px 1px #ddd;\n\t\tbox-shadow: 0px 0px 0px 1px #ddd;\n\t\tz-index: 2;\n\t}\n\n\t.kirki-color-preview,\n\t.kirki-control-reset {\n\t\tposition: absolute;\n\t\tpadding: 0;\n\t\tbackground-color: transparent;\n\t\tcursor: pointer;\n\t}\n\n\t.kirki-color-preview {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tborder-width: 0;\n\t}\n\n\t.kirki-control-reset {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttop: 4px;\n\t\tright: 35px;\n\t\twidth: 17px;\n\t\theight: 17px;\n\t\tborder-radius: 50%;\n\t\tborder-width: 0;\n\t\tz-index: 3;\n\t}\n\n\t.kirki-control-reset:hover i {\n\t\tcolor: #f00;\n\t\ttransform: rotate(-45deg);\n\t}\n\n\t.kirki-control-reset i {\n\t\tfont-size: 12px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\ttransform: rotate(45deg);\n\t\ttransition: transform 0.2s;\n\t}\n\n\t.kirki-color-swatches {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 4px;\n\t\talign-items: center;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t.kirki-color-swatch {\n\t\tposition: relative;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\twidth: 25px;\n\t\theight: 25px;\n\t\tborder-radius: 50%;\n\t\tborder: 2px solid #fff;\n\t\tcursor: pointer;\n\t\ttransform: scale(1, 1);\n\t\ttransition: transform 0.2s;\n\t\t-webkit-box-shadow: 0px 0px 0px 1px #ddd;\n\t\tbox-shadow: 0px 0px 0px 1px #ddd;\n\t}\n\n\t.kirki-color-swatch:active,\n\t.kirki-color-swatch:focus {\n\t\toutline: none;\n\t}\n\n\t.kirki-color-swatch:hover,\n\t.kirki-color-swatch:focus {\n\t\ttransform: scale(1.1, 1.1);\n\t}\n\n\t.kirki-label-tooltip {\n\t\tposition: absolute;\n\t\tbottom: 45px;\n\t\tleft: -8px;\n\t\tpadding: 7px 10px 3px; // The 4px of bottom side is handled by label / description's margin-bottom.\n\t\twidth: auto; // just for fallback for max-content.\n\t\twidth: max-content;\n\t\tmax-width: 100px;\n\t\tcolor: #fff;\n\t\tbackground-color: rgba(0, 0, 0, 0.7);\n\t\tborder-radius: 4px;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: all 0.2s;\n\n\t\t&::before {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\tbottom: -8px;\n\t\t\tleft: 19px;\n\t\t\tborder-width: 8px 7px 0 7px;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;\n\t\t}\n\n\t\t.customize-control-title {\n\t\t\tline-height: 1.2;\n\t\t}\n\t}\n\n\t.kirki-trigger-circle-wrapper {\n\t\t&:hover ~ .kirki-label-tooltip {\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n\n\t&[data-kirki-parent-control-type=\"kirki-multicolor\"] {\n\t\tmargin-right: 8px;\n\t\tmargin-bottom: 20px;\n\t\tpadding-right: 0;\n\t\twidth: 35px;\n\n\t\t.kirki-control-reset {\n\t\t\ttop: -19px;\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t&[data-kirki-parent-control-type=\"kirki-typography\"] {\n\t\t.colorPickerContainer {\n\t\t\ttop: 55px;\n\t\t}\n\n\t\t.kirki-control-reset {\n\t\t\ttop: 30px;\n\t\t\tright: auto;\n\t\t\tleft: 35px;\n\t\t}\n\t}\n}\n"],"names":[],"version":3,"file":"control.css.map"}