:root {
  @include set-css-var-value('color-white', $color-white);
  @include set-css-var-value('color-black', $color-black);

  // get rgb
  @each $type in (primary, success, warning, danger, error, info) {
    @include set-css-color-rgb($type);
  }

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

  @include set-component-css-var('padding', $padding);

  @include set-css-var-value('font-weight-primary', 500);
  @include set-css-var-value('font-line-height-primary', 24px);

  // z-index --ibiz-index-#{$type}
  @include set-component-css-var('index', $z-index);

  // --ibiz-border-radius-#{$type}
  @include set-component-css-var('border-radius', $border-radius);
}

// for light
:root {
  color-scheme: light;

  @include set-css-var-value('color-white', $color-white);
  @include set-css-var-value('color-black', $color-black);

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

  // color-scheme
  // Background --ibiz-bg-color-#{$type}
  @include set-component-css-var('bg-color', $bg-color);

  // --ibiz-text-color-#{$type}
  @include set-component-css-var('text-color', $text-color);

  // --ibiz-border-color-#{$type}
  @include set-component-css-var('border-color', $border-color);

  // Fill --ibiz-fill-color-#{$type}
  @include set-component-css-var('fill-color', $fill-color);

  // Box-shadow
  // --ibiz-box-shadow-#{$type}
  @include set-component-css-var('box-shadow', $box-shadow);

  // Disable base
  @include set-component-css-var('disabled', $disabled);

  // overlay & mask
  @include set-component-css-var('overlay-color', $overlay-color);
  @include set-component-css-var('mask-color', $mask-color);

  // Border
  @include set-css-var-value('border-width', $border-width);
  @include set-css-var-value('border-style', $border-style);
  @include set-css-var-value('border-color-hover', $border-color-hover);
  @include set-css-var-value(
    'border',
    getCssVar('border-width') getCssVar('border-style')
      getCssVar('border-color')
  );
}