(function($) {
Drupal.webform = Drupal.webform || {};
Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
Drupal.webform.elementHelpIcon = Drupal.webform.elementHelpIcon || {};

Drupal.webform.intlTelInput.options = {separateDialCode: true};
Drupal.webform.elementHelpIcon.options = {
  position: {
    my: 'left-24 top+30', // align arrow with icon
    at: 'center', // ... in relation to center of the icon
    collision: 'flipfit',
    using: function (position, feedback) {
      $(this).css(position);
      // vertical class updates location of arrow (top or bottom)
      $(this).addClass(feedback.vertical);

      const leftOffset = feedback.target.left - feedback.element.left;
      // If the tooltip doesn't fit in the window horiztonally it gets pushed over to the left.
      // We need to ensure the position of the arrow aligns with the center of the icon
      document.documentElement.style.setProperty('--icon-horizontal-center-offset',leftOffset + 'px');
    }
  },
  close: function(event, ui) {
    ui.tooltip.hover(function() {
      $(this).stop(true).fadeTo(400, 1); 
    },
    function() {
      $(this).fadeOut('400', function() {
        $(this).remove();
      });
    });
  }
}
})(jQuery);

// Prevent crtl+r from resubmitting this form.
// https://stackoverflow.com/questions/6320113/how-to-prevent-form-resubmission-when-page-is-refreshed-f5-ctrlr
if ( window.history.replaceState ) {
   window.history.replaceState( null, null, window.location.href );
}