//Mixin um die Legende inkl. der Farben zu erzeugen.
.generateSpanWithColor(@color:@defaultColor, @key:@defaultKey){
        span.@{key}Color{
        color: if((iscolor(@color)), @color, @defaultColor);
    }
}

//Mixin der die GridRow inkl. derer Hover und Selected zustände einfärbt.
.generateGridRowWithColor(@color:@defaultColor, @key:@defaultKey){
    table[role="grid"] tr[role="row"].@{key}Color, table[role="treegrid"] tr[role="row"].@{key}Color{
        background-color: if((iscolor(@color)), @color, @defaultColor);
        .SetGridRowcolorHover(@color)
    }
}

//Mixin der die Hover und Selected zustände der GridRow einfärbt.
.SetGridRowcolorHover(@color:@defaultColor){
    &:hover,
    &.k-state-selected{
        color: Black!important;
        background-color: if((iscolor(@color)), darken(@color,@darkenPercent), @defaultColor);
    }
}

//Foreach die alle TimeManagementStatus durchgeht und für jedes Einen Style für die Legende und die GridRows erzeugt.
/*each(@TimeManagementStatus, {
    .SetSpanColor(@value, @key);
    .SetGridRowColor(@value, @key);
});*/

//Mixin-Schleife der die statusNameList durchgeht und anhand der dort eignetragenen keyNames die Span und GridRow stylings setzt.
.loop-generateStyleElementsWithColor(@counter) when (@counter > 0){
    .loop-generateStyleElementsWithColor((@counter - 1));

    @tmpKeyName: extract(@statusNamesList, @counter);
    @tmpColor: "@{tmpKeyName}Color";
    
    .generateSpanWithColor(@@tmpColor, @tmpKeyName);
    .generateGridRowWithColor(@@tmpColor, @tmpKeyName);
}