@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

/* Helper function to get SVG with given color
 * Color must be given in HEX including hyphens
 */
@function tick($color) {
  @return 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" fill="#{str-replace($color, "#", "%23")}"/></svg>';
}

/* Helper function to get SVG with given color
 * Color must be given in HEX including hyphens
 */
 @function checkmark($color) {
  @return 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" fill="#{str-replace($color, "#", "%23")}"/></svg>';
}


/* DROPDOWN BUTTON
*****************************/

$ezmodus-dropdown-border-radius:              3px !default;
$ezmodus-dropdown-border:                     1px solid #ced4da !default;
$ezmodus-dropdown-background-color:           #ffffff !default;
$ezmodus-dropdown-color:                      #000000 !default;
$ezmodus-dropdown-width:                      auto !default;
$ezmodus-dropdown-padding:                    0 6px 1px 0 !default;
$ezmodus-dropdown-text-padding:               .375rem 1.75rem .375rem .75rem !default;
$ezmodus-dropdown-tick-width:                 1rem !default;
$ezmodus-dropdown-tick-height:                1rem !default;
$ezmodus-dropdown-tick-color:                 '#6c6c6c' !default;
$ezmodus-dropdown-disabled-color:             #666666 !default;
$ezmodus-dropdown-disabled-background-color:  #f2f2f2 !default;
$ezmodus-dropdown-disabled-cursor:            default !default;
$ezmodus-dropdown-disabled-tick-color:        '#c4c4c4' !default;


/* DROPDOWN MENU
*****************************/

$ezmodus-menu-background-color:     #ffffff !default;
$ezmodus-menu-border:               1px solid #ced4da !default;
$ezmodus-menu-border-radius:        3px 3px 0 0 !default;
$ezmodus-menu-min-width:            144px !default;
$ezmodus-menu-max-width:            initial !default;
$ezmodus-menu-search-min-width:     192px !default;
$ezmodus-menu-search-max-width:     initial !default;


/*MENU SEARCH AREA AND INPUT
*****************************/
$ezmodus-search-padding:                    6px 12px 0 12px !default;
$ezmodus-search-input-padding:              6px 12px !default;
$ezmodus-search-input-border-radius:        3px !default;
$ezmodus-search-input-border:               1px solid #d6d6d6 !default;
$ezmodus-search-input-color:                initial !default;
$ezmodus-search-input-placeholder-color:    initial !default;
$ezmodus-search-input-background-color:     initial !default;
$ezmodus-search-input-focus-outline-color:  initial !default;


/* MENU CLEAR AREA AND BUTTON
*****************************/

$ezmodus-clear-padding:                 6px 12px 3px 12px !default;
$ezmodus-clear-button-text-padding:     .375rem 1.75rem .375rem .75rem !default;
$ezmodus-clear-button-color:            #2b2b2b !default;
$ezmodus-clear-button-background-color: #efefef !default;
$ezmodus-clear-button-width:            100% !default;
$ezmodus-clear-button-height:           32px !default;
$ezmodus-clear-button-border:           1px solid #d6d6d6 !default;
$ezmodus-clear-button-border-radius:    3px !default;


/* MENU NO RESULTS TEXT
*****************************/

$ezmodus-no-results-padding: 6px 12px !default;


/* MENU LIST GROUPS
*****************************/
$ezmodus-list-group-padding:                     6px 12px !default;
$ezmodus-list-group-color:                       #000000 !default;
$ezmodus-list-group-font-weight:                 600 !default;
$ezmodus-list-group-background-color:            transparent !default;
$ezmodus-list-group-background-color-hover:      transparent !default;
$ezmodus-list-group-margin-left:                 18px !default;
$ezmodus-list-group-item-padding-left:           30px !default;


/* MENU LIST AND ITEMS
*****************************/
$ezmodus-list-item-padding:                     6px 12px !default;
$ezmodus-list-item-color:                       #000000 !default;
$ezmodus-list-item-background-color:            transparent !default;
$ezmodus-list-item-background-color-hover:      #d6d6d6 !default;
$ezmodus-list-item-link-min-height:             1.2rem !default;
$ezmodus-list-item-link-text-padding:           0 12px 0 0 !default;
$ezmodus-list-item-checkmark-width:             1rem !default;
$ezmodus-list-item-checkmark-height:            1rem !default;
$ezmodus-list-item-checkmark-color:             '#6c6c6c' !default;
$ezmodus-list-item-subtext-color:               #6c6c6c !default;
$ezmodus-list-item-subtext-padding:             6px 0 3px $ezmodus-list-item-checkmark-width !default;
$ezmodus-list-item-disabled-color:              #999999 !default;
$ezmodus-list-item-disabled-background-color:   transparent !default;