@function shadow-string($color1, $color2, $length){
  $total-length: $length;
  $string: $color1 0px 0px;
  @while $length > 0 {
    $mix-amount: 100 - (($length / $total-length) * 100);
    $mixed-color: mix($color1,$color2, $mix-amount);
    $string-addition: $length+px $length+px;
    $string: $mixed-color $string-addition, $string;
    $length: $length - 1;  
  }
  @return $string
}

@mixin longshadow($color1, $color2, $length) {  
  box-shadow: shadow-string($color1, $color2, $length);    
}
@mixin longshadowt($color1, $color2, $length) {  
  text-shadow: shadow-string($color1, $color2, $length);    
}
   .palettes {
      padding:20px;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:center;
      .palette {
         position: relative;
         width:140px;
         background-color:#F9FAFC;
         border-radius:4px;
         @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 40);
         display:flex;
         flex-direction:column;
         margin:20px;
         .colours {
            height:50px;
            display:flex;
            flex-direction:row;
            >* {
               cursor: crosshair;
               flex-grow:1;
               transition:.25s ease;
               &:hover {
                  flex-grow:1.5;
               }
            }
            .c1 {
               border-top-left-radius:4px;
            }
            .c2 {
               border-top-right-radius:4px;
            }
         }
         .details {
            padding:6px 10px;
            .name {
               font-weight:300;
            }
            .values {
               display:none;
               font-size:12px;
               color:#AAB2BD;
            }
         }
         &.add {
            position: relative;
            background-color:transparent;
            width:140px;
            height:102px;
            border:4px dotted #fff;
            box-shadow:none;
            .sign {
               position: absolute;
               top:50%;
               left:50%;
               transform:translate(-50%,-50%);
               width:50px;
               height:50px;
               background-color:#A0D468;
               border-radius:100%;
               @include longshadow(rgba(67,74,84,0.02), rgba(240,242,245,0), 30);
               cursor: pointer;
               &:before, &:after {
                  width:50%;
                  height:10%;
                  position: absolute;
                  content: '';
                  background-color:#fff;
                  top:50%;
                  left:50%;
                  transform:translate(-50%,-50%);
               }
               &:after {
                  transform:translate(-50%,-50%) rotate(90deg);
               }
            }
         }
      }
   }