/* The color-scheme CSS property https://web.dev/color-scheme/ */
:root{
  // variable prefix
  --prefix: #{$prefix};

  --#{$prefix}pure-black: #{$pure-black};
  --#{$prefix}pure-black-rgb: #{$pure-black-rgb};

  // Icons sizing
  --#{$prefix}icon-size: #{$icon-size};
  --#{$prefix}icon-size-xs: #{$icon-size-xs};
  --#{$prefix}icon-size-sm: #{$icon-size-sm};
  --#{$prefix}icon-size-md: #{$icon-size-md};
  --#{$prefix}icon-size-lg: #{$icon-size-lg};
  --#{$prefix}icon-size-xl: #{$icon-size-xl};

  @function calculate-contrast($color) {
    @return if(lightness($color) > 75%, var(--#{$prefix}black), var(--#{$prefix}white));
  }
  @each $color, $value in $custom-theme-colors {
    // Construct CSS variable names with Sass interpolation
    --#{$prefix}#{$color}-contrast: #{calculate-contrast($value)};
  }
}

:root,
[data-bs-theme="light"] {
  // global custom variables
  --#{$prefix}bg-label-tint-amount: #{$bg-label-tint-amount};
  --#{$prefix}border-subtle-amount: #{$border-subtle-amount};
  --#{$prefix}base-color: #{$black};
  --#{$prefix}base-color-rgb: #{$base-rgb};
  --#{$prefix}paper-bg: #{$paper-bg};
  --#{$prefix}paper-bg-rgb: #{$paper-bg-rgb};

  --#{$prefix}min-contrast-ratio: #{$min-contrast-ratio};

  // Box-shadow variables
  --#{$prefix}box-shadow: #{$box-shadow};
  --#{$prefix}box-shadow-xs: #{$box-shadow-xs};
  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
  --#{$prefix}box-shadow-xl: #{$box-shadow-xl};

  --#{$prefix}floating-component-shadow: #{$floating-component-shadow};

  // TODO: CheckInBS6 - A new variable has been created because the `$link-color` SCSS  #{to-rgb($link-color)} variable was being used, and changing the color did not reflect the update. This new variable ensures that future color changes are applied correctly.
  --#{$prefix}custom-link-color: var(--#{$prefix}primary);

  // Navbar
  --#{$prefix}navbar-bg: #{$navbar-bg};
  --#{$prefix}navbar-box-shadow: #{$navbar-box-shadow};
  --#{$prefix}navbar-border-width: #{$border-width};
  --#{$prefix}navbar-border-color: #{$navbar-bg};

  // Menu
  --#{$prefix}menu-header-color: #{$navbar-light-color};


  // Tabs & Pills
  --#{$prefix}nav-box-shadow: #{$nav-box-shadow};
  --#{$prefix}nav-border-color: #{$nav-border-color};

}

[data-bs-theme="dark"] {
  @function calculate-contrast($color) {
    @return if(lightness($color) > 75%, var(--#{$prefix}black), var(--#{$prefix}white));
  }
  @each $color, $value in $theme-colors-dark {
    --#{$prefix}#{$color}-contrast: #{calculate-contrast($value)};
  }
}

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    color-scheme: dark;

    @each $color, $value in $grays-dark {
      --#{$prefix}gray-#{$color}: #{$value};
    }

    @each $color, $value in $theme-colors-dark {
      --#{$prefix}#{$color}: #{$value};
    }

    @each $color, $value in $theme-colors-rgb-dark {
      --#{$prefix}#{$color}-rgb: #{$value};
    }

    // global custom variables
    --#{$prefix}bg-label-tint-amount: #{$bg-label-tint-amount-dark};
    --#{$prefix}border-subtle-amount: #{$border-subtle-amount-dark};
    --#{$prefix}base-color: #{$base-dark};
    --#{$prefix}base-color-rgb: #{$base-rgb-dark};
    --#{$prefix}paper-bg: #{$paper-bg-dark};
    --#{$prefix}paper-bg-rgb: #{$paper-bg-rgb-dark};

    // Box-shadow variables
    --#{$prefix}box-shadow: #{$box-shadow-dark};
    --#{$prefix}box-shadow-xs: #{$box-shadow-xs-dark};
    --#{$prefix}box-shadow-sm: #{$box-shadow-sm-dark};
    --#{$prefix}box-shadow-lg: #{$box-shadow-lg-dark};
    --#{$prefix}box-shadow-xl: #{$box-shadow-xl-dark};

    --#{$prefix}floating-component-shadow: #{$floating-component-shadow-dark};
  }
}

/*
? styles specifically for apex-chart dark variant */
.apexcharts-theme-dark {
  @each $color, $value in $theme-colors-dark {
    --#{$prefix}#{$color}: #{$value};
  }
  --#{$prefix}border-color: #{$gray-200-dark};
  --#{$prefix}box-shadow: #{$box-shadow-dark};
  --#{$prefix}body-color: #{$body-color-dark};
  --#{$prefix}heading-color: #{$headings-color-dark};
  --#{$prefix}paper-bg: #{$paper-bg-dark};
  --#{$prefix}base-color: #{$base-dark};
  --#{$prefix}secondary-color: #{$body-secondary-color-dark};
}