text: .colorpicker {
      display: flex;
  }
  
  .color-picker-swatch {
      border: 1px solid #3960ff;
      border: 1px var(--colorpicker-border, #3960ff) dotted;
  }
  
  .transparent-swatch-arrow {
      padding-left: 3px;
      padding-top: 8px;
  }
  
  .colorpicker canvas {
      cursor: pointer;
  }
  
  .colorpicker-content .axis path,
  .colorpicker-content .axis line {
      fill: none;
      stroke: #456;
      stroke: var(--colorpicker-stroke, #456);
      shape-rendering: crispEdges;
  }
  
  .colorpicker-content .axis text {
      fill: #89a;
      fill: var(--colorpicker-fill, #89a);
      font: 10px $font-family-base;
  }
  
  .colorpicker-content .s .tick:last-of-type text,
  .colorpicker-content .l .tick:last-of-type text {
      display: none;
  }
  
  .colorpicker-content .channel canvas {
      width: 900px;
      height: 90px;
      float: left;
      margin: 0 30px;
  }
  
  .colorpicker-content-flex {
      margin: auto;
      .c-ckolor__picker {
          cursor: pointer;
          margin-bottom: 5px;
          width: 60px;
          height: 60px;
          border-radius: 30px;
      }
  }
  
  .c-ckolor__save-btn,
  .c-ckolor__close-btn {
      height: 65px;
  }