// color
.bg-white         { background-color: #fff !important; }
.text-white       { color: #fff !important; }

.for-each(@colors, {
  .bg-@{adKey}-light       { background-color: extract(@adItem, @color-light-position) !important; }
  .bg-@{adKey}             { background-color: extract(@adItem, @color-basic-position) !important; }
  .bg-@{adKey}-dark        { background-color: extract(@adItem, @color-dark-position) !important; }

  .bg-@{adKey}-light-h     { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-light-position) !important; } }
  .bg-@{adKey}-h           { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-basic-position) !important; } }
  .bg-@{adKey}-dark-h      { transition: background-color 300ms; &:hover { background-color: extract(@adItem, @color-dark-position) !important; } }

  .text-@{adKey}-light     { color: extract(@adItem, @color-light-position) !important; }
  .text-@{adKey}           { color: extract(@adItem, @color-basic-position) !important; }
  .text-@{adKey}-dark      { color: extract(@adItem, @color-dark-position) !important; }
});

.for-each(@aliasColors, {
  .bg-@{adKey}-light  { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; }
  .bg-@{adKey}        { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; }
  .bg-@{adKey}-dark   { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; }

  .bg-@{adKey}-light-h  { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; } }
  .bg-@{adKey}-h        { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; } }
  .bg-@{adKey}-dark-h   { transition: background-color 300ms; &:hover { background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; } }

  .text-@{adKey}-light  { color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important; }
  .text-@{adKey}        { color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important; }
  .text-@{adKey}-dark   { color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important; }
});

// grey
.for-each(@greyColorer, {
  .bg-grey-@{adKey}     { background-color: @adValue !important; }
  .bg-grey-@{adKey}-h   { &:hover { background-color: @adValue !important; } }
  .text-grey-@{adKey}   { color: @adValue !important; }
});

.all-colors-minin(@enabled) when (@enabled = true) {

  .loop-no(@adKey, @adValue, @i: 1) when (@i =< length(@color-no-list)) {
    // @color-no-list
    @name: "@{adKey}-@{i}";
    .bg-@{adKey}-@{i}    { background-color: @@name !important; }
    .bg-@{adKey}-@{i}-h  { transition: background-color 300ms; &:hover { background-color: @@name !important; } }
    .text-@{adKey}-@{i}  { color: @@name !important; }
    .loop-no(@adKey, @adValue, @i + 1);
  }

  .for-each(@colors, {
    .loop-no(@adKey, @adValue, 1);
  });

}
.all-colors-minin(@enable-all-colors);