@wpb-colorpicker-size: 30px;
@wpb-colorpicker-border-radius: 50%;
@wpb-colorpicker-border-color: rgba(94, 94, 94, 0.5);

.color-group .pcr-app.wpb-pickr {
  max-width: 340px;
  width: 340px;
}

.color-group .pickr .pcr-button {
  width: @wpb-colorpicker-size;
  height: @wpb-colorpicker-size;
  border: none;
  border-radius: @wpb-colorpicker-border-radius;
  transition: none;
}

.color-group .pickr .pcr-button:focus {
  box-shadow: none;
  outline: 1px solid @vc_main_color_hover;
  outline-offset: 1px;
}

// For plugin settings page (Design Options tab)
.color-group .pickr .pcr-button.disabled:focus {
  box-shadow: none;
  outline: none;
}

.color-group .pickr .pcr-button::after,
.color-group .pickr .pcr-button::before {
  border-radius: @wpb-colorpicker-border-radius;
}

.color-group .pickr .pcr-button::after {
  box-shadow: inset 0 0 0 1.5px @wpb-colorpicker-border-color;
}

.color-group .pickr .pcr-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 2 2'%3E%3Cpath fill='%23D8D8D8' d='M1,0H2V1H1V0ZM0,1H1V2H0V1Z'/%3E%3Cpath fill='%23B8B8B8' d='M0,0H1V1H0V0ZM1,1H2V2H1V1Z'/%3E%3C/svg%3E%0A");
  background-size: 10px;
}

// Override WPB input styles
.color-group .pcr-app .pcr-interaction input {
  width: auto;
  min-height: unset;
  line-height: 1;
  border: none;
}

.color-group .pcr-app .pcr-interaction .pcr-type.active {
  background: @vc_main_color;
}

.color-group .pcr-app .pcr-interaction .pcr-type.active:hover {
  background: @vc_main_color_hover;
}

.color-group .pcr-app .pcr-interaction input:focus {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 3px @vc_main_color;
}

.color-group .pcr-app .pcr-interaction .pcr-cancel {
  color: #75797e;
  background: #f1f3f4;
}

.color-group .pcr-app .pcr-interaction .pcr-cancel:hover {
  filter: brightness(0.975);
}

.color-group .pcr-app {
  z-index: 90000; // Make the colorpicker popup appear above attributes in Edit Form
}

.pcr-app[data-theme=classic] .pcr-selection {
  .pcr-picker {
    left: calc(0% - 9px); top: calc(100% - 9px); background: rgb(0, 0, 0);
  }
  .pcr-color-palette .pcr-palette {
    background: linear-gradient(to top, rgb(0, 0, 0), transparent), linear-gradient(to left, rgb(255, 0, 0), rgb(255, 255, 255));
  }
  .pcr-color-preview {
    .pcr-last-color, .pcr-current-color {
      --pcr-color: rgba(0,0,0, 1);
    }
  }
}

.color-group .pickr .pcr-button.clear {
  --pcr-color: rgba(0, 0, 0, 0) !important;
  background: none;
  &::before {
    opacity: 1;
    background: url("data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>");
    background-size: .5em;
  }
}

.vc_wrapper-param-type-colorpicker.wpb_el_type_colorpicker {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;

  .wpb-param-heading {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}

// Design Options tab
.vc_settings .wpb-color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;

  label.wpb_element_label {
    margin-bottom: 0;
  }
}