// Forms

$input-padding-y: 0.5rem !default;
$input-padding-x: 0.5rem !default;
$input-line-height: $line-height-base !default;
$input-color: $body-copy !default;
$input-line-height: $line-height-base !default;
$input-focus-width: 2px !default;
$input-focus-color: $input-color !default;
$input-focus-box-shadow: inset 0 0 0 $input-focus-width $navy !default;

$input-bg: $white !default;
$input-disabled-bg: $light-gray !default;
$input-disabled-text: $primitive-color-gray-40 !default;
$input-disabled-border-color: $gray-30 !default;

$input-border-color: $gray-50 !default;
$input-border-width: $border-width !default; // For form controls
$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default;

$input-border-radius: $border-radius !default;

$input-focus-bg: $input-bg !default;
$input-focus-border-color: $navy !default;
$input-focus-readonly-border-color: $gray-10 !default;
$input-focus-color: $input-color !default;

$input-readonly-text: $body-copy !default;
$input-readonly-bg: $gray-20 !default;
$input-readonly-border-color: $gray-20 !default;
$input-readonly-color: $gray-20 !default;

$input-placeholder-color: $gray-50 !default;

$input-height-border: $input-border-width * 2 !default;

// $input-height-inner:                    add($input-line-height * 1rem, $input-padding-y * 2) !default;
//$input-height: $input-height-inner !default; //calc(# {$input-height-inner} + # {$input-height-border}) !default;
$input-height: 2.5rem;

//$input-height-inner-sm:                 ($font-size-sm * $input-line-height-sm) + ($input-padding-y-sm * 2) !default;
//$input-height-sm:                       calc(# {$input-height-inner-sm} + # {$input-height-border}) !default;

//$input-height-inner-lg:                 ($font-size-lg * $input-line-height-lg) + ($input-padding-y-lg * 2) !default;
//$input-height-lg:                       calc(# {$input-height-inner-lg} + # {$input-height-border}) !default;

$input-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !default;

$form-text-margin-top: 0.25rem !default;

$form-check-margin-bottom: 0.5rem !default;
$form-check-input-gutter: 1.25rem !default;
$form-check-input-margin-y: 0.25rem !default;
$form-check-input-margin-x: 0.25rem !default;

$form-check-inline-margin-x: 0.75rem !default;
$form-check-inline-input-margin-x: 0.3125rem !default;

$form-group-margin-bottom: 1rem !default;

$form-grid-gutter-width: 0.5rem !default;
$form-group-margin-bottom: 1rem !default;

$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $light-gray !default;
$input-group-addon-border-color: $input-border-color !default;

$select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon fill='#{$primary}' points='16 22 6 12 7.41 10.59 16 19.17 24.59 10.59 26 12 16 22'/></svg>") !default;

$select-readonly-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon fill='#{$input-readonly-color}' points='16 22 6 12 7.41 10.59 16 19.17 24.59 10.59 26 12 16 22'/></svg>") !default;

$custom-control-gutter: 1.5rem !default;
$custom-control-spacer-y: 0.25rem !default;
$custom-control-spacer-x: 1rem !default;

$custom-control-indicator-size: 1.25rem !default;
$custom-control-indicator-bg: $white !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;

$custom-control-indicator-disabled-bg: $light-gray !default;
$custom-control-label-disabled-color: $gray-30 !default;
$custom-control-border-disabled-color: $gray-30 !default;

$custom-control-indicator-checked-color: $white !default;
$custom-control-indicator-checked-bg: $secondary !default;
$custom-control-indicator-checked-error-bg: $red !default;
$custom-control-indicator-checked-disabled-bg: rgba($navy, 0.6) !default;
$custom-control-indicator-checked-box-shadow: none !default;

$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;

$custom-control-indicator-active-color: $white !default;
$custom-control-indicator-active-bg: lighten($primary, 35%) !default;
$custom-control-indicator-active-error-bg: lighten($red, 35%) !default;
$custom-control-indicator-active-box-shadow: none !default;

$custom-control-indicator-error-color: $white !default;
$custom-control-indicator-error-bg: $red !default;
$custom-control-indicator-error-border: $red !default;
$custom-control-indicator-error-box-shadow: $red !default;

$custom-control-indicator-readonly-color: $white !default;
$custom-control-indicator-readonly-bg: $gray-20 !default;
$custom-control-indicator-readonly-active-bg: $gray-50 !default;
$custom-control-indicator-readonly-border: $gray-50 !default;
$custom-control-indicator-readonly-box-shadow: $gray-50 !default;
$custom-control-indicator-readonly-focus-box-shadow: 0 0 0 1px $body-bg !default;

$custom-checkbox-indicator-border-radius: $border-radius !default;
//$custom-checkbox-indicator-icon-checked: 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,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='13 24 4 15 5.42 13.59 13 21.17 26.59 7.59 28 9 13 24'/%3E%3C/svg%3E");

$custom-checkbox-indicator-indeterminate-bg: $secondary !default;
$custom-checkbox-indicator-indeterminate-border: $secondary !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate: str-replace(
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='7' width='12' height='2' fill='#{$custom-checkbox-indicator-indeterminate-color}'/%3E%3C/svg%3E"),
  "#",
  "%23"
) !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;

$custom-checkbox-readonly-color: $gray-50 !default;
$custom-checkbox-readonly-bg: $gray-50 !default;
$custom-checkbox-readonly-border-color: $gray-70 !default;
$custom-checkbox-readonly-box-shadow: 0 0 0 1px $custom-checkbox-readonly-border-color !default;

$custom-radio-readonly-color: $gray-50 !default;
$custom-radio-readonly-bg: $gray-50 !default;
$custom-radio-readonly-border-color: $gray-50 !default;
$custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: str-replace(
  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"),
  "#",
  "%23"
) !default;

$custom-select-padding-y: 0.375rem !default;
$custom-select-padding-x: 0.75rem !default;
$custom-select-height: $input-height !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-line-height !default;
$custom-select-color: $primary !default;
$custom-select-disabled-color: $light-gray !default;
$custom-select-bg: $white !default;
$custom-select-disabled-bg: lighten($primary, 40%) !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: $black !default; //$primary
$custom-select-indicator-readonly-color: $semantic-color-text-caption !default; //$primary
$custom-select-indicator: str-replace(
  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
  "#",
  "%23"
) !default;
$custom-select-readonly-indicator: str-replace(
  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$input-readonly-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
  "#",
  "%23"
) !default;
//$custom-select-outline-indicator-color:     $primary !default;
//$custom-select-outline-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-outline-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-border-width: $input-border-width !default;
$custom-select-border-color: $primary !default;
$custom-select-border-radius: $border-radius !default;

$custom-select-focus-border-color: lighten($primary, 25%) !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075), 0 0 5px $input-color !default;

//$custom-select-font-size-sm:        75% !default;
//$custom-select-height-sm:           $input-height-sm !default;

$custom-file-height: $input-height !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: 0 0 0 0.075rem $white, 0 0 0 0.2rem $input-color !default;

$custom-file-padding-y: $input-padding-y !default;
$custom-file-padding-x: $input-padding-x !default;
$custom-file-line-height: $input-line-height !default;
$custom-file-color: $input-color !default;
$custom-file-bg: $input-bg !default;
$custom-file-border-width: $input-border-width !default;
$custom-file-border-color: $input-border-color !default;
$custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
  en: "Browse",
) !default;

// Form validation

$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $font-size-sm !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;

$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$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-color: $form-feedback-invalid-color !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;

$form-validation-states: () !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
);

$date-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='#{$primary}'><path d='M26 4h-4V2h-2v2h-8V2h-2v2H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 22H6V12h20Zm0-16H6V6h4v2h2V6h8v2h2V6h4Z'/></svg>") !default;
$date-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='#{$primary-hover}'><path d='M26 4h-4V2h-2v2h-8V2h-2v2H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 22H6V12h20Zm0-16H6V6h4v2h2V6h8v2h2V6h4Z'/></svg>") !default;
$time-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='#{$primary}'><path d='M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z'/><path d='M20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z'/></svg>") !default;
$time-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='#{$primary-hover}'><path d='M16 30a14 14 0 1 1 14-14 14 14 0 0 1-14 14Zm0-26a12 12 0 1 0 12 12A12 12 0 0 0 16 4Z'/><path d='M20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z'/></svg>") !default;