.color {
    position: relative;
    height: 120px;
    overflow: hidden;
    cursor: pointer;

    > .saturation {
      position: relative;
      width: 100%;
      height: 100%;

      > .value {
        position: relative;
        width: 100%;
        height: 100%;

        > .drag-pointer {
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      } 

    }

    > .saturation {
        background-color: rgba(204, 154, 129, 0);
        background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
        background-repeat: repeat-x; 
    
        > .value {
            background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0));
    
            > .drag-pointer {
                border: 1px solid #fff;
                box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
            }
        }
    }
    
}