@use 'sass:map';

// CSS3 var
@use 'common/var' as *;
@use 'mixins/var' as *;

// for better performance do not dynamically change the root variable if you really
// do not need that, since this could introduce recalculation overhead for rendering.
// https://lisilinhart.info/posts/css-variables-performance/

:root {
  --sg-color-white: #{$color-white};
  --sg-color-black: #{$color-black};

  --sg-color-primary: #{$color-primary};

  @for $i from 1 through 9 {
    @include set-css-color-type-light('primary', $i);
  }

  // --sg-color-#{$type}
  // --sg-color-#{$type}-light-{$i}
  @each $type in (success, warning, danger, error, info) {
    @include set-css-color-type($type);
  }

  // Background
  --sg-bg-color: #{$bg-color};

  // Border
  --sg-border-width-base: #{$border-width-base};
  --sg-border-style-base: #{$border-style-base};
  --sg-border-color-hover: #{$border-color-hover};
  --sg-border-base: var(--sg-border-width-base) var(--sg-border-style-base)
    var(--sg-border-color-base);

  // Svg
  --sg-svg-monochrome-grey: #dcdde0;

  // Fill
  --sg-fill-base: var(--sg-color-white);

  // Typography
  @include set-component-css-var('font-size', $font-size);

  --sg-font-weight-primary: 400;
  --sg-font-line-height-primary: 24px;
  --sg-text-color-disabled-base: #bbb;

  // z-index
  --sg-index-normal: 1;
  --sg-index-top: 1000;
  --sg-index-popper: 2000;

  // --sg-text-color-#{$type}
  @include set-component-css-var('text-color', $text-color);
  // --sg-border-color-#{$type}
  @include set-component-css-var('border-color', $border-color);
  // --sg-border-radius-#{$type}
  @include set-component-css-var('border-radius', $border-radius);
  // Box-shadow
  // --sg-box-shadow-#{$type}
  @include set-component-css-var('box-shadow', $box-shadow);
  // Disable base
  @include set-component-css-var('disabled', $disabled);

  /* Transition
-------------------------- */
  // refer to this website to get the bezier motion function detail
  //  https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
  --sg-transition-duration: #{map.get($transition-duration, 'default')};
  --sg-transition-duration-fast: #{map.get($transition-duration, 'fast')};

  @include set-component-css-var('transition-function', $transition-function);
  @include set-component-css-var('transition', $transition);
}