@use 'sass:color';

@use './variables' as v;

/* icon/text colors */
// we'll use the same color set as text-colors defined in Bootstrap 4 (ref: https://getbootstrap.com/docs/4.5/utilities/colors/)
// we also use the "recolor" @mixin to add CSS "filter" color on top of SVG icons

$color-lighten-percentage: 6% !default;
$color-darken-percentage: 6% !default;

$color-primary: v.$slick-primary-color !default;
$color-secondary: #6c757d !default;
$color-success: #28a745 !default;
$color-danger: #dc3545 !default;
$color-warning: #ffc107 !default;
$color-info: #17a2b8 !default;
$color-light: #f8f9fa !default;
$color-dark: #343a40 !default;
$color-body: #212529 !default;
$color-muted: #6c757d !default;
$color-white: #ffffff !default;
$color-disabled: #dddbda !default;
$color-disabled-dark: #cccccc !default;
$color-alt-default: #1e87f0 !default;
$color-alt-warning: #faa05a !default;
$color-alt-danger: #f0506e !default;
$color-alt-success: #32d296 !default;
$color-se-primary: #3dcd58 !default;
$color-se-link: #42b4e6 !default;
$color-se-link-dark: #337ab7 !default;
$color-se-danger: #b10043 !default;
$color-se-secondary: #9fa0a4 !default;
$color-se-warning: #e47f00 !default;
$color-se-warning-light: #ffd100 !default;
$color-sf-highlight: #0070d2 !default;
$color-sf-primary: #006dcc !default;
$color-sf-primary-dark: #004487 !default;

// new simple
.color-primary {
  color: var(--color-primary, $color-primary);
}
.color-secondary {
  color: var(--color-secondary, $color-secondary);
}
.color-success {
  color: var(--color-success, $color-success);
}
.color-danger {
  color: var(--color-danger, $color-danger);
}
.color-warning {
  color: var(--color-warning, $color-warning);
}
.color-info {
  color: var(--color-info, $color-info);
}
.color-light {
  color: var(--color-light, $color-light);
}
.color-dark {
  color: var(--color-dark, $color-dark);
}
.color-body {
  color: var(--color-body, $color-body);
}
.color-muted {
  color: var(--color-muted, $color-muted);
}
.color-white {
  color: var(--color-white, $color-white);
}
.color-disabled {
  color: var(--color-disabled, $color-disabled);
}
.color-disabled-dark {
  color: var(--color-disabled-dark, $color-disabled-dark);
}
.color-alt-default {
  color: var(--color-alt-default, $color-alt-default);
}
.color-alt-warning {
  color: var(--color-alt-warning, $color-alt-warning);
}
.color-alt-danger {
  color: var(--color-alt-danger, $color-alt-danger);
}
.color-alt-success {
  color: var(--color-alt-success, $color-alt-success);
}
.color-se-primary {
  color: var(--color-se-primary, $color-se-primary);
}
.color-se-link {
  color: var(--color-se-link, $color-se-link);
}
.color-se-link-dark {
  color: var(--color-se-link-dark, $color-se-link-dark);
}
.color-se-danger {
  color: var(--color-se-danger, $color-se-danger);
}
.color-se-secondary {
  color: var(--color-se-secondary, $color-se-secondary);
}
.color-se-warning {
  color: var(--color-se-warning, $color-se-warning);
}
.color-se-warning-light {
  color: var(--color-se-warning-light, $color-se-warning-light);
}
.color-sf-highlight {
  color: var(--color-sf-highlight, $color-sf-highlight);
}
.color-sf-primary {
  color: var(--color-sf-primary, $color-sf-primary);
}
.color-sf-primary-dark {
  color: var(--color-sf-primary-dark, $color-sf-primary-dark);
}

.color-primary-light {
  color: color.adjust($color-primary, $lightness: $color-lighten-percentage);
}
.color-primary-dark {
  color: color.adjust($color-primary, $lightness: -$color-darken-percentage);
}
.color-secondary-light {
  color: color.adjust($color-secondary, $lightness: $color-lighten-percentage);
}
.color-secondary-dark {
  color: color.adjust($color-secondary, $lightness: -$color-darken-percentage);
}
.color-success-light {
  color: color.adjust($color-success, $lightness: $color-lighten-percentage);
}
.color-success-dark {
  color: color.adjust($color-success, $lightness: -$color-darken-percentage);
}
.color-danger-light {
  color: color.adjust($color-danger, $lightness: $color-lighten-percentage);
}
.color-danger-dark {
  color: color.adjust($color-danger, $lightness: -$color-darken-percentage);
}
.color-warning-light {
  color: color.adjust($color-warning, $lightness: $color-lighten-percentage);
}
.color-warning-dark {
  color: color.adjust($color-warning, $lightness: -$color-darken-percentage);
}
.color-info-light {
  color: color.adjust($color-info, $lightness: $color-lighten-percentage);
}
.color-info-dark {
  color: color.adjust($color-info, $lightness: -$color-darken-percentage);
}
.color-body-light {
  color: color.adjust($color-body, $lightness: $color-lighten-percentage);
}
.color-body-dark {
  color: color.adjust($color-body, $lightness: -$color-darken-percentage);
}
.color-muted-light {
  color: color.adjust($color-muted, $lightness: $color-lighten-percentage);
}
.color-muted-dark {
  color: color.adjust($color-muted, $lightness: -$color-darken-percentage);
}
.color-alt-warning-light {
  color: color.adjust($color-alt-warning, $lightness: $color-lighten-percentage);
}
.color-alt-warning-dark {
  color: color.adjust($color-alt-warning, $lightness: -$color-darken-percentage);
}
.color-alt-default-light {
  color: color.adjust($color-alt-default, $lightness: $color-lighten-percentage);
}
.color-alt-default-dark {
  color: color.adjust($color-alt-default, $lightness: -$color-darken-percentage);
}
.color-alt-danger-light {
  color: color.adjust($color-alt-danger, $lightness: $color-lighten-percentage);
}
.color-alt-danger-dark {
  color: color.adjust($color-alt-danger, $lightness: -$color-darken-percentage);
}
.color-alt-success-light {
  color: color.adjust($color-alt-success, $lightness: $color-lighten-percentage);
}
.color-alt-success-dark {
  color: color.adjust($color-alt-success, $lightness: -$color-darken-percentage);
}
.color-se-secondary-light {
  color: color.adjust($color-se-secondary, $lightness: $color-lighten-percentage);
}