// Styling overrides for bootstrap
@use 'sass:map';

// Override / set color variables
$red: var(--dh-color-visual-red);
$orange: var(--dh-color-visual-orange);
$yellow: var(--dh-color-visual-yellow);
$green: var(--dh-color-visual-green);
$blue: var(--dh-color-visual-blue);
$purple: var(--dh-color-visual-purple);

// Fallback colors are used if theme isn't loaded
// this is required for error messages if the API doesn't load

//Define our Gray scale
$gray-100: var(--dh-color-gray-900, #fcfcfa);
$gray-200: var(--dh-color-gray-800);
$gray-300: var(--dh-color-gray-700);
$gray-400: var(--dh-color-gray-600);
$gray-500: var(--dh-color-gray-500);
// intentional duplicate, scale doesn't line up otherwise
// as we have gray-850 and spectrum doesn't and it is needed
$gray-600: var(--dh-color-gray-500);
$gray-700: var(--dh-color-gray-400);
$gray-800: var(--dh-color-gray-300);
$gray-850: var(--dh-color-gray-200);
$gray-900: var(--dh-color-gray-75);
$black: var(--dh-color-black, #1a171a);
$white: var(--dh-color-white, #f0f0ee);

//Define some UI colors
$interfacegray: var(--dh-color-content-bg, #2d2a2e);
$interfaceblue: var(--dh-color-accent-bg);
$interfacewhite: $white;
$interfaceblack: $black;
$content-bg: var(--dh-color-content-bg, #2d2a2e);
$background: var(--dh-color-bg, #1a171a);
$foreground: var(--dh-color-fg, #f0f0ee);

// Extend default Bootstrap $grays map
$grays-custom: (
  '850': $gray-850,
);
$grays: () !default;
$grays: map-merge($grays, $grays-custom);

// Extend default Bootstrap $colors map
$colors-custom: (
  'black': $black,
);
$colors: () !default;
$colors: map-merge($colors, $colors-custom);

// Override default Bootstrap $theme-colors map by mapping each key to itself.
// These will then be re-mapped inside of `button-outline-variant` and
// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`
$theme-colors-self-map: ();
@each $key
  in (
    'primary',
    'secondary',
    'success',
    'info',
    'warning',
    'danger',
    'light',
    'dark'
  )
{
  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);
}
$theme-colors: () !default;
$theme-colors: map-merge($theme-colors, $theme-colors-self-map);

// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to
// DH semantic colors
$bootstrap-dh-semantic-map: (
  'primary': 'accent',
  'secondary': 'neutral',
  'success': 'positive',
  'info': 'info',
  'warning': 'notice',
  'danger': 'negative',
  // We shouldn't be using these, but mapping so they work with our custom
  // `color-yiq` mixin. If we find a way to remove $light + $dark that are
  // defined in Bootstrap _variables.scss, we should remove these
  'light': 'neutral',
  'dark': 'neutral',
);

//Set default colors
$body-bg: $black;
$body-color: $interfacewhite;

// Set brand colors
$primary: var(--dh-color-accent-bg);
$primary-hover: var(--dh-color-accent-hover-bg);
$primary-dark: var(--dh-color-accent-down-bg);
$secondary: var(--dh-color-neutral-bg);
$secondary-hover: var(--dh-color-neutral-hover-bg);
$success: $green;
$info: $yellow;
$warning: $orange;
$danger: var(--dh-color-negative-bg);
$danger-hover: var(--dh-color-negative-hover-bg);
// We really don't want to use $light or $dark variables, but Bootstrap defines
// them in _variables.scss. Explicitly setting them to ensure we are in control
// of their values. If we can find a way to remove them, we should
$light: var(--dh-color-gray-light);
$dark: var(--dh-color-gray-dark);
// Bootstrap doesn't define $mid, and we want to move away from this particular
// semantic. Should be deleted by #1635
$mid: var(--dh-color-gray-mid);

$semantic-colors: (
  'primary-hover': $primary-hover,
  'primary-dark': $primary-dark,
  'mid': $mid,
  'content-bg': $interfacegray,
  'background': $interfaceblack,
  'foreground': $interfacewhite,
  'secondary-hover': $secondary-hover,
  'danger-hover': $danger-hover,
);

$component-active-bg: $primary;
$theme-color-interval: 9%;
$yiq-contrasted-threshold: 180;

// Override fonts
$font-family-sans-serif:
  'Fira Sans',
  -apple-system,
  blinkmacsystemfont,
  'Segoe UI',
  'Roboto',
  'Helvetica Neue',
  arial,
  sans-serif; //fira sans then native system ui fallbacks
$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',
  'Courier New', monospace;
$font-family-base: $font-family-sans-serif;

$headings-font-weight: 400;

//Text overides
$text-muted: $gray-400;

//Style Selection highlight color
$text-select-color: var(--dh-color-text-highlight);

//Grid variables, same value as default just making easily accessible
$grid-gutter-width: 30px;

//Visual Overrides
$border-radius: 4px;
$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);

//Override Btn
$btn-border-radius: 4rem;
$btn-padding-x: 1.5rem;
$btn-transition:
  color 0.12s ease-in-out,
  background-color 0.12s ease-in-out,
  border-color 0.12s ease-in-out,
  box-shadow 0.12s ease-in-out; //default 0.15 is too long
$btn-border-width: 2px;
$btn-font-weight: var(--spectrum-global-font-weight-bold);
$btn-line-height: 1.3;

//Override Inputs
$input-bg: var(--dh-color-input-bg);
$input-disabled-bg: var(--dh-color-input-disabled-bg);
$input-color: var(--dh-color-input-fg);
$input-border-color: var(--dh-color-input-border);
$input-placeholder-color: var(--dh-color-input-placeholder);
$input-focus-border-color: var(--dh-color-input-focus-border);

$input-btn-focus-width: 0.2rem;
$input-btn-focus-color: color-mix(
  in srgb,
  var(--dh-color-accent) 35%,
  transparent
);
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
$input-btn-line-height: 1.3;
// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).
// The padding-y value has to be in rem to match units as it is a SASS calc.
// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.
/* stylelint-disable-next-line number-max-precision */
$input-btn-padding-y: 0.42145rem;

//checkbox
$custom-control-indicator-bg: var(--dh-color-input-bg);
$custom-control-indicator-border-color: var(--dh-color-input-border);
$custom-checkbox-indicator-border-radius: 2px;
$custom-control-indicator-border-width: 2px;
$custom-control-indicator-active-bg: var(--dh-color-input-bg);
$custom-control-indicator-active-border-color: var(--dh-color-input-fg);
$custom-control-indicator-checked-bg: var(--dh-color-input-fg);
$custom-control-indicator-checked-color: black; // used as mask fill color
$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);
$custom-control-indicator-bg-size: 75% 75%;
$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);
$custom-control-indicator-checked-disabled-bg: var(
  --dh-color-input-disabled-bg
);
$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);

// The $custom-select-indicator variable is used by Bootstrap to provide the
// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard
// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651
// overrides this icon altogether for known dropdowns, so technically we may not
// need this, but it's here in case there are any remaining instances.
$custom-select-indicator-color: #929192;
$custom-select-bg: var(--dh-color-selector-bg);
$custom-select-bg-size: 16px 16px;
//dhSort icon encoded
$custom-select-indicator: str-replace(
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E"),
  '#',
  '%23'
);
$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;
$custom-select-disabled-color: $gray-500;
$custom-select-disabled-bg: $gray-800;

//modal
$modal-content-bg: $content-bg;
$modal-content-border-width: 0;
$modal-md: 550px;
$close-color: var(--dh-color-text);
$close-text-shadow: none;

// Toast notification
$toast-bg: var(--dh-color-accent-100);
$toast-color: var(--dh-color-text);
$toast-error-bg: var(--dh-color-negative-bg);
$toast-error-color: var(--dh-color-text);

//tooltips
$tooltip-bg: var(--dh-color-tooltip-bg);
$tooltip-color: var(--dh-color-tooltip-fg);
$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);

//drowdowns
$dropdown-bg: $gray-600;
$dropdown-link-color: $foreground;
$dropdown-link-hover-color: $foreground;
$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);
$dropdown-divider-bg: $gray-700;

//context menus
$contextmenu-bg: var(--dh-color-popover-bg);
$contextmenu-color: var(--dh-color-text);
$contextmenu-disabled-color: var(--dh-color-text-disabled);
$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);
$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);
$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);

//hr
$hr-border-color: var(--dh-color-hr);

//links
$link-color: $gray-400;
$link-hover-color: $foreground;

//progress-bar
$progress-bg: $gray-600;
$progress-border-radius: 1rem;

// Set global options
$enable-shadows: false;
$enable-gradients: false;
$enable-print-styles: false; //I don't think anyone should expect to "print" this app.

// Transition times
$transition: 0.15s;
$transition-mid: 0.2s;
$transition-long: 0.3s;
$transition-slow: 0.6s;

//form-validation icon, uses vsWarning icon encoded here as svg
$form-feedback-icon-invalid-color: $danger;
$form-feedback-icon-invalid: str-replace(
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E "),
  '#',
  '%23'
);

// This section of variables is not consumed directly by DH, but they need to be
// defined for sass to compile _variables
$table-dark-bg: $gray-800;
$table-dark-accent-bg: var(--dh-color-highlight-hover);
$table-dark-hover-bg: var(--dh-color-highlight-active);
$table-dark-border-color: $gray-700;
$popover-bg: var(--dh-color-tooltip-bg);
$popover-border-color: var(--dh-color-overlay-modal-bg);
$popover-header-bg: #000;
$popover-arrow-outer-color: var(--dh-color-dropshadow);
$custom-range-thumb-active-bg: var(--dh-color-accent-1100);