{"version":3,"file":"./control.css","mappings":"AAEE,4DACE,kBACA,sBAGF,8DACE,sBAGF,4DACE,aACA,uBAGF,gEACE,mBACA,UACA,wBAGF,iEACE,aACA,yBACA,WAIA,sEACE,YAGF,kFACE,aAGF,oFACE,kBAGF,8EACE,iBACA,iBAIJ,sEACE,kBACA,SACA,aACA,mBACA,uBACA,YACA,WACA,YACA,kBACA,sBAGF,8DACE,kBACA,UACA,cACA,WACA,YACA,qBACA,YACA,kBACA,eAEA,mFACE,kBACA,MACA,OACA,WACA,YAIJ,8DACE,kBACA,SACA,QACA,eACA,WACA,aACA,sBACA,kBACA,yCACA,aAEA,UACA,kBACA,mBACA,uCAEA,sEACE,UACA,mBACA,6BACA,uCAIJ,wDACE,WACA,kBAGF,oEACE,0BAGF,sEACE,0BAGF,iEACE,WACA,YAGF,mEACE,gBAGF,mEACE,kBACA,aACA,mBACA,WAGF,gEACE,cACA,kBACA,kBACA,kBACA,WACA,YACA,iBACA,WACA,sBACA,kBACA,UAGF,mIAEE,6BACA,aACA,qBAGF,qEACE,kBACA,SACA,WACA,YACA,yBACA,oBACA,kBACA,sBACA,sBACA,wCACA,gCACA,UAGF,0HAEE,kBACA,UACA,6BACA,eAGF,6DACE,cACA,WACA,YACA,kBACA,eAGF,6DACE,aACA,mBACA,uBACA,QACA,WACA,WACA,YACA,kBACA,eACA,UAGF,qEACE,UACA,yBAGF,+DACE,eACA,WACA,YACA,wBACA,yBAGF,8DACE,aACA,mBACA,8BACA,mBAGF,4DACE,kBACA,cACA,UACA,WACA,YACA,kBACA,sBACA,eACA,sBACA,yBACA,wCACA,gCAGF,qIAEE,aAGF,oIAEE,0BAGF,6DACE,kBACA,YACA,UACA,qBACA,WACA,kBACA,gBACA,WACA,gCACA,kBACA,UACA,kBACA,mBAEA,qEACE,WACA,kBACA,YACA,UACA,2BACA,mBACA,gEAGF,sFACE,gBAKF,iGACE,UACA,mBAIJ,yFACE,iBACA,mBACA,gBACA,WAEA,8GACE,UACA,UAKF,+GACE,SAGF,8GACE,SACA,WACA,U","sources":["webpack://control-react-colorful/./src/control.scss"],"sourcesContent":["// React colorful control.\n.customize-control-kirki-react-colorful {\n  .kirki-control-form {\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .kirki-control-form * {\n    box-sizing: border-box;\n  }\n\n  .kirki-control-cols {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  .kirki-control-left-col {\n    padding-right: 30px;\n    width: 90%;\n    width: calc(100% - 35px);\n  }\n\n  .kirki-control-right-col {\n    display: flex;\n    justify-content: flex-end;\n    width: 35px;\n  }\n\n  .use-hue-mode {\n    .react-colorful {\n      height: auto;\n    }\n\n    .react-colorful__saturation {\n      display: none;\n    }\n\n    .react-colorful__last-control {\n      border-radius: 4px;\n    }\n\n    input.kirki-color-input {\n      padding-left: 8px;\n      padding-left: 8px;\n    }\n  }\n\n  .kirki-trigger-circle-wrapper {\n    position: relative;\n    top: -3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3px;\n    width: 33px;\n    height: 33px;\n    border-radius: 50%;\n    border: 1px solid #ccc;\n  }\n\n  .kirki-trigger-circle {\n    position: relative;\n    padding: 0;\n    display: block;\n    width: 25px;\n    height: 25px;\n    background-size: 10px;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n\n    .kirki-color-preview {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .colorPickerContainer {\n    position: absolute;\n    top: 35px;\n    right: 0;\n    margin-top: 5px;\n    width: 100%;\n    padding: 15px;\n    background-color: #fff;\n    border-radius: 6px;\n    box-shadow: rgba(0, 0, 0, 0.09) 0 12px 15px 0;\n    z-index: 9999;\n\n    opacity: 0;\n    visibility: hidden;\n    transition: all 0.2s;\n    transition-property: opacity, visibility; // Yes, only opacity and visibility please.\n\n    &.is-open {\n      opacity: 1;\n      visibility: visible;\n      transition: all 0.2s ease 10ms; // When we open the picker popup, the top offset is changed, so we need to wait a bit.\n      transition-property: opacity, visibility; // Yes, only opacity and visibility please.\n    }\n  }\n\n  .react-colorful {\n    width: 100%;\n    border-radius: 4px;\n  }\n\n  .react-colorful__saturation {\n    border-radius: 4px 4px 0 0;\n  }\n\n  .react-colorful__last-control {\n    border-radius: 0 0 4px 4px;\n  }\n\n  .react-colorful__pointer {\n    width: 20px;\n    height: 20px;\n  }\n\n  .kirki-color-input-wrapper {\n    margin-top: 15px;\n  }\n\n  .kirki-color-input-control {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n  input.kirki-color-input {\n    display: block;\n    position: relative;\n    padding-left: 32px;\n    padding-right: 8px;\n    width: 100%;\n    height: 30px;\n    line-height: 30px;\n    color: #333;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    z-index: 1;\n  }\n\n  .kirki-color-input:focus,\n  .kirki-color-input:active {\n    box-shadow: 0 0 0 1px #2271b1;\n    outline: none;\n    border-color: #2271b1;\n  }\n\n  .kirki-color-preview-wrapper {\n    position: absolute;\n    left: 6px;\n    width: 22px;\n    height: 22px;\n    background-repeat: repeat;\n    background-size: 8px;\n    border-radius: 50%;\n    border: 1px solid #ddd;\n    border: 2px solid #fff;\n    -webkit-box-shadow: 0px 0px 0px 1px #ddd;\n    box-shadow: 0px 0px 0px 1px #ddd;\n    z-index: 2;\n  }\n\n  .kirki-color-preview,\n  .kirki-control-reset {\n    position: absolute;\n    padding: 0;\n    background-color: transparent;\n    cursor: pointer;\n  }\n\n  .kirki-color-preview {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    border-width: 0;\n  }\n\n  .kirki-control-reset {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    top: 4px;\n    right: 35px;\n    width: 17px;\n    height: 17px;\n    border-radius: 50%;\n    border-width: 0;\n    z-index: 3;\n  }\n\n  .kirki-control-reset:hover i {\n    color: #f00;\n    transform: rotate(-45deg);\n  }\n\n  .kirki-control-reset i {\n    font-size: 12px;\n    width: auto;\n    height: auto;\n    transform: rotate(45deg);\n    transition: transform 0.2s;\n  }\n\n  .kirki-color-swatches {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .kirki-color-swatch {\n    position: relative;\n    display: block;\n    padding: 0;\n    width: 25px;\n    height: 25px;\n    border-radius: 50%;\n    border: 2px solid #fff;\n    cursor: pointer;\n    transform: scale(1, 1);\n    transition: transform 0.2s;\n    -webkit-box-shadow: 0px 0px 0px 1px #ddd;\n    box-shadow: 0px 0px 0px 1px #ddd;\n  }\n\n  .kirki-color-swatch:active,\n  .kirki-color-swatch:focus {\n    outline: none;\n  }\n\n  .kirki-color-swatch:hover,\n  .kirki-color-swatch:focus {\n    transform: scale(1.1, 1.1);\n  }\n\n  .kirki-label-tooltip {\n    position: absolute;\n    bottom: 45px;\n    left: -8px;\n    padding: 7px 10px 3px; // The 4px of bottom side is handled by label / description's margin-bottom.\n    width: auto; // just for fallback for max-content.\n    width: max-content;\n    max-width: 100px;\n    color: #fff;\n    background-color: rgba(0, 0, 0, 0.7);\n    border-radius: 4px;\n    opacity: 0;\n    visibility: hidden;\n    transition: all 0.2s;\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      bottom: -8px;\n      left: 19px;\n      border-width: 8px 7px 0 7px;\n      border-style: solid;\n      border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;\n    }\n\n    .customize-control-title {\n      line-height: 1.2;\n    }\n  }\n\n  .kirki-trigger-circle-wrapper {\n    &:hover ~ .kirki-label-tooltip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n\n  &[data-kirki-parent-control-type=\"kirki-multicolor\"] {\n    margin-right: 8px;\n    margin-bottom: 20px;\n    padding-right: 0;\n    width: 35px;\n\n    .kirki-control-reset {\n      top: -19px;\n      right: 8px;\n    }\n  }\n\n  &[data-kirki-parent-control-type=\"kirki-typography\"] {\n    .colorPickerContainer {\n      top: 55px;\n    }\n\n    .kirki-control-reset {\n      top: 30px;\n      right: auto;\n      left: 35px;\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}