/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

// Classes styles: Colors
// css colors classes for page formating.

//== Text Color 

.text-primary {
  &,
  .dark & {
    color: @brand-primary;
  }
}

.text-secondary {
  &,
  .dark & {
    color: @brand-secondary;
  }
}

.text-black {
  &,
  .dark & {
    color: @black;
  }
}

.text-white {
  &,
  .dark & {
    color: @white;
  }
}

.dark {
  &,
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    color: @white;
  }
}

// Boostrap color variables (Theme color palette)
.brand-primary{
  color:@brand-primary;
  hr& {
    border-color: @brand-primary;
  }
}

.brand-secondary{
  color:@brand-secondary;
  hr& {
    border-color: @brand-secondary;
  }
}

.brand-tertiary{
  color:@brand-tertiary;
  hr& {
    border-color: @brand-tertiary;
  }
}

.brand-quaternary{
  color:@brand-quaternary;
  hr& {
    border-color: @brand-quaternary;
  }
}

.brand-quinary{
  color:@brand-quinary;
  hr& {
    border-color: @brand-quinary;
  }
}

.brand-success{
  color:@brand-success;
}

.brand-info{
  color:@brand-info;
}

.brand-warning{
  color:@brand-warning;
}

.brand-danger{
  color:@brand-danger;
}

// Other useful colors
// Caution: These colors wont change much from
// theme to theme
.orange {
  color: @orange;
  hr& {
    border-color: @orange;
  }
}

.blue{
  color: @blue;
  hr& {
    border-color: @blue;
  }
}

.darkblue{
  color: darken(@blue, 20%);
  hr& {
    border-color: darken(@blue, 20%);
  }
}

.yellow {
  color: yellow;
  hr& {
    border-color: yellow;
  }
}

.red {
  color: @red;
  hr& {
    border-color: @red;
  }
}

.lightred {
  color: lighten(@red, 25%);
  hr& {
    border-color: lighten(@red, 25%);
  }
}

.darkred {
  color: darken(@red, 20%);
  hr& {
    border-color: darken(@red, 20%);
  }
}

.green {
  color: green;
  hr& {
    border-color: green;
  }
}

.black{
  color:@black;
  hr& {
    border-color: @black;
  }
}

.white {
  color:@white;
  hr& {
    border-color: @white;
  }
}

.gray-light {
  color: @gray-light;
  hr& {
    border-color: @gray-light;
  }
}

.gray{
  color: darken(#f5f5f5, 35%);
  hr& {
    border-color: darken(#f5f5f5, 35%);
  }
}

//== Backgrounds 

.bg-primary {
  color: unset;
  background-color: @brand-primary;
}

.bg-secondary {
  background-color: @brand-secondary;
}

.bg-black {
  background-color: @black;
}

.background-primary{
  background:@brand-primary;
  color: @white;
  h2, h3, h4, p, li {
    color:inherit;
  }
}

.background-secondary{
  background:@brand-secondary;
  color: @white;
  h2, h3, h4, p, li {
    color:inherit;
  }
}

.background-tertiary{
  background:@brand-tertiary;
  color: @white;
  h2, h3, h4, p, li {
    color:inherit;
  }
}

.background-quaternary{
  background:@brand-quaternary;
  color: @white;
  h2, h3, h4, p, li {
    color:inherit;
  }
}

.background-quinary{
  background:@brand-quinary;
  color: @white;
  h2, h3, h4, p, li {
    color:inherit;
  }
}

// Backgrounds
.background-bg-body{
  background:@body-bg;
}

.background-charcoal {
  background: #2f2f31;
  color: @white;
  select {
    color: #2f2f31;
  }
}

.background-mid-grey {
  background: darken(#f5f5f5, 35%);
}

.background-grey {
  background: @eclipse-highlight-grey;
}

.background-light-grey {
  background:#f1f1f1;
}

.background-purple {
  background: @purple;
  color: @white;
  select {
    color: #2f2f31;
  }
}

.background-blue {
  /* @todo: consider user @blue */ 
  background: @brand-info;
  color: @white;
}

.background-white {
  background: @white;
}

.background-orange {
  background: @orange;
  color: @black;
  select {
    color: @black;
  }
}

// LABEL
.label-purple {
  background-color:@label-purple-bg;
}

#novaContent.background-image-none {
  background-image: none;
}

// Orange table rows 
tr.background-orange{
  background: lighten(@orange, 20%);
}

.table-striped>tbody>tr:nth-of-type(odd).background-orange {
  background: lighten(@orange, 20%);
}

.table-hover>tbody>tr.background-orange:hover{
   background: @orange;
}

// BORDER
.box-gray-border {
  border: 1px solid #d6d6d6;
}
// Grid/Columns
.border-left-col {
  @media (min-width: @screen-sm-min) {
    border-left: 1px solid #ccc;
    padding-left: 62px;
  }
}

.border-right-col {
  @media (min-width: @screen-md-min) {
    border-right: 1px solid #ccc;
    padding-right: 62px;
  }
}

.border-grey-right {
  border-right:1px solid #ccc;
}

.no-border {
  border: none ! important;
}
