// scss-docs-start form-feedback-variables
$form-feedback-margin-top:          .5rem !default;
$form-feedback-font-size:           var(--font-size-xs) !default;
$form-feedback-font-style:          null !default;
$form-feedback-valid-color:         var(--success-fg) !default;
$form-feedback-invalid-color:       var(--danger-fg) !default;

$form-feedback-icon-valid-color:    #00a748 !default;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
$form-feedback-icon-invalid-color:  #dd0d37 !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
// scss-docs-end form-feedback-variables

// scss-docs-start form-validation-colors
$form-valid-color:                  $form-feedback-valid-color !default;
$form-valid-border-color:           $form-feedback-valid-color !default;
$form-invalid-color:                $form-feedback-invalid-color !default;
$form-invalid-border-color:         $form-feedback-invalid-color !default;
// scss-docs-end form-validation-colors

// scss-docs-start form-validation-states
$form-validation-states: (
  "valid": (
    "color": var(--form-valid-color),
    "icon": $form-feedback-icon-valid,
    "tooltip-color": var(--success-contrast),
    "tooltip-bg-color": var(--success-bg),
    "focus-ring-color": var(--success-focus-ring),
    "border-color": var(--success-border),
  ),
  "invalid": (
    "color": var(--form-invalid-color),
    "icon": $form-feedback-icon-invalid,
    "tooltip-color": var(--danger-contrast),
    "tooltip-bg-color": var(--danger-bg),
    "focus-ring-color": var(--danger-focus-ring),
    "border-color": var(--danger-border),
  )
) !default;
// scss-docs-end form-validation-states