// Bootstrap 5.3 - Form Switch Variables

// ============================================
// FORM SWITCH
// ============================================

$form-switch-color: $gray-950;
$form-switch-width: 3em;
$form-switch-padding-start: $form-switch-width + .5em;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
$form-switch-border-radius: $form-switch-width;
$form-switch-transition: background-position .15s ease-in-out;

$form-switch-focus-color: $gray-950;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");

$form-switch-checked-color: $component-active-color;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
$form-switch-checked-bg-position: right center;

// ============================================
// FORM SWITCH HOVER STATES
// ============================================

// Unchecked
$form-switch-unchecked-hover-bg: $white;
$form-switch-unchecked-hover-border: $neutral-600;
$form-switch-unchecked-hover-color: $neutral-600;


// Checked
$form-switch-checked-hover-bg: $primary-700;
$form-switch-checked-hover-border: $primary-700;
$form-switch-checked-hover-color: $form-switch-checked-color;


// ============================================
// FORM SWITCH ACTIVE/PRESSED STATES
// ============================================

// Unchecked
$form-switch-unchecked-active-bg: $white;
$form-switch-unchecked-active-border: $neutral-500;
$form-switch-unchecked-active-color: $neutral-500;

// Checked
$form-switch-checked-active-bg: $primary-900;
$form-switch-checked-active-border: $primary-900;
$form-switch-checked-active-color: $form-switch-checked-color;

// ============================================
// FORM SWITCH DISABLED STATES
// ============================================

// Unchecked
$form-switch-unchecked-disabled-bg: $white;
$form-switch-unchecked-disabled-border: $gray-400;
$form-switch-unchecked-disabled-color: $gray-300;


// checked
$form-switch-checked-disabled-bg: $gray-300;
$form-switch-checked-disabled-border: $gray-300;
$form-switch-checked-disabled-color: $white;