Hi Guys,

I find a problems where CSS from other plugins messup with the kirki CSS and broke editor.

One woocommerce addon is great example “Amazon Woocommerce fullfilment” what broke .switch button. I made some CSS updates in the Kirki but is better to you know about it.

  .customize-control-kirki-switch .switch {
    border: none !important;
    margin-bottom: 1.5rem !important;
    outline: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: inherit !important;
    user-select: none !important;
    border-radius: 3rem !important; }

.customize-control-kirki-toggle .switch {
    border: 1px solid #b4b9be !important;
    display: inline-block !important;
    width: 35px !important;
    height: 12px !important;
    border-radius: 8px !important;
    background: #b4b9be !important;
    vertical-align: middle !important;
    position: relative !important;
    top: 4px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 350ms ease !important; }
    .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before {
      content: "" !important;
      display: block !important;
      width: 20px !important;
      height: 20px !important;
      border-radius: 50% !important;
      position: absolute !important;
      top: 50% !important;
      left: -3px !important;
      transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease !important; }
    .customize-control-kirki-toggle .switch:before {
      background: rgba(0, 0, 0, 0.2) !important;
      transform: translate3d(0, -50%, 0) scale(0) !important; }
    .customize-control-kirki-toggle .switch:after {
      background: #999 !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      transform: translate3d(0, -50%, 0) !important; }
    .customize-control-kirki-toggle .switch:active:before {
      transform: translate3d(0, -50%, 0) scale(3) !important; }
  .customize-control-kirki-toggle input:checked + .switch:before {
    background: rgba(0, 115, 170, 0.075) !important;
    transform: translate3d(100%, -50%, 0) scale(1) !important; }
  .customize-control-kirki-toggle input:checked + .switch:after {
    background: #0073aa !important;
    transform: translate3d(100%, -50%, 0) !important; }
  .customize-control-kirki-toggle input:checked + .switch:active:before {
    background: rgba(0, 115, 170, 0.075) !important;
    transform: translate3d(100%, -50%, 0) scale(3) !important; }

Generaly I put !important on all CSS rules and fix problem but can be messy in the next updates.

Thanks!