@use "sass:math";
// form variables

$form-group-margin-bottom: 20px;

$input-bg: var(--white);
$input-disabled-bg: var(--gray-200);
$input-disabled-placeholder-color: var(--gray-500);

$input-height: 48px;
$input-border-radius: 12px;
$input-padding-y: 14px;
$input-padding-x: 16px;
$input-color: var(--dark);
$input-placeholder-color: var(--gray-500);
$input-font-family: var(--font-family-base);
$input-font-size: $font-size-base;
$input-font-weight: normal;
$input-line-height: 1.8;
$input-border-color: var(--gray-300);
$input-border-width: 1px;

$form-feedback-margin-top: .25rem;
$form-feedback-font-size: 80%;
$form-feedback-valid-color: var(--success);
$form-feedback-invalid-color: var(--danger);

$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
$form-feedback-icon-valid-color: $form-feedback-valid-color;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.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.1z'/></svg>") !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><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;

$custom-control-indicator-checked-color: $white;
$custom-checkbox-indicator-icon-checked2: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
$custom-checkbox-indicator-icon-checked: url('data:image/svg+xml,<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.98476L3.85575 7L10 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>') !default;
$custom-checkbox-indicator-border-radius: .25rem; // 4px
$input-box-shadow: none;
$input-btn-focus-box-shadow: none;
$custom-control-indicator-size: 1.5rem; // 24px
$input-btn-focus-box-shadow: 1.5rem; // 24px
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
$custom-control-indicator-border-color: var(--gray-300);
$custom-control-indicator-focus-border-color: var(--gray-300);

$input-focus-width: .2rem;
$input-focus-border-color: var(--info);
$input-focus-bg: var(--white);
$input-focus-color: var(--dark);
$input-focus-box-shadow: $input-btn-focus-box-shadow;

$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
        (
            "valid": (
                "color": $form-feedback-valid-color,
                "icon": $form-feedback-icon-valid
            ),
            "invalid": (
                "color": $form-feedback-invalid-color,
                "icon": $form-feedback-icon-invalid
            ),
        ),
        $form-validation-states
);

$escaped-characters: (
        ("<", "%3c"),
        (">", "%3e"),
        ("#", "%23"),
        ("(", "%28"),
        (")", "%29"),
);

$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter: add($input-line-height * .25em, math.div($input-padding-y, 2));

$custom-file-label-height: 36px;
$custom-file-label-padding-y: 8px;
$custom-file-label-padding-x: 8px;
$custom-file-label-color: var(--gray-500);
$custom-file-label-bg: var(--gray-300);
$custom-file-label-border-radius: 8px;