@import 'variables_color_style';




// --------------------------------------
// CLASSES FOR DESIGNERS
// --------------------------------------

// Output in designer/developer CSS File (just for developer)
// don't hesitage to deactivate the following code
// these classed are not used in kivitendo

h1::after { content: " @{colorstyle}"; } // display style name 


:root {


  --gray-standard:      @gray-standard;
  --gray-superdark:     @gray-superdark; // Black
  --gray-verydark:      @gray-verydark;
  --gray-darker:        @gray-darker;
  --gray-dark:          @gray-dark;
  --gray-light:         @gray-light;
  --gray-lighter:       @gray-lighter;
  --gray-verylight:     @gray-verylight;
  --gray-superlight:    @gray-superlight; // White

  --color-standard:     @base-standard;
  --color-superlight:   @base-superlight;
  --color-verylight:    @base-verylight;
  --color-lighter:      @base-lighter;
  --color-light:        @base-light;
  --color-dark:         @base-dark;
  --color-darker:       @base-darker;
  --color-verydark:     @base-verydark;
  --color-superdark:    @base-superdark;

//  --msg-ok-strong:        @color-green-strong; 
//  --msg-ok-light:         @color-green-light; 
//  --msg-error-strong:     @color-red-strong; 
//  --msg-error-light:      @color-red-light; 
//  --msg-hint-strong:      @color-blue-strong; 
//  --msg-hint-light:       @color-blue-light; 
//  --msg-warning-strong:   @color-orange-strong; 
//  --msg-warning-light:    @color-orange-light; 
  --msg-ok-strong:        @msg-green-strong; 
  --msg-ok-light:         @msg-green-light; 
  --msg-error-strong:     @msg-red-strong; 
  --msg-error-light:      @msg-red-light; 
  --msg-hint-strong:      @msg-blue-strong; 
  --msg-hint-light:       @msg-blue-light; 
  --msg-warning-strong:   @msg-orange-strong; 
  --msg-warning-light:    @msg-orange-light; 
  
  --color-green-strong:   @color-green-strong;
  --color-green-light:    @color-green-light;
  --color-red-strong:     @color-red-strong;
  --color-red-light:      @color-red-light;
  --color-blue-strong:    @color-blue-strong;
  --color-blue-light:     @color-blue-light;
  --color-orange-strong:  @color-orange-strong;
  --color-orange-light:   @color-orange-light;  
  
  
  
  --spin_60 : spin(@base-standard,  60);
  --spin_120: spin(@base-standard, 120);
  --spin_180: spin(@base-standard, 180);
  --spin_240: spin(@base-standard, 240);
  
  --style-ocean:            @style_ocean;
  --style-light_blue:       @style_light_blue;
  --style-aqua:             @style_aqua;
  --style-turquoise:        @style_turquoise;
  --style-pine:             @style_pine;
  --style-asparagus:        @style_asparagus;
  --style-petrol:           @style_petrol;
  --style-salmona:          @style_salmona;  
  --style-salmon:           @style_salmon; 
  --style-tangerine:        @style_tangerine; 
  --style-marascino:        @style_marascino;
  --style-maroon:           @style_maroon;
  --style-strawberry:       @style_strawberry;
  --style-pure_red:         @style_pure_red;
  --style-old_lemon:        @style_old_lemon; 
  --style-yellow_to_green:  @style_yellow_to_green;
  --style-eggplant:         @style_eggplant;
  --style-plum:             @style_plum;
  --style-grape:            @style_grape;
  --style-magenta:          @style_magenta;
  --style-lavender:         @style_lavender;
  --style-cayenne:          @style_cayenne;
  --style-mocha:            @style_mocha;
  --style-cantaloupe:       @style_cantaloupe; 
  --style-dark_brown:       @style_dark_brown;
  --style-orange_brown:     @style_orange_brown;
  --style-smack_brown:      @style_smack_brown;
  --style-green_brown:      @style_green_brown; 


}

.color-standard   { color: var(--color-standard); }
.color-superlight { color: var(--color-superlight); }
.color-verylight  { color: var(--color-verylight); }
.color-lighter    { color: var(--color-lighter); }
.color-light      { color: var(--color-light); }
.color-dark       { color: var(--color-dark); }
.color-darker     { color: var(--color-darker); }
.color-verydark   { color: var(--color-verydark); }
.color-superdark  { color: var(--color-superdark); }

.bg-standard      { background-color: var(--color-standard); }
.bg-superlight    { background-color: var(--color-superlight); }
.bg-verylight     { background-color: var(--color-verylight); }
.bg-lighter       { background-color: var(--color-lighter); }
.bg-light         { background-color: var(--color-light); }
.bg-dark          { background-color: var(--color-dark); }
.bg-darker        { background-color: var(--color-darker); }
.bg-verydark      { background-color: var(--color-verydark); }
.bg-superdark     { background-color: var(--color-superdark); }


// Messages
.msg-ok                 { background-color: var(--msg-ok-light);       color: var(--msg-ok-strong);       border-color: var(--msg-ok-strong); }
.msg-error              { background-color: var(--msg-error-light);    color: var(--msg-error-strong);    border-color: var(--msg-error-strong); }
.msg-hint               { background-color: var(--msg-hint-light);     color: var(--msg-hint-strong);     border-color: var(--msg-hint-strong); }
.msg-warning            { background-color: var(--msg-warning-light);  color: var(--msg-warning-strong);  border-color: var(--msg-warning-strong); }
// Message Original Colors
.color-ok               { background-color: var(--color-green-light);  color: var(--color-green-strong);  border-color: var(--color-green-strong); }
.color-error            { background-color: var(--color-red-light);    color: var(--color-red-strong);    border-color: var(--color-red-strong); }
.color-hint             { background-color: var(--color-blue-light);   color: var(--color-blue-strong);   border-color: var(--color-blue-strong); }
.color-warning          { background-color: var(--color-orange-light); color: var(--color-orange-strong); border-color: var(--color-orange-strong); }

.style-ocean            { background-color: var( --style-ocean ); } 
.style-light_blue       { background-color: var( --style-light_blue ); } 
.style-aqua             { background-color: var( --style-aqua ); } 
.style-turquoise        { background-color: var( --style-turquoise ); } 
.style-pine             { background-color: var( --style-pine ); } 
.style-asparagus        { background-color: var( --style-asparagus ); } 
.style-petrol           { background-color: var( --style-petrol ); } 
.style-salmona          { background-color: var( --style-salmona ); }   
.style-salmon           { background-color: var( --style-salmon ); }  
.style-tangerine        { background-color: var( --style-tangerine ); }  
.style-marascino        { background-color: var( --style-marascino ); } 
.style-maroon           { background-color: var( --style-maroon ); } 
.style-strawberry       { background-color: var( --style-strawberry ); } 
.style-pure_red         { background-color: var( --style-pure_red ); } 
.style-old_lemon        { background-color: var( --style-old_lemon ); }  
.style-yellow_to_green  { background-color: var( --style-yellow_to_green ); } 
.style-eggplant         { background-color: var( --style-eggplant ); } 
.style-plum             { background-color: var( --style-plum ); } 
.style-grape            { background-color: var( --style-grape ); } 
.style-magenta          { background-color: var( --style-magenta ); } 
.style-lavender         { background-color: var( --style-lavender ); } 
.style-cayenne          { background-color: var( --style-cayenne ); } 
.style-mocha            { background-color: var( --style-mocha ); } 
.style-cantaloupe       { background-color: var( --style-cantaloupe ); }  
.style-dark_brown       { background-color: var( --style-dark_brown ); } 
.style-orange_brown     { background-color: var( --style-orange_brown ); } 
.style-smack_brown      { background-color: var( --style-smack_brown ); } 
.style-green_brown      { background-color: var( --style-green_brown ); }