// ----------------------- //
// Manage colors
//

// ------------ //
// DEFAULT
//
.glyphicon {
  color: @hwk-blue-light;
}
#carousel-header,
#top,
#footer-bottom {
  .glyphicon {
    color: white;
  }
}
.navbar-fixed-top {
  .glyphicon {
    color: @hwk-blue-dark;
  }
}

// ------------ //
// BODY COLOR
//
body.color-hwk-blue-dark {
  // header-content
  .hwk-header-content {
    background-color: @hwk-blue-dark;
    .header-deco {
      .color-light {
        background-color: @hwk-blue-dark-75;
      }
      .color-lighter {
        background-color: @hwk-blue-dark-50;
      }
    }
  }
  // content elements
  #content .content {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      span {
        color: @hwk-blue-dark;
      }
    }
    .glyphicon.allow-change-color, .glyphicon.color-hwk-blue-dark {
      color: @hwk-blue-dark;
    }
    blockquote {
      --blockquote-color: @hwk-blue-dark;
    }
    ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
      color: @hwk-blue-dark;
    }
    .listgroup-color,
    .listgroup-info p {
      color: @hwk-blue-dark;
    }
    .listgroup-intro {
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        color: @hwk-blue-dark;
      }
    }
  }
  // svg
}
body.color-hwk-blue-light {
  // header-content
  .hwk-header-content {
    background-color: @hwk-blue-light;
    .header-deco {
      .color-light {
        background-color: @hwk-blue-light-75;
      }
      .color-lighter {
        background-color: @hwk-blue-light-50;
      }
    }
  }
  // content elements
  #content .content {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      span {
        color: @hwk-blue-light;
      }
    }
    .glyphicon.allow-change-color, .glyphicon.color-hwk-blue-light {
      color: @hwk-blue-light;
    }
    blockquote {
      --blockquote-color: @hwk-blue-light;
    }
    ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
      color: @hwk-blue-light;
    }
    .listgroup-color,
    .listgroup-info p {
      color: @hwk-blue-light;
    }
    .listgroup-intro {
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        color: @hwk-blue-light;
      }
    }
  }
  // svg
}

body.color-hwk-green-dark {
  // header-content
  .hwk-header-content {
    background-color: @hwk-green-dark;
    .header-deco {
      .color-light {
        background-color: @hwk-green-light;
      }
      .color-lighter {
        background-color: @hwk-green-light-75;
      }
    }
  }
  // content elements
  #content .content {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      span {
        color: @hwk-green-dark;
      }
    }
    .glyphicon.allow-change-color, .glyphicon.color-hwk-green-dark {
      color: @hwk-green-dark;
    }
    blockquote {
      --blockquote-color: @hwk-green-dark;
    }
    ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
      color: @hwk-green-dark;
    }
    .listgroup-color,
    .listgroup-info p {
      color: @hwk-green-dark;
    }
    .listgroup-intro {
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        color: @hwk-green-dark;
      }
    }
  }
}
body.color-hwk-orange {
  // header-content
  .hwk-header-content {
    background-color: @hwk-orange;
    .header-deco {
      .color-light {
        background-color: @hwk-yellow;
      }
      .color-lighter {
        background-color: @hwk-yellow-75;
      }
    }
  }
  // content elements
  #content .content {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      span {
        color: @hwk-orange;
      }
    }
    .glyphicon.allow-change-color, .glyphicon.color-hwk-orange {
      color: @hwk-orange;
    }
    blockquote {
      --blockquote-color: @hwk-orange;
    }
    ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
      color: @hwk-orange;
    }
    .listgroup-color,
    .listgroup-info p {
      color: @hwk-orange;
    }
    .listgroup-intro {
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        color: @hwk-orange;
      }
    }
  }
}
body.color-hwk-red-dark {
  // header-content
  .hwk-header-content {
    background-color: @hwk-red-dark;
    .header-deco {
      .color-light {
        background-color: @hwk-red-light;
      }
      .color-lighter {
        background-color: @hwk-red-light-75;
      }
    }
  }
  // content elements
  #content .content {
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      span {
        color: @hwk-red-dark;
      }
    }
    .glyphicon.allow-change-color, .glyphicon.color-hwk-red-dark {
      color: @hwk-red-dark;
    }
    blockquote {
      --blockquote-color: @hwk-red-dark;
    }
    ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
      color: @hwk-red-dark;
    }
    .listgroup-color,
    .listgroup-info p {
      color: @hwk-red-dark;
    }
    .listgroup-intro {
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        color: @hwk-red-dark;
      }
    }
  }
}




// -------------------- //
// HEADER SLIDER COLORS
//

// slider ON TOP //
.color-hwk-green-dark #carousel-header.carousel .carousel-inner .item.text-on-top .slider-text,
#carousel-header.carousel .carousel-inner .item.text-on-top.color-hwk-green-dark .slider-text,
#carousel-header.carousel .carousel-inner .item.text-on-top .color-hwk-green-dark + .slider-text {
  h1, .h1 {
    background-color: @hwk-green-dark;
    .slider-text-h1-deco {
      background-color: @hwk-green-light;
    }
  }
}
.color-hwk-orange #carousel-header.carousel .carousel-inner .item.text-on-top .slider-text,
#carousel-header.carousel .carousel-inner .item.text-on-top.color-hwk-orange .slider-text,
#carousel-header.carousel .carousel-inner .item.text-on-top .color-hwk-orange + .slider-text {
  h1, .h1 {
    background-color: @hwk-orange;
    .slider-text-h1-deco {
      background-color: @hwk-yellow;
    }
  }
}
.color-hwk-red-dark #carousel-header.carousel .carousel-inner .item.text-on-top .slider-text,
#carousel-header.carousel .carousel-inner .item.text-on-top.color-hwk-red-dark .slider-text,
#carousel-header.carousel .carousel-inner .item.text-on-top .color-hwk-red-dark + .slider-text {
  h1, .h1 {
    background-color: @hwk-red-dark;
    .slider-text-h1-deco {
      background-color: @hwk-red-light;
    }
  }
}

// slider DEFAULT //
.color-hwk-green-dark #carousel-header.carousel .carousel-inner .item:not(.text-on-top) .slider-text,
#carousel-header.carousel .carousel-inner .item:not(.text-on-top).color-hwk-green-dark .slider-text,
#carousel-header.carousel .carousel-inner .item:not(.text-on-top) .slider-text.color-hwk-green-dark {
  h1, .h1 {
    color: @headings-color;
    &::before {
      background-color: @hwk-green-dark;
    }
    span {
      color: @hwk-green-dark;
    }
  }
}
.color-hwk-orange #carousel-header.carousel .carousel-inner .item:not(.text-on-top) .slider-text,
#carousel-header.carousel .carousel-inner .item:not(.text-on-top).color-hwk-orange .slider-text,
#carousel-header.carousel .carousel-inner .item:not(.text-on-top) .slider-text.color-hwk-orange {
  h1, .h1 {
    color: @headings-color;
    &::before {
      background-color: @hwk-orange;
    }
    span {
      color: @hwk-orange;
    }
  }
}
.color-hwk-red-dark #carousel-header.carousel .carousel-inner .item:not(.text-on-top) .slider-text,
#carousel-header.carousel .carousel-inner .item:not(.text-on-top).color-hwk-red-dark .slider-text,
#carousel-header.carousel .carousel-inner .item:not(.text-on-top) .slider-text.color-hwk-red-dark {
  h1, .h1 {
    color: @headings-color;
    &::before {
      background-color: @hwk-red-dark;
    }
    span {
      color: @hwk-red-dark;
    }
  }
}


// --------------- //
// COLOR CLASSES
//

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, blockquote, caption, li, code {
  &.color-hwk-blue-dark {
    color: @hwk-blue-dark !important;
  }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, blockquote, caption, li, code {
  &.color-hwk-blue-light {
    color: @hwk-blue-light!important;
  }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, blockquote, caption, li, code {
  &.color-hwk-green-dark {
    color: @hwk-green-dark !important;
  }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, blockquote, caption, li, code {
  &.color-hwk-orange {
    color: @hwk-orange !important;
  }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, span, blockquote, caption, li, code {
  &.color-hwk-red-dark {
    color: @hwk-red-dark !important;
  }
}

.white {
  color: #fff !important
}

.grey-light {
  color: @gray-light !important
}

.grey {
  color: @gray !important
}

.grey-dark {
  color: @gray-dark !important
}

.black {
  color: @gray-dark !important
}

div.color-hwk-blue-light {
  background-color:@hwk-blue-light !important
}

div.color-hwk-blue-light-75 {
  background-color: @hwk-blue-light-75 !important
}

div.color-hwk-blue-light-50 {
  background-color: @hwk-blue-light-50 !important
}

div .color-hwk-blue-light-25, form .color-hwk-blue-light-25 {
  background-color: @hwk-blue-light-25 !important
}

div.color-hwk-blue-dark {
  background-color: @hwk-blue-dark !important
}

div.color-hwk-blue-dark-75 {
  background-color: @hwk-blue-dark-75 !important
}

div.color-hwk-blue-dark-50 {
  background-color: @hwk-blue-dark-50 !important
}

div.color-hwk-blue-dark-25 {
  background-color: @hwk-blue-dark-25 !important
}

div.color-hwk-red-dark {
  background-color: @hwk-red-dark !important
}

div.color-hwk-red-dark-75 {
  background-color: @hwk-red-dark-75 !important
}

div.color-hwk-red-light {
  background-color: @hwk-red-light !important
}

div.color-hwk-red-light-75 {
  background-color: @hwk-red-light-75 !important
}

div.color-hwk-yellow {
  background-color: @hwk-yellow !important
}

div.color-hwk-yellow-75 {
  background-color: @hwk-yellow-75 !important
}

div.color-hwk-orange {
  background-color: @hwk-orange !important
}

div.color-hwk-orange-75 {
  background-color: @hwk-orange-75 !important
}

div.color-hwk-green-dark {
  background-color: @hwk-green-dark !important
}

div.color-hwk-green-dark-75 {
  background-color: @hwk-green-dark-75 !important
}

div.color-hwk-green-light {
  background-color: @hwk-green-light !important
}

div.color-hwk-green-light-75 {
  background-color: @hwk-green-light-75 !important
}

div.color-grey-light {
  background-color: #eee !important
}