//
// ============LICENSE_START========================================== 
// org.onap.vvp/portal
// ===================================================================
// Copyright © 2017 AT&T Intellectual Property. All rights reserved.
// ===================================================================
//
// Unless otherwise specified, all software contained herein is licensed
// under the Apache License, Version 2.0 (the “License”);
// you may not use this software except in compliance with the License.
// You may obtain a copy of the License at
//
//          http:www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
//
//
// Unless otherwise specified, all documentation contained herein is licensed
// under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
// you may not use this documentation except in compliance with the License.
// You may obtain a copy of the License at
// 
//          https:creativecommons.org/licenses/by/4.0/
//
// Unless required by applicable law or agreed to in writing, documentation
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
// ============LICENSE_END============================================
// 
// ECOMP is a trademark and service mark of AT&T Intellectual Property.
@import "variables";

.f-color {
    .a {color:  @main_color_a;}
    .b {color:  @main_color_b;}
    .c {color:  @main_color_c;}
    .d {color:  @main_color_d;}
    .e {color:  @main_color_e;}
    .f {color:  @main_color_f;}
    .g {color:  @main_color_g;}
    .h {color:  @main_color_h;}
    .i {color:  @main_color_i;}
    .j {color:  @main_color_j;}
    .k {color:  @main_color_k;}
    .l {color:  @main_color_l;}
    .m {color:  @main_color_m;}
    .n {color:  @main_color_n;}
    .o {color:  @main_color_o;}
    .p {color:  @main_color_p;}

    .q {color:  @func_color_q;}
    .r {color:  @func_color_r;}
    .s {color:  @func_color_s;}
    .x {color:  @func_color_x;}


    .t {color:  @tlv_color_t;}
    .u {color:  @tlv_color_u;}
    .v {color:  @tlv_color_v;}

    .w {color:  @bg_color_a;}


}

.f-type {
    ._36 {
        font-family: @font-omnes-light;
        font-size: 36px;
    }
    ._36_m {
        font-family: @font-omnes-medium;
        font-size: 36px;
    }
    ._26 {
        font-family: @font-omnes-light;
        font-size: 26px;
    }
    ._26_m {
        font-family: @font-omnes-medium;
        font-size: 26px;
    }
    ._24 {
        font-family: @font-omnes-light;
        font-size: 24px;
    }
    ._24_m {
        font-family: @font-omnes-medium;
        font-size: 24px;
    }
    ._24_r {
        font-family: @font-omnes-regular;
        font-size: 24px;
    }
    ._22 {
        font-family: @font-omnes-light;
        font-size: 22px;
    }
    ._22_m {
        font-family: @font-omnes-medium;
        font-size: 22px;
    }
    ._20 {
        font-family: @font-omnes-light;
        font-size: 20px;
    }
    ._20_m {
        font-family: @font-omnes-medium;
        font-size: 20px;
    }
    ._18 {
        font-family: @font-omnes-light;
        font-size: 18px;
    }
    ._18_r {
        font-family: @font-omnes-regular;
        font-size: 18px;
    }
    ._18_m {
        font-family: @font-omnes-medium;
        font-size: 18px;
    }
    ._16_i {
        font-family: @font-omnes-medium-italic;
        font-size: 16px;
    }
    ._16_r {
        font-family: @font-omnes-regular;
        font-size: 16px;
    }
    ._16_m {
        font-family: @font-omnes-medium;
        font-size: 16px;
    }
    ._14_r {
        font-family: @font-omnes-regular;
        font-size: 14px;
    }
    ._14_m {
        font-family: @font-omnes-medium;
        font-size: 14px;
    }
    ._14_i {
        font-family: @font-omnes-medium-italic;
        font-size: 14px;
    }
    ._13_r {
        font-family: @font-omnes-regular;
        font-size: 13px;
    }
    ._13_m {
        font-family: @font-omnes-medium;
        font-size: 13px;
    }
    ._13_i {
        font-family: @font-omnes-medium-italic;
        font-size: 13px;
    }
    ._12_r {
        font-family: @font-omnes-regular;
        font-size: 12px;
    }
    ._12_m {
        font-family: @font-omnes-medium;
        font-size: 12px;
    }
    ._12_i {
        font-family: @font-omnes-medium-italic;
        font-size: 12px;
    }
    ._10_r {
        font-family: @font-omnes-regular;
        font-size: 10px;
    }
    ._10_m {
        font-family: @font-omnes-medium;
        font-size: 10px;
    }
}

.buildForColor(a);
.buildForColor(b);
.buildForColor(c);
.buildForColor(d);
.buildForColor(e);
.buildForColor(f);
.buildForColor(g);
.buildForColor(h);
.buildForColor(i);
.buildForColor(j);
.buildForColor(k);
.buildForColor(l);
.buildForColor(m);
.buildForColor(n);
.buildForColor(o);
.buildForColor(p);

.buildForFuncColor(q);
.buildForFuncColor(r);
.buildForFuncColor(s);
.buildForFuncColor(x);

.buildForTlvColor(t);
.buildForTlvColor(u);
.buildForTlvColor(v);


.buildForColor(@c){
    .@{c}_36    { color:  ~"@{main_color_@{c}}"; .f-type > ._36;}
    .@{c}_36_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._36_m;}
    .@{c}_26    { color:  ~"@{main_color_@{c}}"; .f-type > ._26;}
    .@{c}_26_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._26_m;}
    .@{c}_24    { color:  ~"@{main_color_@{c}}"; .f-type > ._24;}
    .@{c}_24_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._24_m;}
    .@{c}_24_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._24_r;}
    .@{c}_22    { color:  ~"@{main_color_@{c}}"; .f-type > ._22;}
    .@{c}_22_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._22_m;}
    .@{c}_20    { color:  ~"@{main_color_@{c}}"; .f-type > ._20;}
    .@{c}_20_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._20_m;}
    .@{c}_18    { color:  ~"@{main_color_@{c}}"; .f-type > ._18;}
    .@{c}_18_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._18_r;}
    .@{c}_18_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._18_m;}
    .@{c}_16_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_i;}
    .@{c}_16_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_r;}
    .@{c}_16_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_m;}
    .@{c}_14_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_r;}
    .@{c}_14_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_m;}
    .@{c}_14_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_i;}
    .@{c}_13_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_r;}
    .@{c}_13_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_m;}
    .@{c}_13_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_i;}
    .@{c}_12_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_r;}
    .@{c}_12_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_m;}
    .@{c}_12_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_i;}
    .@{c}_10_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._10_r;}
    .@{c}_10_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._10_m;}

}

.buildForFuncColor(@c){
    .@{c}_36    { color:  ~"@{func_color_@{c}}"; .f-type > ._36;}
    .@{c}_36_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._36_m;}
    .@{c}_26    { color:  ~"@{func_color_@{c}}"; .f-type > ._26;}
    .@{c}_26_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._26_m;}
    .@{c}_24    { color:  ~"@{func_color_@{c}}"; .f-type > ._24;}
    .@{c}_24_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._24_m;}
    .@{c}_24_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._24_r;}
    .@{c}_22    { color:  ~"@{func_color_@{c}}"; .f-type > ._22;}
    .@{c}_22_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._22_m;}
    .@{c}_20    { color:  ~"@{func_color_@{c}}"; .f-type > ._20;}
    .@{c}_20_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._20_m;}
    .@{c}_18    { color:  ~"@{func_color_@{c}}"; .f-type > ._18;}
    .@{c}_18_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._18_r;}
    .@{c}_18_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._18_m;}
    .@{c}_16_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._16_r;}
    .@{c}_16_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._16_m;}
    .@{c}_14_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_r;}
    .@{c}_14_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_m;}
    .@{c}_14_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_i;}
    .@{c}_13_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_r;}
    .@{c}_13_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_m;}
    .@{c}_13_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_i;}
    .@{c}_12_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_r;}
    .@{c}_12_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_m;}
    .@{c}_12_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_i;}
}


.buildForTlvColor(@c){
    .@{c}_36    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._36;}
    .@{c}_36_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._36_m;}
    .@{c}_26    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._26;}
    .@{c}_26_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._26_m;}
    .@{c}_24    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24;}
    .@{c}_24_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24_m;}
    .@{c}_24_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24_r;}
    .@{c}_22    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._22;}
    .@{c}_22_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._22_m;}
    .@{c}_20    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._20;}
    .@{c}_20_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._20_m;}
    .@{c}_18    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18;}
    .@{c}_18_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18_r;}
    .@{c}_18_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18_m;}
    .@{c}_16_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._16_r;}
    .@{c}_16_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._16_m;}
    .@{c}_14_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_r;}
    .@{c}_14_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_m;}
    .@{c}_14_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_i;}
    .@{c}_13_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_r;}
    .@{c}_13_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_m;}
    .@{c}_13_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_i;}
    .@{c}_12_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_r;}
    .@{c}_12_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_m;}
    .@{c}_12_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_i;}
}

.disabled {
    opacity: 0.4 !important;
    cursor: auto;
    background-color: transparent;
    pointer-events: none;
}

.circle(@size) {
    border-radius: 50%;
    width: @size;
    height: @size;
}

.step-progress(@size, @color, @width) {
    position: relative;
    .circle {
        .circle(@size);
        display: inline-block;
        background-color: @color;
    }
    .line {
        border-bottom: solid 2px @color;
        position: absolute;
        top: @size/2-1;
        width: @width;
    }
    .text {
        position: absolute;
        top: -5px;
        margin-left: 10px;
        .a_16_m;
    }
}

.step-progress-dashed(@size, @color, @width) {
    position: relative;
    .circle {
        .circle(@size);
        display: inline-block;
        background-color: #ffffff;
        border: dashed 1px @color;
    }
    .line {
        border-bottom: dashed 1px @color;
        position: absolute;
        top: @size/2-1;
        width: @width;
    }
    .text {
        position: absolute;
        top: -5px;
        margin-left: 10px;
        .a_16_m;
    }
}

.step-progress-solid(@size, @color, @width) {
    position: relative;
    .circle {
        .circle(@size);
        display: inline-block;
        background-color: #ffffff;
        border: solid 1px @color;
    }
    .line {
        border-bottom: solid 1px @color;
        position: absolute;
        top: @size/2-1;
        width: @width;
    }
    .text {
        position: absolute;
        top: -5px;
        margin-left: 10px;
        .a_16_m;
    }
}