@use 'sass:map';
@use 'config' as *;

:root,
:host {
  // Direction multiplier for physical transforms (1 = LTR, -1 = RTL)
  --dir: 1;

  // Fonts
  --font-monospace: #{$font-family-monospace};
  --font-sans-serif: #{$font-family-sans-serif};
  --font-serif: #{$font-family-serif};
  --font-comic: #{$font-family-comic};

  // Gray colors
  --gray-50: #{$gray-50};
  --gray-100: #{$gray-100};
  --gray-200: #{$gray-200};
  --gray-300: #{$gray-300};
  --gray-400: #{$gray-400};
  --gray-500: #{$gray-500};
  --gray-600: #{$gray-600};
  --gray-700: #{$gray-700};
  --gray-800: #{$gray-800};
  --gray-900: #{$gray-900};
  --gray-950: #{$gray-950};

  --white: #{$white};
  --white-lt: color-mix(in oklab, var(--white) 10%, transparent);
  --black: #{$black};
  --gray: #{$gray-600};
  --gray-dark: #{$gray-800};
  // `.shape-*` runs over `$colors`, which carries these three on top of the
  // theme colors; the `-lt` tint below is generated for the theme colors only.
  --black-lt: color-mix(in oklab, var(--black) 10%, transparent);
  --gray-lt: color-mix(in oklab, var(--gray) 10%, transparent);
  --gray-dark-lt: color-mix(in oklab, var(--gray-dark) 10%, transparent);
  --dark: #{$dark};
  --light: #{$light};

  // Brand colors
  --brand: #{$primary};

  // Theme colors
  @each $name, $color in map.merge($theme-colors, $social-colors) {
    --#{$name}: #{$color};
    --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
    --#{$name}-darken: #{adjust-lightness-css(var(--#{$name}), -6%)};
    --#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
    --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
  }

  // Gray colors
  @each $name, $color in $gray-colors {
    --#{$name}-fg: var(--#{$name});
  }

  // Spacers
  @each $name, $value in $spacers {
    --spacer-#{$name}: #{$value};
  }

  // Icons
  --icon-size: #{$icon-size};

  // Font sizes
  @each $name, $value in $font-weights {
    --font-weight-#{$name}: #{$value};
  }

  @each $name, $value in $font-sizes {
    --font-size-h#{$name}: #{$value};
  }

  @each $name, $value in $line-heights {
    --line-height-#{$name}: #{$value};
  }

  // Shadows
  --shadow-color: #{$box-shadow-color};
  @each $name, $value in $box-shadows {
    --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
  }

  // Border radiuses
  --border-radius-scale: 1;
  @each $name, $value in $border-radiuses {
    @if $name {
      --border-radius-#{$name}: calc(#{$value} * var(--border-radius-scale, 1));
    } @else {
      --border-radius: #{$value};
    }
  }

  // Buttons and form controls: one scale, in the names Bootstrap 6 uses
  // scss-docs-start btn-input-css-vars
  --btn-input-fg: var(--body-color);
  --btn-input-bg: var(--bg-forms);
  --btn-input-padding-y: #{$input-btn-padding-y};
  --btn-input-padding-x: #{$input-btn-padding-x};
  --btn-input-font-size: #{$input-btn-font-size};
  --btn-input-line-height: #{$input-btn-line-height};
  --btn-input-border-radius: var(--border-radius);
  --btn-input-min-height: calc(var(--btn-input-line-height) + var(--btn-input-padding-y) * 2 + #{$input-btn-border-width} * 2);

  --btn-input-sm-padding-y: #{$input-btn-padding-y-sm};
  --btn-input-sm-padding-x: #{$input-btn-padding-x-sm};
  --btn-input-sm-font-size: #{$input-btn-font-size-sm};
  --btn-input-sm-line-height: #{$input-btn-line-height-sm};
  --btn-input-sm-border-radius: var(--border-radius-sm);
  --btn-input-sm-min-height: calc(var(--btn-input-sm-line-height) + var(--btn-input-sm-padding-y) * 2 + #{$input-btn-border-width} * 2);

  --btn-input-lg-padding-y: #{$input-btn-padding-y-lg};
  --btn-input-lg-padding-x: #{$input-btn-padding-x-lg};
  --btn-input-lg-font-size: #{$input-btn-font-size-lg};
  --btn-input-lg-line-height: #{$input-btn-line-height-lg};
  --btn-input-lg-border-radius: var(--border-radius-lg);
  --btn-input-lg-min-height: calc(var(--btn-input-lg-line-height) + var(--btn-input-lg-padding-y) * 2 + #{$input-btn-border-width} * 2);

  --btn-input-xl-padding-y: #{$input-btn-padding-y-xl};
  --btn-input-xl-padding-x: #{$input-btn-padding-x-xl};
  --btn-input-xl-font-size: #{$input-btn-font-size-xl};
  --btn-input-xl-line-height: #{$input-btn-line-height-xl};
  --btn-input-xl-border-radius: var(--border-radius);
  --btn-input-xl-min-height: calc(var(--btn-input-xl-line-height) + var(--btn-input-xl-padding-y) * 2 + #{$input-btn-border-width} * 2);
  // scss-docs-end btn-input-css-vars

  // Checks, radios and switches: shared state colors, in the names Bootstrap 6 uses
  // scss-docs-start control-state-css-vars
  --control-checked-bg: #{$form-check-input-checked-bg-color};
  --control-checked-border-color: #{$form-check-input-checked-border-color};
  --control-disabled-bg: #{$input-disabled-bg};
  --control-disabled-opacity: #{$form-check-input-disabled-opacity};
  // scss-docs-end control-state-css-vars

  // Backdrops
  --backdrop-opacity: #{$backdrop-opacity};
  --backdrop-bg: #{$backdrop-bg};
  @each $name, $value in $backdrops {
    --backdrop-bg#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
  }
  --backdrop-blur: #{$backdrop-blur};
  --backdrop-filter: blur(var(--backdrop-blur));
}

[dir='ltr'] {
  --dir: 1;
}

[dir='rtl'] {
  --dir: -1;
}