:root,
[data-bs-theme="dynamic"] {
  // Note: Custom variable values only support SassScript inside `#{}`.

  // Colors
  //
  // Generate palettes for full colors, grays, and theme colors.

  // custom
  @each $color, $value in $colors {
    --#{$prefix}#{$color}-rgb: #{to-rgb($value)};
  }
  // end custom

  @each $color, $value in $grays {
    // custom
    --#{$prefix}gray-#{$color}-rgb: #{to-rgb($value)};
    // end custom
  }

  @each $color, $value in $theme-colors-palettes {
    @if str-index($color, "-500") {
      $base-color-name: str-slice($color, 1, str-index($color, "-500") - 1);
      --#{$prefix}#{$color}-rgb: var(--#{$prefix}#{$base-color-name}-rgb);
    } @else {
      --#{$prefix}#{$color}-rgb: #{to-rgb($value)};
    }
  }

  @each $color, $value in $colors {
    // custom
    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
    // end custom
  }

  // custom
  @each $color, $value in $grays {
    --#{$prefix}gray-#{$color}: rgb(var(--#{$prefix}gray-#{$color}-rgb));
  }

  // end custom

  @each $color, $value in $theme-colors {
    // custom
    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
    // end custom
  }

  // custom
  // original $theme-colors-rgb
  @each $color, $value in $theme-colors-mapping {
    --#{$prefix}#{$color}-rgb: var(--#{$prefix}#{$value}-rgb);
  }
  // end custom

  // custom
  @each $color, $value in $theme-colors-palettes {
    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
  }
  // end custom

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

  $theme-colors-bg-subtle: (
    "primary": $primary-bg-subtle,
    "secondary": $secondary-bg-subtle,
    "success": $green-25,
    "info": $blue-25,
    "warning": $yellow-25,
    "danger": $red-25,
    "light": $light-bg-subtle,
    "dark": $dark-bg-subtle,
  );

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

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

  // Fonts

  // Note: Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
  --#{$prefix}gradient: #{$gradient};

  // Root and body
  // scss-docs-start root-body-variables
  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{inspect($font-family-base)};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }

  --#{$prefix}body-color: rgb(var(--#{$prefix}body-color-rgb));
  --#{$prefix}body-color-rgb: var(--#{$prefix}#{$body-color-mapping}-rgb);
  --#{$prefix}body-bg: rgb(var(--#{$prefix}body-bg-rgb));

  // WIP: se convierte el hex a rgb
  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

  --#{$prefix}emphasis-color: rgb(var(--#{$prefix}emphasis-color-rgb));
  --#{$prefix}emphasis-color-rgb: #{$body-emphasis-color};

  --#{$prefix}secondary-color: rgba(var(--#{$prefix}secondary-color-rgb), .75);
  --#{$prefix}secondary-color-rgb: #{$body-secondary-color};
  --#{$prefix}secondary-bg: rgb(var(--#{$prefix}secondary-bg-rgb));
  --#{$prefix}secondary-bg-rgb: #{$body-secondary-bg};

  --#{$prefix}tertiary-color: rgba(var(--#{$prefix}tertiary-color-rgb), .5);
  --#{$prefix}tertiary-color-rgb: #{$body-tertiary-color};
  --#{$prefix}tertiary-bg: rgb(var(--#{$prefix}tertiary-bg-rgb));
  --#{$prefix}tertiary-bg-rgb: #{$body-tertiary-bg};
  // scss-docs-end root-body-variables

  --#{$prefix}heading-color: #{$headings-color};

  --#{$prefix}link-color: rgb(var(--#{$prefix}link-color-rgb));
  --#{$prefix}link-color-rgb: var(--#{$prefix}#{$link-color-mapping}-rgb);
  --#{$prefix}link-decoration: #{$link-decoration};

  --#{$prefix}link-hover-color: rgb(var(--#{$prefix}link-hover-color-rgb));
  --#{$prefix}link-hover-color-rgb: var(--#{$prefix}#{$link-hover-color-mapping}-rgb);

  @if $link-hover-decoration != null {
    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
  }

  --#{$prefix}code-color: rgb(var(--#{$prefix}code-color-rgb));
  --#{$prefix}code-color-rgb: var(--#{$prefix}#{$code-color-mapping}-rgb);
  --#{$prefix}highlight-bg: #{$mark-bg};

  // scss-docs-start root-border-var
  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-style: #{$border-style};
  --#{$prefix}border-color: #{$border-color};
  --#{$prefix}border-color-translucent: #{$border-color-translucent};

  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
  // scss-docs-end root-border-var

  --#{$prefix}box-shadow: #{$box-shadow};
  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};

  // Focus styles
  // scss-docs-start root-focus-variables
  --#{$prefix}focus-ring-width: #{$focus-ring-width};
  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
  --#{$prefix}focus-ring-border-color-rgb: #{$focus-ring-border-color};
  --#{$prefix}focus-ring-border-color: rgb(var(--#{$prefix}focus-ring-border-color-rgb));
  --#{$prefix}focus-ring-base-color-rgb: var(--#{$prefix}#{$focus-ring-color-mapping});
  --#{$prefix}focus-ring-base-color: rgb(var(--#{$prefix}focus-ring-base-color-rgb));
  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}focus-ring-base-color-rgb), var(--#{$prefix}focus-ring-opacity));
  // scss-docs-end root-focus-variables

  // scss-docs-start root-form-validation-variables
  --#{$prefix}form-valid-color: #{$form-valid-color};
  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
  --#{$prefix}form-invalid-color: #{$form-invalid-color};
  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
  // scss-docs-end root-form-validation-variables

  --#{$prefix}heading-line-height: #{$headings-line-height-value};

  @each $level, $value in $display-font-size-values {
    @include rfs($value, --#{$prefix}rfs-display-#{$level});
    --#{$prefix}fs-display-#{$level}: var(--#{$prefix}rfs-display-#{$level});
  }

  @each $level, $value in $font-size-values {
    @include rfs($value, --#{$prefix}rfs-fs-#{$level});
    --#{$prefix}fs-#{$level}: var(--#{$prefix}rfs-fs-#{$level});
  }
  @include rfs($small-font-size-value, --#{$prefix}rfs-fs-small);
  --#{$prefix}fs-small: var(--#{$prefix}rfs-fs-small);

  --#{$prefix}fw-lighter: #{$font-weight-lighter-value};
  --#{$prefix}fw-light: #{$font-weight-light-value};
  --#{$prefix}fw-normal: #{$font-weight-normal-value};
  --#{$prefix}fw-semibold: #{$font-weight-semibold-value};
  --#{$prefix}fw-bold: #{$font-weight-bold-value};
  --#{$prefix}fw-bolder: #{$font-weight-bolder-value};

  --#{$prefix}lh-base: #{$line-height-base};
  --#{$prefix}lh-sm: #{$line-height-sm};
  --#{$prefix}lh-lg: #{$line-height-lg};

  --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-0);
  --#{$prefix}label-margin-bottom: var(--#{$prefix}ref-spacer-1);
  --#{$prefix}label-font-size: var(--#{$prefix}body-font-size);
  --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
  --#{$prefix}label-color: var(--#{$prefix}gray-700);

  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-lg-border-radius: #{$btn-border-radius-lg};
  --#{$prefix}btn-sm-border-radius: #{$btn-border-radius-sm};

  @each $color, $value in $theme-colors {
    @if not map-has-key($theme-colors-extra, $color) {
      @if $color == "light" {
        @include df-button-variant-variables(
          "light",
          $default-color: var(--#{$prefix}gray-25),
          $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
          $hover-color: var(--#{$prefix}gray-50),
          $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
          $focus-color: var(--#{$prefix}gray-200),
          $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
          $active-color: var(--#{$prefix}gray-300),
          $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
        );
        @include df-button-outline-variant-variables(
          "light",
          $default-color: var(--#{$prefix}gray-100),
          $hover-color: var(--#{$prefix}gray-200),
          $focus-color: var(--#{$prefix}gray-200),
          $active-color: var(--#{$prefix}gray-300),
          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
        );
        @include df-button-link-variant-variables(
          "light",
          $default-color: var(--#{$prefix}gray-100),
          $hover-text-color: var(--#{$prefix}gray-200),
          $focus-text-color: var(--#{$prefix}gray-200),
          $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
          $active-bg-color: var(--#{$prefix}gray-300),
          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
        );
      } @else if $color == "dark" {
        @include df-button-variant-variables(
          "dark",
          $default-color: var(--#{$prefix}gray-900),
          $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
          $hover-color: var(--#{$prefix}gray-800),
          $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
          $focus-color: var(--#{$prefix}gray-800),
          $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
          $active-color: var(--#{$prefix}gray-700),
          $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
        );
        @include df-button-outline-variant-variables(
          "dark",
          $default-color: var(--#{$prefix}gray-900),
          $hover-color: var(--#{$prefix}gray-800),
          $focus-color: var(--#{$prefix}gray-800),
          $active-color: var(--#{$prefix}gray-700),
          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
        );
        @include df-button-link-variant-variables(
          "dark",
          $default-color: var(--#{$prefix}gray-900),
          $hover-text-color: var(--#{$prefix}gray-800),
          $focus-text-color: var(--#{$prefix}gray-800),
          $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
          $active-bg-color: var(--#{$prefix}gray-700),
          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
        );

      } @else if $color == "secondary" {
        @include df-button-variant-variables(
          "secondary",
          $default-color: var(--#{$prefix}secondary-50),
          $default-text-color: var(--#{$prefix}secondary-700),
          $hover-color: var(--#{$prefix}secondary-100),
          $hover-text-color: var(--#{$prefix}secondary-700),
          $focus-color: var(--#{$prefix}secondary-100),
          $focus-text-color: var(--#{$prefix}secondary-700),
          $active-color: var(--#{$prefix}secondary-100),
          $active-text-color: var(--#{$prefix}secondary-700),
          $focus-shadow-rgb: var(--#{$prefix}secondary-100-rgb),
        );
        @include df-button-outline-variant-variables(
          "secondary",
          $default-color: var(--#{$prefix}secondary-500),
          $default-border-color: var(--#{$prefix}secondary-200),
          $hover-color: var(--#{$prefix}secondary-700),
          $hover-border-color: var(--#{$prefix}secondary-400),
          $focus-color: var(--#{$prefix}secondary-700),
          $active-color: var(--#{$prefix}secondary-700),
          $active-border-color: var(--#{$prefix}secondary-600),
        );
        @include df-button-link-variant-variables(
          "secondary",
          $active-bg-color: var(--#{$prefix}secondary-100),
        );
      } @else {
        @include df-button-variant-variables($color);
        @include df-button-outline-variant-variables($color);
        @include df-button-link-variant-variables($color);
      }
    }
  }


  // only reference root variables
  @each $level, $value in $spacers {
    --#{$prefix}ref-spacer-#{$level}: #{$value};
  }

  // We can't use a css variable in SVG code,
  --#{$prefix}form-feedback-icon-valid: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#{$success}' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>"))};
  // We can't use a css variable in SVG code,
  --#{$prefix}form-feedback-icon-invalid: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$danger}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$danger}' stroke='none'/></svg>"))};

  --#{$prefix}default-placeholder-bg: var(--#{$prefix}secondary-200);

  --#{$prefix}default-accordion-padding-x: var(--#{$prefix}ref-spacer-4);
  --#{$prefix}default-accordion-padding-y: var(--#{$prefix}ref-spacer-6);
  --#{$prefix}default-accordion-color: var(--#{$prefix}gray-700);
  --#{$prefix}default-accordion-bg: var(--#{$prefix}white);
  --#{$prefix}default-accordion-transition: #{$btn-transition}, border-radius .15s ease;
  --#{$prefix}default-accordion-border-color: var(--#{$prefix}border-color);
  --#{$prefix}default-accordion-border-width: var(--#{$prefix}border-width);
  --#{$prefix}default-accordion-border-radius: var(--#{$prefix}border-radius);
  --#{$prefix}default-accordion-inner-border-radius: calc(var(--#{$prefix}default-accordion-border-radius) - var(--#{$prefix}default-accordion-border-width));
  --#{$prefix}default-accordion-btn-padding-x: var(--#{$prefix}default-accordion-padding-x);
  --#{$prefix}default-accordion-btn-padding-y: var(--#{$prefix}default-accordion-padding-y);
  --#{$prefix}default-accordion-btn-color: var(--#{$prefix}body-color);
  --#{$prefix}default-accordion-btn-bg: var(--#{$prefix}default-accordion-bg);
  --#{$prefix}default-accordion-btn-icon: #{escape-svg($accordion-button-icon-url)};
  --#{$prefix}default-accordion-btn-icon-width: var(--#{$prefix}ref-spacer-5);
  --#{$prefix}default-accordion-btn-icon-transform: rotate(-180deg);
  --#{$prefix}default-accordion-btn-icon-transition: transform .2s ease-in-out;
  --#{$prefix}default-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-url)};
  --#{$prefix}default-accordion-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
  --#{$prefix}default-accordion-btn-font-weight: var(--#{$prefix}fw-bold);
  --#{$prefix}default-accordion-btn-font-size: var(--#{$prefix}fs-6);
  --#{$prefix}default-accordion-body-padding-top: var(--#{$prefix}default-accordion-padding-y);
  --#{$prefix}default-accordion-body-padding-x: var(--#{$prefix}default-accordion-padding-x);
  --#{$prefix}default-accordion-body-padding-y: var(--#{$prefix}default-accordion-padding-y);
  --#{$prefix}default-accordion-active-color: var(--#{$prefix}body-color);
  --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-soft);
}

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

    // scss-docs-start root-dark-mode-vars
    --#{$prefix}body-color: #{$body-color-dark};
    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
    --#{$prefix}body-bg: #{$body-bg-dark};
    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};

    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};

    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};

    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};

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

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

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

    --#{$prefix}heading-color: #{$headings-color-dark};

    --#{$prefix}link-color: #{$link-color-dark};
    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};

    --#{$prefix}code-color: #{$code-color-dark};

    --#{$prefix}border-color: #{$border-color-dark};
    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
    // scss-docs-end root-dark-mode-vars
  }
}