/*==================================================
  Theme Skin - Controlled by skin settings.less
==================================================== */

/* BACKGROUND CONTEXTUALS
 */
.bg-primary when (@skin-primary) and (@skin-primary-bg) {
  .bg-variant(@brand-primary);
}
.bg-success when (@skin-success) and (@skin-success-bg) {
  .bg-variant(@brand-success);
}
.bg-info when (@skin-info) and (@skin-info-bg) {
  .bg-variant(@brand-info);
}
.bg-warning when (@skin-warning) and (@skin-warning-bg) {
  .bg-variant(@brand-warning);
}
.bg-danger when (@skin-danger) and (@skin-danger-bg) {
  .bg-variant(@brand-danger);
}
.bg-alert when (@skin-alert) and (@skin-alert-bg) {
  .bg-variant(@brand-alert);
}
.bg-system when (@skin-system) and (@skin-system-bg) {
  .bg-variant(@brand-system);
}
.bg-dark when (@skin-dark) and (@skin-dark-bg) {
  .bg-variant(@brand-dark);
}
.bg-light {
  .bg-variant-light(@brand-light);
}
.bg-white {
  .bg-variant-light(@white);
  background-color: #FFF !important;  
}


/* BADGES CONTEXTUALS
 * linked labels get darker on :hover
 */
.badge-default {
  .label-variant(@label-default-bg);
}
.badge-primary when (@skin-primary) and (@skin-primary-badge) {
  .label-variant(@label-primary-bg);
}
.badge-success when (@skin-success) and (@skin-success-badge) {
  .label-variant(@label-success-bg);
}
.badge-info when (@skin-info) and (@skin-info-badge) {
  .label-variant(@label-info-bg);
}
.badge-warning when (@skin-warning) and (@skin-warning-badge) {
  .label-variant(@label-warning-bg);
}
.badge-danger when (@skin-danger) and (@skin-danger-badge) {
  .label-variant(@label-danger-bg);
}
.badge-alert when (@skin-alert) and (@skin-alert-badge) {
  .label-variant(@label-alert-bg);
}
.badge-system when (@skin-system) and (@skin-system-badge) {
  .label-variant(@label-system-bg);
}
.badge-dark when (@skin-dark) and (@skin-dark-badge) {
  .label-variant(@label-dark-bg);
}


/* LABELS CONTEXTUALS
 */
.label-muted {
  .label-variant(@label-muted-bg);
}
.label-default {
  .label-variant(@label-default-bg);
}
.label-primary when (@skin-primary) and (@skin-primary-label) {
  .label-variant(@label-primary-bg);
}
.label-success when (@skin-success) and (@skin-success-label) {
  .label-variant(@label-success-bg);
}
.label-info when (@skin-info) and (@skin-info-label) {
  .label-variant(@label-info-bg);
}
.label-warning when (@skin-warning) and (@skin-warning-label) {
  .label-variant(@label-warning-bg);
}
.label-danger when (@skin-danger) and (@skin-danger-label) {
  .label-variant(@label-danger-bg);
}
.label-alert when (@skin-alert) and (@skin-alert-label) {
  .label-variant(@label-alert-bg);
}
.label-system when (@skin-system) and (@skin-system-label) {
  .label-variant(@label-system-bg);
}
.label-dark when (@skin-dark) and (@skin-dark-label) {
  .label-variant(@label-dark-bg);
}


/* BUTTON CONTEXTUALS
 */
.btn-default {
    // Special Settings for Light/White Buttons
    .button-variant-light(@btn-default-color; @btn-default-bg; @btn-default-border);
}
// Primary appears as blue
.btn-primary when (@skin-primary) and (@skin-primary-btn) {
    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Success appears as green
.btn-success when (@skin-success) and (@skin-success-btn) {
    .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as light blue
.btn-info when (@skin-info) and (@skin-info-btn) {
    .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Warning appears as orange
.btn-warning when (@skin-warning) and (@skin-warning-btn) {
    .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger when (@skin-danger) and (@skin-danger-btn) {
    .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Alert and error appear as purple
.btn-alert when (@skin-alert) and (@skin-alert-btn) {
    .button-variant(@btn-alert-color; @btn-alert-bg; @btn-alert-border);
}
// System and error appear as teal
.btn-system when (@skin-system) and (@skin-system-btn) {
    .button-variant(@btn-system-color; @btn-system-bg; @btn-system-border);
}
// Dark and error appear as dark/black
.btn-dark when (@skin-dark) and (@skin-dark-btn) {
    .button-variant(@btn-dark-color; @btn-dark-bg; @btn-dark-border);
}

/* ALT BUTTON CONTEXTUALS
 */
.btn.btn-alt.btn-default { border-left-color: #AAA; }
.btn.btn-alt.btn-primary { border-left-color: @brand-primary; }
.btn.btn-alt.btn-success { border-left-color: @brand-success; }
.btn.btn-alt.btn-info { border-left-color: @brand-info; }
.btn.btn-alt.btn-warning { border-left-color: @brand-warning; }
.btn.btn-alt.btn-danger { border-left-color: @brand-danger; }
.btn.btn-alt.btn-alert { border-left-color: @brand-alert; }
.btn.btn-alt.btn-system { border-left-color: @brand-system; }
.btn.btn-alt.btn-dark { border-left-color: @brand-dark; }


/* CHECKBOX/RADIO CONTEXTUALS
 */
& when (@skin-primary) and (@skin-primary-checkbox) {
    .checkbox-variant(@brand: primary; @brand-primary);    
}
& when (@skin-success) and (@skin-success-checkbox) {
    .checkbox-variant(@brand: success; @brand-success);    
}
& when (@skin-info) and (@skin-info-checkbox) {
    .checkbox-variant(@brand: info; @brand-info);    
}
& when (@skin-warning) and (@skin-warning-checkbox) {
    .checkbox-variant(@brand: warning; @brand-warning);    
}
& when (@skin-danger) and (@skin-danger-checkbox) {
    .checkbox-variant(@brand: danger; @brand-danger);    
}
& when (@skin-alert) and (@skin-alert-checkbox) {
    .checkbox-variant(@brand: alert; @brand-alert);    
}
& when (@skin-system) and (@skin-system-checkbox) {
    .checkbox-variant(@brand: system; @brand-system);    
}
& when (@skin-dark) and (@skin-dark-checkbox) {
    .checkbox-variant(@brand: dark; @brand-dark);    
}

// Light Contextual
.checkbox-light-variant(@brand: light; @brand-light);    

// Disabled state
& when (true) {
    .checkbox-variant(@brand: disabled; #AAA);    
}


/* LISTGROUP CONTEXTUALS
 * Add modifier classes to change text and background color on individual items.
 * Organizationally, this must come after the `:hover` states.
 */
& when (@skin-primary) and (@skin-primary-listgroup) {
  .list-group-item-variant(primary; @state-primary-bg; @state-primary-text);
}
& when (@skin-success) and (@skin-success-listgroup) {
  .list-group-item-variant(success; @state-success-bg; @state-success-text);
}
& when (@skin-info) and (@skin-info-listgroup) {
  .list-group-item-variant(info; @state-info-bg; @state-info-text);
}
& when (@skin-warning) and (@skin-warning-listgroup) {
  .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
}
& when (@skin-danger) and (@skin-danger-listgroup) {
  .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
}
& when (@skin-alert) and (@skin-alert-listgroup) {
  .list-group-item-variant(alert; @state-alert-bg; @state-alert-text);
}
& when (@skin-system) and (@skin-system-listgroup) {
  .list-group-item-variant(system; @state-system-bg; @state-system-text);
}
& when (@skin-dark) and (@skin-dark-listgroup) {
  .list-group-item-variant(dark; @state-dark-bg; @state-dark-text);
}


/* PANEL CONTEXTUALS
 */
.panel-primary when (@skin-primary) and (@skin-primary-panel) {
  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success when (@skin-success) and (@skin-success-panel) {
  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-info when (@skin-info) and (@skin-info-panel) {
  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
.panel-warning when (@skin-warning) and (@skin-warning-panel) {
  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger when (@skin-danger) and (@skin-danger-panel) {
  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-alert when (@skin-alert) and (@skin-alert-panel) {
  .panel-variant(@panel-alert-border; @panel-alert-text; @panel-alert-heading-bg; @panel-alert-border);
}
.panel-system when (@skin-system) and (@skin-system-panel) {
  .panel-variant(@panel-system-border; @panel-system-text; @panel-system-heading-bg; @panel-system-border);
}
.panel-dark when (@skin-dark) and (@skin-dark-panel) {
  .panel-variant(@panel-dark-border; @panel-dark-text; @panel-dark-heading-bg; @panel-dark-border);
}


/* PROGRESS BAR CONTEXTUALS
 */
.progress-bar-default {
  .progress-bar-variant(@progress-bar-default-bg);
}
.progress-bar-primary when (@skin-primary) and (@skin-primary-pbar) {
  .progress-bar-variant(@progress-bar-primary-bg);
}
.progress-bar-success when (@skin-success) and (@skin-success-pbar) {
  .progress-bar-variant(@progress-bar-success-bg);
}
.progress-bar-info when (@skin-info) and (@skin-info-pbar) {
  .progress-bar-variant(@progress-bar-info-bg);
}
.progress-bar-warning when (@skin-warning) and (@skin-warning-pbar) {
  .progress-bar-variant(@progress-bar-warning-bg);
}
.progress-bar-danger when (@skin-danger) and (@skin-danger-pbar) {
  .progress-bar-variant(@progress-bar-danger-bg);
}
.progress-bar-alert when (@skin-alert) and (@skin-alert-pbar) {
  .progress-bar-variant(@progress-bar-alert-bg);
}
.progress-bar-system when (@skin-system) and (@skin-system-pbar) {
  .progress-bar-variant(@progress-bar-system-bg);
}
.progress-bar-dark when (@skin-dark) and (@skin-dark-pbar) {
  .progress-bar-variant(@progress-bar-dark-bg);
}


/* SWITCH CONTEXTUALS 
 */
& when (@skin-primary) and (@skin-primary-switch) {
    div.switch.switch-primary input:checked + label { background-color: @brand-primary; }
}
& when (@skin-success) and (@skin-success-switch) {
    div.switch.switch-success input:checked + label { background-color: @brand-success; }
}
& when (@skin-info) and (@skin-info-switch) {
    div.switch.switch-info input:checked + label { background-color: @brand-info; }
}
& when (@skin-warning) and (@skin-warning-switch) {
    div.switch.switch-warning input:checked + label { background-color: @brand-warning; }
}
& when (@skin-danger) and (@skin-danger-switch) {
    div.switch.switch-danger input:checked + label { background-color: @brand-danger; }
}
& when (@skin-alert) and (@skin-alert-switch) {
    div.switch.switch-alert input:checked + label { background-color: @brand-alert; }
}
& when (@skin-system) and (@skin-system-switch) {
    div.switch.switch-system input:checked + label { background-color: @brand-system; }
}
& when (@skin-dark) and (@skin-dark-switch) {
    div.switch.switch-dark input:checked + label { background-color: @brand-dark; }
}


/* TABLE BG CONTEXTUALS
 * Exact selectors below required to override `.table-striped`
 * and prevent inheritance to nested tables.
 */
.table-row-variant(active; @table-bg-active);
.table-row-variant(default; @state-default-bg);

& when (@skin-primary) and (@skin-primary-table) {  
  .table-row-variant(primary; @state-primary-bg);
}
& when (@skin-success) and (@skin-success-table) {  
  .table-row-variant(success; @state-success-bg);
}
& when (@skin-info) and (@skin-info-table) {  
  .table-row-variant(info; @state-info-bg);
}
& when (@skin-warning) and (@skin-warning-table) {  
  .table-row-variant(warning; @state-warning-bg);
}
& when (@skin-danger) and (@skin-danger-table) {  
  .table-row-variant(danger; @state-danger-bg);
}
& when (@skin-alert) and (@skin-alert-table) {  
  .table-row-variant(alert; @state-alert-bg);
}
& when (@skin-system) and (@skin-system-table) {  
  .table-row-variant(system; @state-system-bg);
}
& when (@skin-dark) and (@skin-dark-table) {  
  .table-row-variant(dark; @state-dark-bg);
}


/* TEXT COLOR CONTEXTUALS
 */
.text-white {
  .text-emphasis-variant(@white);
}
.text-muted {
  .text-emphasis-variant(@muted);
}
.text-primary when (@skin-primary) and (@skin-primary-text) {
  .text-emphasis-variant(@brand-primary);
}
.text-success when (@skin-success) and (@skin-success-text) {
  .text-emphasis-variant(@brand-success);
}
.text-info when (@skin-info) and (@skin-info-text) {
  .text-emphasis-variant(@brand-info);
}
.text-warning when (@skin-warning) and (@skin-warning-text) {
  .text-emphasis-variant(@brand-warning);
}
.text-danger when (@skin-danger) and (@skin-danger-text) {
  .text-emphasis-variant(@brand-danger);
}
.text-alert when (@skin-alert) and (@skin-alert-text) {
  .text-emphasis-variant(@brand-alert);
}
.text-system when (@skin-system) and (@skin-system-text) {
  .text-emphasis-variant(@brand-system);
}
.text-dark when (@skin-dark) and (@skin-dark-text) {
  .text-emphasis-variant(@brand-dark);
}

// Transparent Text (not fully crossbrowser supported)
.text-tp {
  color: rgba(0,0,0,0.2);
  a&:hover {
     color: rgba(0,0,0,0.3);
  }
}


/* BLOCKQUOTE CONTEXTUALS
 */
blockquote {
  &.blockquote-primary { border-color: @brand-primary; }
  &.blockquote-success { border-color: @brand-success; }
  &.blockquote-info { border-color: @brand-info; }
  &.blockquote-warning { border-color: @brand-warning; }
  &.blockquote-danger { border-color: @brand-danger; }
  &.blockquote-alert { border-color: @brand-alert; }
  &.blockquote-system { border-color: @brand-system; }
  &.blockquote-dark { border-color: @brand-dark; }
}


/* DROPCAP CONTEXTUALS
 */
.dropcap {
  &.dropcap-default:first-letter { color: #666; }
  &.dropcap-primary:first-letter { color: @brand-primary; }
  &.dropcap-success:first-letter { color: @brand-success; }
  &.dropcap-info:first-letter { color: @brand-info; }
  &.dropcap-warning:first-letter { color: @brand-warning; }
  &.dropcap-danger:first-letter { color: @brand-danger; }
  &.dropcap-alert:first-letter { color: @brand-alert; }
  &.dropcap-system:first-letter { color: @brand-system; }
  &.dropcap-dark:first-letter { color: #111; }
  &.dropcap-muted:first-letter { color: #AAA; }

  &.dropcap-fill:first-letter { color: #FFF; }
  &.dropcap-fill.dropcap-default:first-letter { color: #444; background-color: @brand-default; }
  &.dropcap-fill.dropcap-primary:first-letter { background-color: @brand-primary; }
  &.dropcap-fill.dropcap-success:first-letter { background-color: @brand-success; }
  &.dropcap-fill.dropcap-info:first-letter { background-color: @brand-info; }
  &.dropcap-fill.dropcap-warning:first-letter { background-color: @brand-warning; }
  &.dropcap-fill.dropcap-danger:first-letter { background-color: @brand-danger; }
  &.dropcap-fill.dropcap-alert:first-letter { background-color: @brand-alert; }
  &.dropcap-fill.dropcap-system:first-letter { background-color: @brand-system; }
  &.dropcap-fill.dropcap-dark:first-letter { background-color: @brand-dark; }
  &.dropcap-fill.dropcap-muted:first-letter { color: #888; background-color: @brand-default; }
}


/* ALERT CONTEXTUALS
 */
.alert-primary when (@skin-primary) and (@skin-primary-alert) {
  .alert-variant(@alert-primary-bg); 
}
.alert-success when (@skin-success) and (@skin-success-alert) {
  .alert-variant(@alert-success-bg);
}
.alert-info when (@skin-info) and (@skin-info-alert) {
  .alert-variant(@alert-info-bg);
}
.alert-warning when (@skin-warning) and (@skin-warning-alert) {
  .alert-variant(@alert-warning-bg);
}
.alert-danger when (@skin-danger) and (@skin-danger-alert) {
  .alert-variant(@alert-danger-bg);
}
.alert-alert when (@skin-alert) and (@skin-alert-alert) {
  .alert-variant(@alert-alert-bg);
}
.alert-system when (@skin-system) and (@skin-system-alert) {
  .alert-variant(@alert-system-bg);
}

// Default & Dark colors are commonly styled manually as graytones and neutral 
// can be incredibly difficult to automate via opacity/hue/saturation etc
//
// Default
.alert-default { 
  color: #888;
  background-color: @alert-default-bg;

  .alert-link { color: #777; }

  &.alert-border-right { border-right-color: darken(@alert-default-bg, 13%); }
  &.alert-border-top { border-top-color: darken(@alert-default-bg, 13%); }
  &.alert-border-bottom { border-bottom-color: darken(@alert-default-bg, 13%); }
  &.alert-border-left { border-left-color: darken(@alert-default-bg, 13%); }

  // Color shade variants
  &.pastel,
  &.light { background-color: lighten(@alert-default-bg, 5%); border-color: rgba(0,0,0,0.15) }
  &.dark { background-color: darken(@alert-default-bg, 4%); }
}
// Dark
.alert-dark when (@skin-dark) and (@skin-dark) {
  background-color: lighten(@alert-dark-bg, 18%);

  &.alert-border-right { border-right-color: darken(@alert-dark-bg, 13%); }
  &.alert-border-top { border-top-color: darken(@alert-dark-bg, 13%); }
  &.alert-border-bottom { border-bottom-color: darken(@alert-dark-bg, 13%); }
  &.alert-border-left { border-left-color: darken(@alert-dark-bg, 13%); }

  &.pastel,
  &.light { 
    color: lighten(@alert-dark-bg, 20%);
    background-color: lighten(@alert-dark-bg, 57%);
    .alert-link { color: lighten(@alert-dark-bg, 10%); }
  } 
  &.dark { background-color: lighten(@alert-dark-bg, 7%); }
}


/* DROPDOWNS - ACTIVE ITEM CONTEXTUALS
 */
.dropdown-toggle.btn-primary when (@skin-primary) and (@skin-primary-btn) {
  .dropdown-variant(@brand-primary); 
}
.dropdown-toggle.btn-success when (@skin-success) and (@skin-success-btn) {
  .dropdown-variant(@brand-success); 
}
.dropdown-toggle.btn-info when (@skin-info) and (@skin-info-btn) {
  .dropdown-variant(@brand-info); 
}
.dropdown-toggle.btn-warning when (@skin-warning) and (@skin-warning-btn) {
  .dropdown-variant(@brand-warning); 
}
.dropdown-toggle.btn-danger when (@skin-danger) and (@skin-danger-btn) {
  .dropdown-variant(@brand-danger); 
}
.dropdown-toggle.btn-alert when (@skin-alert) and (@skin-alert-btn) {
  .dropdown-variant(@brand-alert); 
}
.dropdown-toggle.btn-system when (@skin-system) and (@skin-system-btn) {
  .dropdown-variant(@brand-system); 
}
.dropdown-toggle.btn-dark when (@skin-dark) and (@skin-dark-btn) {
  .dropdown-variant(@brand-dark); 
}





/*====================================================
  Nav Pill Contextuals - Active Item
====================================================== */

/* pills primary */
& when (@skin-primary) and (@skin-primary-tabs) {  
  .pills-variant(primary; @brand-primary);
}
/* pills success */
& when (@skin-success) and (@skin-success-tabs) {  
  .pills-variant(success; @brand-success);
}
/* pills info */
& when (@skin-info) and (@skin-info-tabs) {  
  .pills-variant(info; @brand-info);
}
/* pills warning */
& when (@skin-warning) and (@skin-warning-tabs) {  
  .pills-variant(warning; @brand-warning);
}
/* pills danger */
& when (@skin-danger) and (@skin-danger-tabs) {  
  .pills-variant(danger; @brand-danger);
}
/* pills alert */
& when (@skin-alert) and (@skin-alert-tabs) {  
  .pills-variant(alert; @brand-alert);
}
/* pills system */
& when (@skin-system) and (@skin-system-tabs) {  
  .pills-variant(system; @brand-system);
}
/* pills dark */
& when (@skin-dark) and (@skin-dark-tabs) {  
  .pills-variant(dark; @brand-dark);
}



/*====================================================
  Tab Block Contextuals - Active Item Border
====================================================== */
/* tabs primary */
& when (@skin-primary) and (@skin-primary-tabs) {  
  .tabs-variant(primary; @brand-primary);
}
/* tabs success */
& when (@skin-success) and (@skin-success-tabs) {  
  .tabs-variant(success; @brand-success);
}
/* tabs info */
& when (@skin-info) and (@skin-info-tabs) {  
  .tabs-variant(info; @brand-info);
}
/* tabs warning */
& when (@skin-warning) and (@skin-warning-tabs) {  
  .tabs-variant(warning; @brand-warning);
}
/* tabs danger */
& when (@skin-danger) and (@skin-danger-tabs) {  
  .tabs-variant(danger; @brand-danger);
}
/* tabs alert */
& when (@skin-alert) and (@skin-alert-tabs) {  
  .tabs-variant(alert; @brand-alert);
}
/* tabs system */
& when (@skin-system) and (@skin-system-tabs) {  
  .tabs-variant(system; @brand-system);
}
/* tabs dark */
& when (@skin-dark) and (@skin-dark-tabs) {  
  .tabs-variant(dark; @brand-dark);
}