/* states */
@mixin stateNormal {
  border: 1px solid $btn-secondary-border;
  background-color: $btn-secondary-bg;
  color: $btn-secondary-color;
}
@mixin stateHover {
  border-color: darken($component-active-bg, 12%);
  background-color: darken($component-active-bg, 8%);
  color: $component-active-color;
}
@mixin stateActive {
  border: 1px solid darken($component-active-bg, 6.5%);
  background-color: $component-active-bg;
  color: $component-active-color;
}
@mixin stateFocused {
  border: 1px solid darken($component-active-bg, 6.5%);
  background-color: $component-active-bg;
  color: $component-active-color;
}


// Chart Palette
@mixin chartPalette1 {
  background-color: $brand-primary!important;
  border: 1px solid darken($brand-primary, 6.5%)!important;
}
@mixin chartPalette2 {
  background-color: $brand-success!important;
  border: 1px solid darken($brand-success, 6.5%)!important;
}
@mixin chartPalette3 {
  background-color: $brand-info!important;
  border: 1px solid darken($brand-info, 6.5%)!important;
}
@mixin chartPalette4 {
  background-color: $brand-warning!important;
  border: 1px solid darken($brand-warning, 6.5%)!important;
}
@mixin chartPalette5 {
  background-color: $brand-danger!important;
  border: 1px solid darken($brand-danger, 6.5%)!important;
}
@mixin chartPalette6 {
  background-color: darken($brand-primary, 20%)!important;
  border: 1px solid darken($brand-primary, 26.5%)!important;
}
@mixin chartPalette7 {
  background-color: darken($brand-success, 20%)!important;
  border: 1px solid darken($brand-success, 26.5%)!important;
}
@mixin chartPalette8 {
  background-color: darken($brand-info, 20%)!important;
  border: 1px solid darken($brand-info, 26.5%)!important;
}
@mixin chartPalette9 {
  background-color: darken($brand-warning, 20%)!important;
  border: 1px solid darken($brand-warning, 26.5%)!important;
}
@mixin chartPalette10 {
  background-color: darken($brand-danger, 20%)!important;
  border: 1px solid darken($brand-danger, 26.5%)!important;
}
@mixin chartPalette11 {
  background-color: darken($brand-primary, 30%)!important;
  border: 1px solid darken($brand-primary, 36.5%)!important;
}
@mixin chartPalette12 {
  background-color: darken($brand-success, 30%)!important;
  border: 1px solid darken($brand-success, 36.5%)!important;
}
@mixin chartPaletteNegative {
  background-color: darken($brand-danger, 30%)!important;
  border: 1px solid darken($brand-danger, 36.5%)!important;
}

// Doughnut Palettes

@mixin doughnutPalette1 {
  background-color: $chartGradualPalette1!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette2 {
  background-color: $chartGradualPalette2!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette3 {
  background-color: $chartGradualPalette3!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette4 {
  background-color: $chartGradualPalette4!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette5 {
  background-color: $chartGradualPalette5!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette6 {
  background-color: $chartGradualPalette6!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette7 {
  background-color: $chartGradualPalette7!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette8 {
  background-color: $chartGradualPalette8!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette9 {
  background-color: $chartGradualPalette9!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette10 {
  background-color: $chartGradualPalette10!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette11 {
  background-color: $chartGradualPalette11!important;
  border: 1px solid #fff!important;
}

@mixin doughnutPalette12 {
  background-color: $chartGradualPalette12!important;
  border: 1px solid #fff!important;
}


// Shadow

@mixin boxShadow {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25)!important;
}

@mixin boxShadow-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

@mixin boxShadow-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

@mixin boxShadow-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

@mixin boxShadow-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

@mixin boxShadow-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

@mixin inset-shadow {
  box-shadow: inset 0 0 8px $body-color;
}