@use 'sass:map';
@use 'variables' as *;
@use '../functions' as *;

:root {
  --#{$prefix}body: #{$body};
  --#{$prefix}body-inverted: #{$body-inverted};
  --#{$prefix}body-bg: #{$body-bg};

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

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

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

  @each $type, $values in $categories {
    --#{$prefix}#{$type}: #{map.get($values, color)};
    --#{$prefix}#{$type}-hover: #{map.get($values, hover, color)};
    --#{$prefix}#{$type}-hover-shadow: #{HEXToRGBA(
        map.get($values, hover, shadow, color),
        map.get($values, hover, shadow, opacity)
      )};
    --#{$prefix}#{$type}-text: #{map.get($values, text)};
  }

  @each $color, $value in $buttons {
    --#{$prefix}btn-#{$color}: #{$value};
    --#{$prefix}btn-#{$color}-light: #{$value};
  }

  @each $color, $value in $buttons-dark {
    --#{$prefix}btn-#{$color}-inverted: #{$value};
    --#{$prefix}btn-#{$color}-dark: #{$value};
  }

  @each $shadow, $value in $shadows {
    --#{$prefix}shadow-#{$shadow}: #{$value};
  }

  --#{$prefix}font-size-base: #{$font-size-base};

  --#{$prefix}body-font-size: calc(var(--#{$prefix}font-size-base) * #{map.get($font-size-breakpoints, xs)});

  @each $breakpoints, $value in $font-size-breakpoints {
    --#{$prefix}font-size-#{$breakpoints}: calc(var(--#{$prefix}font-size-base) * #{$value});
  }

  @each $size, $value in $headings-font-sizes {
    --#{$prefix}font-size-h#{$size}: calc(var(--#{$prefix}font-size-base) * #{$value});
  }

  @media screen and (width >= map.get($grid-breakpoints, lg)) {
    --#{$prefix}body-font-size: calc(var(--#{$prefix}font-size-base) * #{map.get($font-size-breakpoints, sm)});

    @each $size, $value in $headings-font-sizes-lg {
      --#{$prefix}font-size-h#{$size}: calc(var(--#{$prefix}font-size-base) * #{$value});
    }
  }
}