/* GRADIENT PICKER */

:root {
    --inc-color-1: #ff5898;
    --inc-color-2: #ffee78;
    --inc-gradient: linear-gradient(to top, var(--inc-color-1), var(--inc-color-2));
  
    --inc-gradient-0: linear-gradient(to top, transparent, transparent);
    --inc-gradient-1: linear-gradient(to top, #ff5898, transparent, #ffee78);
    --inc-gradient-2: linear-gradient(to top, #b08efc, transparent, #a4e7ff);
    --inc-gradient-3: linear-gradient(to top, #28c282, transparent, #fb41ca);
    --inc-gradient-4: linear-gradient(to top, #fff600, transparent, #acffe4);
  }
  
  .gradientpicker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--gradientpicker-gradient);
    pointer-events: none;
  }
  
  .gradientpicker .gradientpickerbt {
    position: absolute;
    left: 0.5em;
    top: 0.5em;
    width: var(--btwh);
    height: var(--btwh);
    --svgicon-color: rgb(255 255 255);
    --svgicon-url: var(--utils-icon-gradient);
    pointer-events: all;
  }
  
  .gradientpickerpopup {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 80%);
    z-index: 999999;
  }
  
  
  .gradientpickerpopup .gradientpickels {
    margin: auto;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1em;
    column-gap: 1em;
    padding: 2em;
  }
  
  .gradientpickerpopup .gradientpickels .gradientpickel {
    width: 4em;
    height: 4em;
    padding: 0.5em;
  
    border: solid black 1px;
    border-radius: 15px;
    overflow: hidden;
    background: #353535;
  }
  
  .gradientpickerpopup .gradientpickels .gradientpickel:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradientpicker-gradient);
  }