$prefix: "bulma-"

@function findCSSVarColorInvert($color)
  @if colorLuminance($color) > 0.55
    @return var(--#{$prefix}black-transparent)
  @else
    @return var(--#{$prefix}white)

@function findCSSVarLightColor($color)
  @if type-of($color) == "color"
    $l: 96%
    @if lightness($color) > 96%
      $l: lightness($color)
    @return change-color($color, $lightness: $l)
  @return var(--#{$prefix}background)

@function findCSSVarDarkColor($color)
  @if type-of($color) == "color"
    $base-l: 29%
    $luminance: colorLuminance($color)
    $luminance-delta: 0.53 - $luminance
    $target-l: round($base-l + $luminance-delta * 53)
    @return change-color($color, $lightness: max($base-l, $target-l))
  @return var(--#{$prefix}text-strong)

$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger)

@function getCssVariable($color, $name)
  $hue: hue($color)
  $saturation: saturation($color)
  $lightness: lightness($color)
  $alpha: alpha($color)
  @return $hue, $saturation, $lightness

=cssvar($name, $color)
  $hue: hue($color)
  $saturation: saturation($color)
  $lightness: lightness($color)
  $base: "#{$prefix}#{$name}"
  --#{$base}-h: #{$hue}
  --#{$base}-s: #{$saturation}
  --#{$base}-l: #{$lightness}
  --#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
  --#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
  --#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
  $color-invert: findCSSVarColorInvert($color)
  --#{$base}-invert: #{$color-invert}
  $color-light: findCSSVarLightColor($color)
  --#{$base}-light: #{$color-light}
  --#{$base}-light-hover: #{darken($color-light, 5%)}
  --#{$base}-light-active: #{darken($color-light, 10%)}
  $color-dark: findCSSVarDarkColor($color)
  --#{$base}-dark: #{$color-dark}
  --#{$base}-dark-hover: #{darken($color-dark, 5%)}
  --#{$base}-dark-active: #{darken($color-dark, 10%)}

\:root
  --#{$prefix}white: #{$white}
  --#{$prefix}black: #{$black}
  --#{$prefix}black-transparent: #{rgba(#000, 0.7)}
  @each $name, $color in $cssvar-colors
    +cssvar($name, $color)

// $white: var(--#{$prefix}white)
// $black: var(--#{$prefix}black)
// $black-transparent: var(--#{$prefix}black-transparent)
// $scheme-main: var(--#{$prefix}scheme-main)
// $scheme-main-bis: var(--#{$prefix}scheme-main-bis)
// $scheme-main-ter: var(--#{$prefix}scheme-main-ter)
// $scheme-invert: var(--#{$prefix}scheme-invert)
// $scheme-invert-bis: var(--#{$prefix}scheme-invert-bis)
// $scheme-invert-ter: var(--#{$prefix}scheme-invert-ter)
// $background: var(--#{$prefix}background)
// $border: var(--#{$prefix}border)
// $border-hover: var(--#{$prefix}border-hover)
// $border-light: var(--#{$prefix}border-light)
// $border-light-hover: var(--#{$prefix}border-light-hover)
// $text: var(--#{$prefix}text)
// $text-invert: var(--#{$prefix}text-invert)
// $text-light: var(--#{$prefix}text-light)
// $text-strong: var(--#{$prefix}text-strong)
// $code: var(--#{$prefix}code)
// $code-background: var(--#{$prefix}code-background)
// $pre: var(--#{$prefix}pre)
// $pre-background: var(--#{$prefix}pre-background)
// $link: var(--#{$prefix}link)
// $link-invert: var(--#{$prefix}link-invert)
// $link-light: var(--#{$prefix}link-light)
// $link-dark: var(--#{$prefix}link-dark)
// $link-visited: var(--#{$prefix}link-visited)
// $link-hover: var(--#{$prefix}link-hover)
// $link-hover-border: var(--#{$prefix}link-hover-border)
// $link-focus: var(--#{$prefix}link-focus)
// $link-focus-border: var(--#{$prefix}link-focus-border)
// $link-active: var(--#{$prefix}link-active)
// $link-active-border: var(--#{$prefix}link-active-border)