.m-color-picker {
  width: 300px;
  background: var(--background-3);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--boundary-color-1);
  .content {
    padding: 4px;
    
  }
  .settings {
    width: 100%;
  }
  canvas {
    vertical-align: bottom;
  }
  .knob {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--boundary-color-1);
    box-shadow: inset 0px 0px 0px 1px white;
  }
  .palette {
    position: relative;
    margin-bottom: 4px;
  }
  .hsl {
    .knob {
      border-radius: 50%;
      width: 15px;
      height: 15px;
      transform: translate(-50%, -50%);
    }  
  }
  .spectrum, .opacity {
    
    .knob {
      height: 100%;
      width: 15px;
      border-radius: 2px;
      transform: translateX(-50%);
    }
  }

  .presets {

  }
}