$input-bg:                              $gray-50;
$input-border-color:                    $gray-300;
$input-disabled-bg:                     $gray-200;
$input-disabled-border-color:           null;

$input-color:                           $gray-900;
$input-placeholder-color:               $gray-400;

$input-font-size:                       $font-size-sm;
$input-padding-y:                       0.625rem;
$input-padding-x:                       0.625rem;

$input-border-radius:                   $border-radius-lg;
$input-focus-border-color:              $blue-500;
$input-focus-box-shadow:                0 0 0 1px $blue-500;

$input-bg-dark:                         $gray-700;
$input-border-color-dark:               $gray-600;
$input-color-dark:                      $white;
$input-placeholder-color-dark:          $gray-400;
$input-focus-border-color-dark:         $blue-500;


$form-label-font-size:                  $font-size-sm;

// Custom Select Variables to Match Input
$form-select-padding-y:                 $input-padding-y;
$form-select-padding-x:                 $input-padding-x;
$form-select-font-family:               $input-font-family;
$form-select-font-size:                 $input-font-size;
$form-select-font-weight:               $input-font-weight;
$form-select-line-height:               $input-line-height;
$form-select-color:                     $input-color;
$form-select-bg:                        $input-bg;
$form-select-disabled-color:            $input-disabled-color;
$form-select-disabled-bg:               $input-disabled-bg;
$form-select-disabled-border-color:     $input-disabled-border-color;
$form-select-border-width:              $input-border-width;
$form-select-border-color:              $input-border-color;
$form-select-border-radius:             $input-border-radius;
$form-select-box-shadow:                $input-box-shadow;

$form-select-focus-border-color:        $input-focus-border-color;
$form-select-focus-box-shadow:          $input-focus-box-shadow;

// Adjust the indicator color to match input border
$form-select-indicator-color:           $input-border-color;
$form-select-indicator:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");


@include color-mode(dark) {
    .form-control, .form-check-input, .form-select  {
        background-color: var(--#{$prefix}gray-700);
        border-color: var(--#{$prefix}gray-600);
        color: var(--#{$prefix}white);
    }
    .form-control:disabled {
        background-color: var(--#{$prefix}gray-700);
        opacity: 0.5 !important;

    }
}

// General
$form-check-input-width:                  1em; // Adjusted for better visibility
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + 0.75em; // Increased for better spacing
$form-check-margin-bottom:                0.25rem; // Increased for better spacing
// $form-check-label-color:                  $text-color; // Ensures consistency with the theme
$form-check-label-cursor:                 pointer;
$form-check-transition:                   background-color 0.2s, border-color 0.2s;

// Input Styles
$form-check-input-bg:                     #f9fafb; // Light gray background for inputs
$form-check-input-border:                 1px solid rgba($black, 0.15); // Subtle border for inactive state
$form-check-input-border-radius:          0.25em; // More rounded corners
$form-check-radio-border-radius:          50%; // Circle for radio inputs
$form-check-input-focus-border:           rgba($blue, 0.5); // Focused state border
$form-check-input-focus-box-shadow:       0 0 0 4px rgba($blue, 0.25);  // Focused state shadow

// Checked State
$form-check-input-checked-color:          #fff; // White checkmark for contrast
$form-check-input-checked-bg-color:       #2563eb; // Flowbite's primary blue color for the background
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>"); // Checkmark icon
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>"); // Dot icon for radio

// Indeterminate State
$form-check-input-indeterminate-color:          #fff;
$form-check-input-indeterminate-bg-color:       #2563eb;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>"); // Indeterminate state icon

// Disabled State
$form-check-input-disabled-opacity:        0.6; // Slightly more visible
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

// Inline Spacing
$form-check-inline-margin-end:    1rem; // Default inline spacing