@import "../../theme/vita/_variables";

// ios-inspired 7 colors
// .u-colors(@index) when (@index > 0) {
//   .u-colors(@index - 1);
//   @selector: ~".u-ColorBG--@{index}";
//   @{selector} {
//     background-color: extract(@_colors, @index);
//   };
//   @selectorz: ~".u-ColorFG--@{index}";
//   @{selectorz} {
//      color: extract(@_colors, @index);
//   };
// }
// .u-colors(length(@_colors));

.a_GlobalColorRules(45, 10);

/* Rules 11-30
   ========================================================================== */

.a_GlobalColorRules(@counter, @varNumber) when (@counter > @varNumber) {
  .a_GlobalColorRules(@counter - 1, @varNumber);

  // Must keep in sync with UT's LESS!
  @accentNumber : mod(@counter - 1, @varNumber) + 1;
  @varName : 		%("g_Color-Palette-%s", @accentNumber);
  @varName2 :		%("g_Color-Palette-%s-FG", @accentNumber);
  @darkenPct : 	(floor((@counter - 1) / @varNumber / 2) + 1) * 10%;

  // 1 or -1
  @darkenFactor : 2 * ( sin( 1rad * floor((@counter - 1) / @varNumber) * pi() / 2 ) - 0.5 );

  .u-Color-@{counter}-BG {
    &--txt 			{ color : darken(@@varName, @darkenPct * @darkenFactor); }
    &--bg 			{ background-color : darken(@@varName, @darkenPct * @darkenFactor); }
    &--fill 		{ fill : darken(@@varName, @darkenPct * @darkenFactor); }
    &--br 			{ stroke : darken(@@varName, @darkenPct * @darkenFactor); border-color : darken(@@varName, @darkenPct * @darkenFactor); }
  }
  .u-Color-@{counter}-FG {
    &--txt 			{ color : lighten(@@varName2, @darkenPct); }
    &--bg 			{ background-color : lighten(@@varName2, @darkenPct); }
    &--fill 		{ fill : lighten(@@varName2, @darkenPct); }
    &--br 			{ stroke : lighten(@@varName2, @darkenPct); border-color : lighten(@@varName2, @darkenPct); }
  }
}

/* Rules 1-10
   ========================================================================== */

.a_GlobalColorRules(@counter, @varNumber) when (@counter <= @varNumber) and (@counter > 0) {
  .a_GlobalColorRules(@counter - 1, @varNumber);

  // Must keep in sync with UT's LESS!
  @accentNumber : mod(@counter - 1, @varNumber) + 1;
  @varName : %("g_Color-Palette-%s", @accentNumber);
  @varName2 : %("g_Color-Palette-%s-FG", @accentNumber);

  .u-Color-@{counter}-BG {
    &--txt {
      color: @@varName;
    }
    &--bg {
      background-color: @@varName;
    }
    &--fill {
      fill: @@varName;
    }
    &--br {
      stroke: @@varName;
      border-color: @@varName;
    }
  }
  .u-Color-@{counter}-FG {
    &--txt {
      color: @@varName2;
    }
    &--bg {
      background-color: @@varName2;
    }
    &--fill {
      fill: @@varName2;
    }
    &--br {
      stroke: @@varName2;
      border-color: @@varName2;
    }
  }
}

/* ==========================================================================
   Cycle Colors for Lists 
   ========================================================================== */

.color-cycle(@n, @i: 1) when (@i =< @n) {
  & > :nth-child(45n+@{i}) {
    .u-color {
      background-color: extract(@_colors, @i);
      color: extract(@_colors_FG, @i);
    }
    .u-color-bg,
    .u-color-background {
      background-color: extract(@_colors, @i);
    }
    .u-color-txt,
    .u-color-text {
      color: extract(@_colors, @i);
    }
    .u-color-bd,
    .u-color-border {
      border-color: extract(@_colors, @i);
    }
  }
  .color-cycle(@n, (@i + 1));
}

.u-colors {
  .color-cycle(45);
}

/* ==========================================================================
   Pallete Colors
   ========================================================================== */
.color-palette(@n, @i: 1) when (@i =< @n) {
  .u-color-@{i} {
    background-color: extract(@_colors, @i);
    color: extract(@_colors_FG, @i);
  }
  .u-color-@{i}-bg,
  .u-color-@{i}-background {
    background-color: extract(@_colors, @i);
  }
  .u-color-@{i}-txt,
  .u-color-@{i}-text {
    color: extract(@_colors, @i);
  }
  .u-color-@{i}-bd,
  .u-color-@{i}-border {
    border-color: extract(@_colors, @i);
  }
  .color-palette(@n, (@i + 1));
}
.color-palette(45);