@import "./__config";

@scope-color-shift: 20;
@scope-saturation: 60%;
@scope-lightness: 80%;

.plastic-editor-view {
  
  .scope {
    padding: 0px;
    margin-top: -1px;
    border-top-width: 1px;
    border-top-style: solid;
  }

  // .scope.after-nl {
  //   margin-top: 1px;
  //   padding-top: 2px;
  // }

  .makeScope(@scope, @color) {
      .scope-@{scope} {
          border-color: desaturate(darken(@color, 30), 60%);
      }
      
      .scope-@{scope} > .punctuation {
        color: @color !important;
        opacity: 1;
      }

      .decl-scope-@{scope} {
        color: @color;
      }

      .decl-scope-@{scope} .decl {
        color: darken(@color, 10);
      }
      
  }
  
  // purple is for keywords
  // red is for strings
  // -- other colors are avail, first few colors must be nice
  .makeScope(1, hsl(200, @scope-saturation, @scope-lightness));
  .makeScope(2, hsl(50, @scope-saturation, @scope-lightness));
  .makeScope(3, hsl(280, @scope-saturation, @scope-lightness));
  .makeScope(4, hsl(130, @scope-saturation, @scope-lightness));
  .makeScope(5, hsl(0, @scope-saturation, @scope-lightness));
  .makeScope(6, hsl(120, @scope-saturation, @scope-lightness));
  .makeScope(7, hsl(300, @scope-saturation, @scope-lightness));
  .makeScope(8, hsl(210, @scope-saturation, @scope-lightness));

  // .makeScope( 9, hsl(210+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(10, hsl(0+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(11, hsl(50+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(12, hsl(180+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(13, hsl(330+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(14, hsl(20+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(15, hsl(240+@scope-color-shift, @scope-saturation, @scope-lightness));
  // .makeScope(16, hsl(300+@scope-color-shift, @scope-saturation, @scope-lightness));

} // .plastic-editor-view

@depth-base1: darken(#21252b, 10%); //hsl(0,  0%,   0%);
@depth-base2: hsl(0,  0%,  30%);
@depth-base3: hsl(200, 50%, 5%);
@depth-base4: hsl(200, 50%, 30%);
@depth-base5: hsl(0, 50%,  5%);
@depth-base6: hsl(0, 50%, 30%);

@depth-steps: 12;
@depth-increment: (100 / @depth-steps);

.plastic-editor-view {

  .makeDepths(@start, @end, @base-index, @i) when (@i > 0) {
      @depth: @base-index + @i - 1;

      .scope-depth-@{depth} {
        @bg-color: mix(@start, @end, (@depth-steps - @i)*@depth-increment);
        background-color: @bg-color;
        border-top-color: lighten(@bg-color, 1);
      }
      
      .makeDepths(@start, @end, @base-index, (@i - 1));
  }

  .makeDepths(@depth-base1, @depth-base2, 0, @depth-steps);
  .makeDepths(@depth-base2, @depth-base3, 1*@depth-steps, @depth-steps);
  .makeDepths(@depth-base3, @depth-base4, 2*@depth-steps, @depth-steps);
  .makeDepths(@depth-base4, @depth-base5, 3*@depth-steps, @depth-steps);
  .makeDepths(@depth-base5, @depth-base6, 4*@depth-steps, @depth-steps);

} // .plastic-editor-view