@use '@syncfusion/react-base/styles/themes/variables' as *;

// Function for consistent ripple effects
@function cbox-ripple-color($color, $opacity: 0.08) {
  @return rgba($color, $opacity);
}

// Checkbox sizes
$cbox-frame-sm-font-size: $spacing-16 !default;
$cbox-frame-me-font-size: $spacing-18 !default;
$cbox-frame-la-font-size: $spacing-20 !default;

$cbox-icon-size: $font-size-xs !default;
$cbox-icon-small-size: $font-size-xs !default;
$cbox-icon-large-size: $font-size-sm !default;
$cbox-sm-line-height: $line-height-xs !default;
$cbox-me-line-height: $line-height-sm !default;
$cbox-la-line-height: $line-height-sm !default;

$cbox-label-sm-font-size:$font-size-xs !default;
$cbox-label-me-font-size:$font-size-sm !default;
$cbox-label-la-font-size:$font-size-sm !default;

$cbox-sm-gap: $spacing-4 !default;
$cbox-me-gap: $spacing-3 !default;
$cbox-la-gap: $spacing-4 !default;

$cbox-label-font-weight: $font-weight-normal !default;

// Ripple sizes
$cbox-ripple-padding: $spacing-7 !default;
$cbox-ripple-small-padding: $spacing-6 !default;
$cbox-ripple-large-padding: $spacing-10 !default;

// Borders
$cbox-border-radius: $radius-2 !default;
$cbox-border: 2px solid !default;
$cbox-ripple-radius: $radius-full !default;

// Margins
$cbox-margin: $spacing-8 !default;

// Colors
$cbox-color: rgb($content-text-color) !default;
$cbox-checkmark-color: rgb($primary-text-color) !default;
$cbox-checkmark-bgcolor: rgb($secondary) !default;
$cbox-checked-ripple-bgcolor: rgba($primary, .08) !default;
$cbox-keyboard-focus-box-shadow: $shadow-focus-ring2 !default;
$cbox-pressed-focus-border-color: rgb($content-text-color-alt1) !default;
$cbox-keyboard-pressed-box-shadow: none !default;
$cbox-unchecked-color: rgb($content-text-color-alt1) !default;
$cbox-unchecked-bg-color: transparent !default;
$cbox-disabled-opacity: 0.38 !default;

// Color variants map with text colors
$cbox-variants: (
  'primary': (
    bg: rgb($primary-bg-color), 
    color: rgb($primary-text),
    ripple: cbox-ripple-color($primary, 0.12)
  ),
  'success': (
    bg: rgb($success-bg-color), 
    color: rgb($success-text),
    ripple: cbox-ripple-color($success-bg-color, 0.12)
  ),
  'info': (
    bg: rgb($info-bg-color), 
    color: rgb($info-text),
    ripple: cbox-ripple-color($info-bg-color, 0.12)
  ),
  'warning': (
    bg: rgb($warning-bg-color), 
    color: rgb($warning-text),
    ripple: cbox-ripple-color($warning-bg-color, 0.12)
  ),
  'error': (
    bg: rgb($error-bg-color), 
    color: rgb($error-text),
    ripple: cbox-ripple-color($error-bg-color, 0.12)
  )
);