Autocomplete.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Autocomplete markup have to match snapshot 1`] = `
<Autocomplete
  align_autocomplete={null}
  ariaLiveDelay={1}
  aria_live_options="aria_live_options"
  class="class"
  className="className"
  custom_element={{}}
  custom_method={[Function]}
  data={
    [
      "AA c",
      "BB cc zethx",
      {
        "content": [
          "CC",
          "cc",
        ],
      },
    ]
  }
  default_value="default_value"
  direction="bottom"
  disable_filter="disable_filter"
  disable_highlighting="disable_highlighting"
  disable_reorder="disable_reorder"
  disabled="disabled"
  drawer_class="drawer_class"
  enable_body_lock={true}
  focusable="focusable"
  global_status_id="main"
  icon="icon"
  icon_position={null}
  icon_size="icon_size"
  id="autocomplete-id"
  indicator_label="indicator_label"
  input_element={null}
  input_icon="input_icon"
  input_ref={null}
  input_value="input_value"
  keep_open="keep_open"
  keep_value="keep_value"
  keep_value_and_selection="keep_value_and_selection"
  label="Autocomplete Label:"
  label_direction="horizontal"
  label_sr_only="label_sr_only"
  max_height={1}
  mode="sync"
  no_animation={true}
  no_options="no_options"
  no_scroll_animation="no_scroll_animation"
  observer_element="observer_element"
  on_blur={[Function]}
  on_change={[Function]}
  on_focus={[Function]}
  on_hide={[Function]}
  on_select={[Function]}
  on_show={[Function]}
  on_state_update={[Function]}
  on_type={[Function]}
  open_on_focus="open_on_focus"
  opened={true}
  options_render={{}}
  page_offset="page_offset"
  placeholder="placeholder"
  portal_class="portal_class"
  prevent_close="prevent_close"
  prevent_selection={null}
  scrollable="scrollable"
  search_in_word_index="search_in_word_index"
  search_numbers="search_numbers"
  selected_sr="selected_sr"
  show_all="show_all"
  show_clear_button="show_clear_button"
  show_options_sr="show_options_sr"
  show_submit_button={true}
  size={null}
  skeleton="skeleton"
  skip_portal={true}
  status="status"
  status_no_animation="status_no_animation"
  status_props={null}
  status_state="error"
  stretch="stretch"
  submit_button_icon="submit_button_icon"
  submit_button_title="submit_button_title"
  submit_element="submit_element"
  suffix="suffix"
  title="title"
  triangle_position={null}
  value={2}
>
  <DrawerListProvider
    action_menu={false}
    align_autocomplete={null}
    align_drawer="left"
    ariaLiveDelay={1}
    aria_live_options="aria_live_options"
    cache_hash={null}
    class="class"
    className="className"
    custom_element={{}}
    custom_method={[Function]}
    data={
      [
        "AA c",
        "BB cc zethx",
        {
          "content": [
            "CC",
            "cc",
          ],
        },
      ]
    }
    default_value="default_value"
    direction="bottom"
    disable_filter="disable_filter"
    disable_highlighting="disable_highlighting"
    disable_reorder="disable_reorder"
    disabled="disabled"
    drawer_class="drawer_class"
    enable_body_lock={true}
    fixed_position={false}
    focusable="focusable"
    global_status_id="main"
    handle_dismiss_focus={null}
    icon="icon"
    icon_position={null}
    icon_size="icon_size"
    id="autocomplete-id"
    ignore_events={false}
    independent_width={false}
    indicator_label="indicator_label"
    input_element={null}
    input_icon="input_icon"
    input_ref={null}
    input_value="input_value"
    is_popup={false}
    keep_open="keep_open"
    keep_value="keep_value"
    keep_value_and_selection="keep_value_and_selection"
    label="Autocomplete Label:"
    label_direction="horizontal"
    label_sr_only="label_sr_only"
    list_class={null}
    max_height={1}
    min_height={10}
    mode="sync"
    no_animation={true}
    no_options="no_options"
    no_scroll_animation="no_scroll_animation"
    observer_element="observer_element"
    on_blur={[Function]}
    on_change={[Function]}
    on_focus={[Function]}
    on_hide={[Function]}
    on_pre_change={null}
    on_resize={null}
    on_select={[Function]}
    on_show={[Function]}
    on_state_update={[Function]}
    on_type={[Function]}
    open_on_focus="open_on_focus"
    opened={null}
    options_render={{}}
    page_offset="page_offset"
    placeholder="placeholder"
    portal_class="portal_class"
    prepared_data={null}
    prevent_close="prevent_close"
    prevent_focus={true}
    prevent_selection={null}
    raw_data={null}
    role="listbox"
    scrollable="scrollable"
    search_in_word_index="search_in_word_index"
    search_numbers="search_numbers"
    selected_sr="selected_sr"
    show_all="show_all"
    show_clear_button="show_clear_button"
    show_options_sr="show_options_sr"
    show_submit_button={true}
    size={null}
    skeleton="skeleton"
    skip_keysearch={true}
    skip_portal={true}
    status="status"
    status_no_animation="status_no_animation"
    status_props={null}
    status_state="error"
    stretch="stretch"
    submit_button_icon="submit_button_icon"
    submit_button_title="submit_button_title"
    submit_element="submit_element"
    suffix="suffix"
    tagName="dnb-autocomplete"
    title="title"
    triangle_position={null}
    use_drawer_on_mobile={null}
    value={2}
    wrapper_element={null}
  >
    <AutocompleteInstance
      align_autocomplete={null}
      ariaLiveDelay={1}
      aria_live_options="aria_live_options"
      class="class"
      className="className"
      custom_element={{}}
      custom_method={[Function]}
      data={
        [
          "AA c",
          "BB cc zethx",
          {
            "content": [
              "CC",
              "cc",
            ],
          },
        ]
      }
      default_value="default_value"
      direction="bottom"
      disable_filter="disable_filter"
      disable_highlighting="disable_highlighting"
      disable_reorder="disable_reorder"
      disabled="disabled"
      drawer_class="drawer_class"
      enable_body_lock={true}
      focusable="focusable"
      global_status_id="main"
      icon="icon"
      icon_position={null}
      icon_size="icon_size"
      id="autocomplete-id"
      indicator_label="indicator_label"
      input_element={null}
      input_icon="input_icon"
      input_ref={null}
      input_value="input_value"
      keep_open="keep_open"
      keep_value="keep_value"
      keep_value_and_selection="keep_value_and_selection"
      label="Autocomplete Label:"
      label_direction="horizontal"
      label_sr_only="label_sr_only"
      max_height={1}
      mode="sync"
      no_animation={true}
      no_options="no_options"
      no_scroll_animation="no_scroll_animation"
      observer_element="observer_element"
      on_blur={[Function]}
      on_change={[Function]}
      on_focus={[Function]}
      on_hide={[Function]}
      on_select={[Function]}
      on_show={[Function]}
      on_state_update={[Function]}
      on_type={[Function]}
      open_on_focus="open_on_focus"
      opened={true}
      options_render={{}}
      page_offset="page_offset"
      placeholder="placeholder"
      portal_class="portal_class"
      prevent_close="prevent_close"
      prevent_selection={null}
      scrollable="scrollable"
      search_in_word_index="search_in_word_index"
      search_numbers="search_numbers"
      selected_sr="selected_sr"
      show_all="show_all"
      show_clear_button="show_clear_button"
      show_options_sr="show_options_sr"
      show_submit_button={true}
      size={null}
      skeleton="skeleton"
      skip_portal={true}
      status="status"
      status_no_animation="status_no_animation"
      status_props={null}
      status_state="error"
      stretch="stretch"
      submit_button_icon="submit_button_icon"
      submit_button_title="submit_button_title"
      submit_element="submit_element"
      suffix="suffix"
      title="title"
      triangle_position={null}
      value={2}
    >
      <span
        className="dnb-autocomplete dnb-form-component class className dnb-autocomplete--bottom dnb-autocomplete--disabled dnb-autocomplete--opened dnb-autocomplete--horizontal dnb-autocomplete__status--error dnb-autocomplete__form-status"
      >
        <FormLabel
          class={null}
          className={null}
          disabled="disabled"
          element="label"
          for_id="autocomplete-id"
          id="autocomplete-id-label"
          label_direction="horizontal"
          onClick={[Function]}
          skeleton="skeleton"
          sr_only="label_sr_only"
          text="Autocomplete Label:"
          title={null}
          vertical={null}
        >
          <label
            aria-disabled={true}
            className="dnb-form-label"
            disabled={true}
            htmlFor="autocomplete-id"
            id="autocomplete-id-label"
            onClick={[Function]}
          >
            Autocomplete Label:
          </label>
        </FormLabel>
        <span
          className="dnb-autocomplete__inner"
        >
          <AlignmentHelper
            className={null}
          >
            <span
              aria-hidden={true}
              className="dnb-alignment-helper"
            />
          </AlignmentHelper>
          <FormStatus
            attributes={null}
            class={null}
            className={null}
            global_status_id="main"
            icon="error"
            icon_size="medium"
            id="autocomplete-id-form-status"
            label="Autocomplete Label:"
            no_animation="status_no_animation"
            role={null}
            show={true}
            size="default"
            skeleton="skeleton"
            state="error"
            status="error"
            stretch={null}
            text="status"
            text_id="autocomplete-id-status"
            title={null}
            variant={null}
            width_element={null}
            width_selector={null}
          >
            <span
              className="dnb-form-status dnb-form-status--error dnb-form-status__size--default dnb-form-status--has-content"
              id="autocomplete-id-form-status"
              role="alert"
            >
              <span
                className="dnb-form-status__shell"
              >
                <Icon
                  alt={null}
                  attributes={null}
                  border={null}
                  className={null}
                  color={null}
                  height={null}
                  icon={
                    <ErrorIcon
                      title={null}
                    />
                  }
                  inherit_color={false}
                  modifier={null}
                  size="medium"
                  skeleton={null}
                  title={null}
                  width={null}
                >
                  <span
                    aria-hidden={true}
                    className="dnb-icon dnb-icon--medium"
                    role="presentation"
                  >
                    <Component>
                      <ErrorIcon
                        title={null}
                      >
                        <svg
                          fill="none"
                          height="24"
                          title={null}
                          viewBox="0 0 24 24"
                          width="24"
                        >
                          <path
                            d="M23.625 17.864A3.547 3.547 0 0120.45 23H3.548a3.546 3.546 0 01-3.172-5.136l8.45-14.902a3.548 3.548 0 016.347 0l8.452 14.902z"
                            fill="#DC2A2A"
                          />
                          <path
                            d="M12 16.286a1.286 1.286 0 100 2.572 1.286 1.286 0 000-2.572z"
                            fill="#fff"
                          />
                          <path
                            d="M12 13.818v-5"
                            stroke="#fff"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="1.5"
                          />
                        </svg>
                      </ErrorIcon>
                    </Component>
                  </span>
                </Icon>
                <span
                  className="dnb-form-status__text"
                  id="autocomplete-id-status"
                >
                  status
                </span>
              </span>
            </span>
          </FormStatus>
          <span
            className="dnb-autocomplete__row"
          >
            <span
              className="dnb-autocomplete__shell dnb-no-focus"
              onKeyDown={[Function]}
            >
              <Input
                align={null}
                aria-activedescendant="option-autocomplete-id-2"
                aria-autocomplete="both"
                aria-controls="autocomplete-id-ul"
                aria-describedby="autocomplete-id-status autocomplete-id-suffix"
                aria-expanded={true}
                aria-haspopup="listbox"
                autoCapitalize="none"
                autoComplete="off"
                autoCorrect="off"
                autocomplete="off"
                class={null}
                className="dnb-autocomplete__input"
                clear={false}
                clear_button_title={null}
                custom_element={null}
                custom_method={null}
                disabled="disabled"
                global_status_id={null}
                icon="input_icon"
                icon_position={null}
                icon_size="icon_size"
                id="autocomplete-id"
                inner_element={null}
                inner_ref={null}
                input_attributes={null}
                input_class={null}
                input_element={null}
                input_state={null}
                keep_placeholder={null}
                label={null}
                label_direction={null}
                label_sr_only={null}
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                onKeyDown={[Function]}
                onMouseDown={[Function]}
                on_blur={null}
                on_change={null}
                on_focus={null}
                on_state_update={null}
                on_submit={null}
                on_submit_blur={null}
                on_submit_focus={null}
                placeholder={null}
                readOnly={false}
                role="combobox"
                selectall={null}
                size={null}
                skeleton="skeleton"
                spellCheck="false"
                status="error"
                status_no_animation={null}
                status_props={null}
                status_state="error"
                stretch={null}
                submit_button_icon="loupe"
                submit_button_status={null}
                submit_button_title={null}
                submit_button_variant="secondary"
                submit_element={
                  <ForwardRef
                    aria-expanded={true}
                    aria-haspopup="listbox"
                    aria-label="submit_button_title"
                    className="dnb-button--active"
                    disabled="disabled"
                    icon="submit_button_icon"
                    icon_size="icon_size"
                    id="autocomplete-id-submit-button"
                    onKeyDown={[Function]}
                    onSubmit={[Function]}
                    size={null}
                    status={null}
                    tooltip="submit_button_title"
                    type="button"
                    variant="secondary"
                  />
                }
                suffix={null}
                type={null}
                value="CC cc"
              >
                <span
                  className="dnb-input dnb-form-component dnb-autocomplete__input dnb-input--icon-position-null dnb-input--has-icon dnb-input--icon-size-icon_size dnb-input--has-submit-element dnb-input__status--error"
                  data-has-content="true"
                  data-input-state="virgin"
                >
                  <span
                    className="dnb-input__inner"
                  >
                    <AlignmentHelper
                      className={null}
                    >
                      <span
                        aria-hidden={true}
                        className="dnb-alignment-helper"
                      />
                    </AlignmentHelper>
                    <FormStatus
                      attributes={null}
                      class={null}
                      className={null}
                      global_status_id={null}
                      icon="error"
                      icon_size="medium"
                      id="autocomplete-id-form-status"
                      label={null}
                      no_animation={null}
                      role={null}
                      show={false}
                      size="default"
                      skeleton="skeleton"
                      state="error"
                      status="error"
                      stretch={null}
                      text="error"
                      text_id="autocomplete-id-status"
                      title={null}
                      variant={null}
                      width_element={null}
                      width_selector={null}
                    />
                    <span
                      className="dnb-input__row"
                    >
                      <span
                        className="dnb-input__shell"
                      >
                        <input
                          aria-activedescendant="option-autocomplete-id-2"
                          aria-autocomplete="both"
                          aria-controls="autocomplete-id-ul"
                          aria-describedby="autocomplete-id-status autocomplete-id-suffix"
                          aria-expanded={true}
                          aria-haspopup="listbox"
                          autoCapitalize="none"
                          autoComplete="off"
                          autoCorrect="off"
                          className="dnb-input__input"
                          disabled={false}
                          id="autocomplete-id"
                          name="autocomplete-id"
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onMouseDown={[Function]}
                          role="combobox"
                          spellCheck="false"
                          value="CC cc"
                        />
                        <Component
                          className="dnb-input__icon"
                          icon="input_icon"
                          size="icon_size"
                        >
                          <IconPrimary
                            alt={null}
                            attributes={null}
                            border={null}
                            className="dnb-input__icon"
                            color={null}
                            height={null}
                            icon="input_icon"
                            inherit_color={true}
                            modifier={null}
                            size="icon_size"
                            skeleton={null}
                            title={null}
                            width={null}
                          />
                        </Component>
                      </span>
                      <span
                        className="dnb-input__submit-element"
                      >
                        <ForwardRef
                          aria-expanded={true}
                          aria-haspopup="listbox"
                          aria-label="submit_button_title"
                          className="dnb-button--active"
                          disabled="disabled"
                          icon="submit_button_icon"
                          icon_size="icon_size"
                          id="autocomplete-id-submit-button"
                          onKeyDown={[Function]}
                          onSubmit={[Function]}
                          size={null}
                          status={null}
                          tooltip="submit_button_title"
                          type="button"
                          variant="secondary"
                        >
                          <InputSubmitButton
                            aria-expanded={true}
                            aria-haspopup="listbox"
                            aria-label="submit_button_title"
                            className="dnb-button--active"
                            disabled="disabled"
                            icon="submit_button_icon"
                            icon_size="icon_size"
                            id="autocomplete-id-submit-button"
                            innerRef={null}
                            onKeyDown={[Function]}
                            onSubmit={[Function]}
                            on_submit={null}
                            on_submit_blur={null}
                            on_submit_focus={null}
                            size={null}
                            skeleton={false}
                            status={null}
                            status_props={null}
                            status_state="error"
                            title={null}
                            tooltip="submit_button_title"
                            type="button"
                            value={null}
                            variant="secondary"
                          >
                            <span
                              className="dnb-input__submit-button"
                              data-input-state="virgin"
                            >
                              <Button
                                aria-expanded={true}
                                aria-haspopup="listbox"
                                aria-label="submit_button_title"
                                bounding={null}
                                class={null}
                                className="dnb-input__submit-button__button dnb-button--input-button dnb-button--active"
                                custom_content={null}
                                custom_element={null}
                                custom_method={null}
                                disabled="disabled"
                                element={null}
                                global_status_id={null}
                                href={null}
                                icon="submit_button_icon"
                                icon_position="right"
                                icon_size="icon_size"
                                id="autocomplete-id-submit-button"
                                innerRef={null}
                                inner_ref={null}
                                onBlur={[Function]}
                                onClick={[Function]}
                                onFocus={[Function]}
                                onKeyDown={[Function]}
                                onSubmit={[Function]}
                                on_click={null}
                                size={null}
                                skeleton={null}
                                status={null}
                                status_no_animation={null}
                                status_props={null}
                                status_state="error"
                                stretch={null}
                                text={null}
                                title={null}
                                to={null}
                                tooltip="submit_button_title"
                                type="button"
                                variant="secondary"
                                wrap={null}
                              >
                                <button
                                  aria-expanded={true}
                                  aria-haspopup="listbox"
                                  aria-label="submit_button_title"
                                  className="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                  disabled={false}
                                  id="autocomplete-id-submit-button"
                                  onBlur={[Function]}
                                  onClick={[Function]}
                                  onFocus={[Function]}
                                  onKeyDown={[Function]}
                                  onSubmit={[Function]}
                                  type="button"
                                >
                                  <Content
                                    aria-expanded={true}
                                    aria-haspopup="listbox"
                                    aria-label="submit_button_title"
                                    bounding={null}
                                    class={null}
                                    className="dnb-input__submit-button__button dnb-button--input-button dnb-button--active"
                                    content={null}
                                    custom_content={null}
                                    custom_element={null}
                                    custom_method={null}
                                    disabled="disabled"
                                    element={null}
                                    global_status_id={null}
                                    href={null}
                                    icon="submit_button_icon"
                                    icon_position="right"
                                    icon_size="icon_size"
                                    id="autocomplete-id-submit-button"
                                    innerRef={null}
                                    inner_ref={null}
                                    isIconOnly={true}
                                    onBlur={[Function]}
                                    onClick={[Function]}
                                    onFocus={[Function]}
                                    onKeyDown={[Function]}
                                    onSubmit={[Function]}
                                    on_click={null}
                                    size={null}
                                    skeleton={false}
                                    status={null}
                                    status_no_animation={null}
                                    status_props={null}
                                    status_state="error"
                                    stretch={null}
                                    text={null}
                                    title={null}
                                    to={null}
                                    tooltip="submit_button_title"
                                    type="button"
                                    variant="secondary"
                                    wrap={null}
                                  >
                                    <span
                                      aria-hidden={true}
                                      className="dnb-button__alignment"
                                      key="button-alignment"
                                    >
                                      ‌
                                    </span>
                                    <IconPrimary
                                      alt={null}
                                      aria-hidden={null}
                                      attributes={null}
                                      border={null}
                                      className="dnb-button__icon"
                                      color={null}
                                      height={null}
                                      icon="submit_button_icon"
                                      inherit_color={true}
                                      key="button-icon"
                                      modifier={null}
                                      size="icon_size"
                                      skeleton={false}
                                      title={null}
                                      width={null}
                                    />
                                  </Content>
                                </button>
                                <FormStatus
                                  attributes={null}
                                  class={null}
                                  className={null}
                                  global_status_id={null}
                                  icon="error"
                                  icon_size="medium"
                                  id="autocomplete-id-submit-button-form-status"
                                  label={null}
                                  no_animation={null}
                                  role={null}
                                  show={null}
                                  size="default"
                                  skeleton={null}
                                  state="error"
                                  status="error"
                                  stretch={null}
                                  text={null}
                                  text_id="autocomplete-id-submit-button-status"
                                  title={null}
                                  variant={null}
                                  width_element={null}
                                  width_selector={null}
                                />
                                <Tooltip
                                  id="autocomplete-id-submit-button-tooltip"
                                  targetElement={
                                    {
                                      "current": <button
                                        aria-describedby="autocomplete-id-submit-button-tooltip"
                                        aria-expanded="true"
                                        aria-haspopup="listbox"
                                        aria-label="submit_button_title"
                                        class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                        id="autocomplete-id-submit-button"
                                        type="button"
                                      >
                                        <span
                                          aria-hidden="true"
                                          class="dnb-button__alignment"
                                        >
                                          ‌
                                        </span>
                                      </button>,
                                    }
                                  }
                                  tooltip="submit_button_title"
                                >
                                  <TooltipWithEvents
                                    active={null}
                                    align={null}
                                    animatePosition={false}
                                    arrow="center"
                                    attributes={
                                      {
                                        "children": "submit_button_title",
                                        "className": "dnb-tooltip",
                                      }
                                    }
                                    className={null}
                                    fixedPosition={false}
                                    group={null}
                                    hideDelay={500}
                                    id="autocomplete-id-submit-button-tooltip"
                                    internalId="autocomplete-id-submit-button-tooltip"
                                    noAnimation={false}
                                    position="top"
                                    showDelay={300}
                                    size="basis"
                                    skipPortal={null}
                                    target={
                                      <button
                                        aria-describedby="autocomplete-id-submit-button-tooltip"
                                        aria-expanded="true"
                                        aria-haspopup="listbox"
                                        aria-label="submit_button_title"
                                        class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                        id="autocomplete-id-submit-button"
                                        type="button"
                                      >
                                        <span
                                          aria-hidden="true"
                                          class="dnb-button__alignment"
                                        >
                                          ‌
                                        </span>
                                      </button>
                                    }
                                    targetElement={
                                      {
                                        "current": <button
                                          aria-describedby="autocomplete-id-submit-button-tooltip"
                                          aria-expanded="true"
                                          aria-haspopup="listbox"
                                          aria-label="submit_button_title"
                                          class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                          id="autocomplete-id-submit-button"
                                          type="button"
                                        >
                                          <span
                                            aria-hidden="true"
                                            class="dnb-button__alignment"
                                          >
                                            ‌
                                          </span>
                                        </button>,
                                      }
                                    }
                                    targetSelector={null}
                                    tooltip="submit_button_title"
                                  >
                                    <TooltipPortal
                                      active={null}
                                      align={null}
                                      animatePosition={false}
                                      arrow="center"
                                      attributes={
                                        {
                                          "children": "submit_button_title",
                                          "className": "dnb-tooltip",
                                        }
                                      }
                                      className={null}
                                      fixedPosition={false}
                                      group={null}
                                      hideDelay={500}
                                      id="autocomplete-id-submit-button-tooltip"
                                      internalId="autocomplete-id-submit-button-tooltip"
                                      keepInDOM={true}
                                      noAnimation={false}
                                      position="top"
                                      showDelay={300}
                                      size="basis"
                                      skipPortal={null}
                                      target={
                                        <button
                                          aria-describedby="autocomplete-id-submit-button-tooltip"
                                          aria-expanded="true"
                                          aria-haspopup="listbox"
                                          aria-label="submit_button_title"
                                          class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                          id="autocomplete-id-submit-button"
                                          type="button"
                                        >
                                          <span
                                            aria-hidden="true"
                                            class="dnb-button__alignment"
                                          >
                                            ‌
                                          </span>
                                        </button>
                                      }
                                      targetElement={
                                        <button
                                          aria-describedby="autocomplete-id-submit-button-tooltip"
                                          aria-expanded="true"
                                          aria-haspopup="listbox"
                                          aria-label="submit_button_title"
                                          class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                          id="autocomplete-id-submit-button"
                                          type="button"
                                        >
                                          <span
                                            aria-hidden="true"
                                            class="dnb-button__alignment"
                                          >
                                            ‌
                                          </span>
                                        </button>
                                      }
                                      targetSelector={null}
                                      tooltip="submit_button_title"
                                    >
                                      <Portal
                                        containerInfo={
                                          <div
                                            class="dnb-tooltip__portal dnb-core-style"
                                          >
                                            <span
                                              aria-hidden="true"
                                              class="dnb-tooltip"
                                              role="tooltip"
                                            >
                                              <span
                                                class="dnb-tooltip__arrow dnb-tooltip__arrow__arrow--center dnb-tooltip__arrow__position--top"
                                              />
                                              <span
                                                class="dnb-tooltip__content"
                                                id="autocomplete-id-submit-button-tooltip"
                                              >
                                                submit_button_title
                                              </span>
                                            </span>
                                          </div>
                                        }
                                      >
                                        <TooltipContainer
                                          active={null}
                                          align={null}
                                          animatePosition={false}
                                          arrow="center"
                                          attributes={
                                            {
                                              "children": "submit_button_title",
                                              "className": "dnb-tooltip",
                                            }
                                          }
                                          className={null}
                                          fixedPosition={false}
                                          group={null}
                                          hideDelay={500}
                                          id="autocomplete-id-submit-button-tooltip"
                                          internalId="autocomplete-id-submit-button-tooltip"
                                          keepInDOM={true}
                                          noAnimation={false}
                                          position="top"
                                          showDelay={300}
                                          size="basis"
                                          skipPortal={null}
                                          target={
                                            <button
                                              aria-describedby="autocomplete-id-submit-button-tooltip"
                                              aria-expanded="true"
                                              aria-haspopup="listbox"
                                              aria-label="submit_button_title"
                                              class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                              id="autocomplete-id-submit-button"
                                              type="button"
                                            >
                                              <span
                                                aria-hidden="true"
                                                class="dnb-button__alignment"
                                              >
                                                ‌
                                              </span>
                                            </button>
                                          }
                                          targetElement={
                                            <button
                                              aria-describedby="autocomplete-id-submit-button-tooltip"
                                              aria-expanded="true"
                                              aria-haspopup="listbox"
                                              aria-label="submit_button_title"
                                              class="dnb-button dnb-button--secondary dnb-input__submit-button__button dnb-button--input-button dnb-button--active dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--size-medium"
                                              id="autocomplete-id-submit-button"
                                              type="button"
                                            >
                                              <span
                                                aria-hidden="true"
                                                class="dnb-button__alignment"
                                              >
                                                ‌
                                              </span>
                                            </button>
                                          }
                                          targetSelector={null}
                                          tooltip="submit_button_title"
                                        >
                                          <span
                                            aria-hidden={true}
                                            className="dnb-tooltip"
                                            onMouseDown={[Function]}
                                            onMouseEnter={[Function]}
                                            onMouseLeave={[Function]}
                                            onMouseMove={[Function]}
                                            onTouchStart={[Function]}
                                            role="tooltip"
                                            style={{}}
                                          >
                                            <span
                                              className="dnb-tooltip__arrow dnb-tooltip__arrow__arrow--center dnb-tooltip__arrow__position--top"
                                            />
                                            <span
                                              className="dnb-tooltip__content"
                                              id="autocomplete-id-submit-button-tooltip"
                                            >
                                              submit_button_title
                                            </span>
                                          </span>
                                        </TooltipContainer>
                                      </Portal>
                                    </TooltipPortal>
                                  </TooltipWithEvents>
                                </Tooltip>
                              </Button>
                            </span>
                          </InputSubmitButton>
                        </ForwardRef>
                      </span>
                    </span>
                  </span>
                </span>
              </Input>
              <DrawerList
                action_menu={false}
                align_drawer={null}
                cache_hash={null}
                class={null}
                className="dnb-autocomplete__root drawer_class"
                custom_element={null}
                custom_method={null}
                data={null}
                default_value="default_value"
                direction="bottom"
                disabled="disabled"
                fixed_position={false}
                focusable="focusable"
                handle_dismiss_focus={null}
                id="autocomplete-id"
                ignore_events={null}
                independent_width={false}
                is_popup={false}
                keep_open="keep_open"
                list_class="dnb-autocomplete__list"
                max_height={1}
                no_animation={true}
                no_scroll_animation="no_scroll_animation"
                onMouseDown={[Function]}
                on_change={[Function]}
                on_hide={[Function]}
                on_key_down={[Function]}
                on_pre_change={[Function]}
                on_resize={null}
                on_select={[Function]}
                on_show={null}
                on_state_update={null}
                opened={null}
                options_render={{}}
                portal_class="portal_class"
                prepared_data={null}
                prevent_close="prevent_close"
                prevent_focus={false}
                prevent_selection={null}
                raw_data={null}
                role="listbox"
                scrollable="scrollable"
                size={null}
                skip_keysearch={false}
                skip_portal={true}
                triangle_position={null}
                use_drawer_on_mobile={false}
                value={2}
                wrapper_element={null}
              >
                <DrawerListInstance
                  action_menu={false}
                  align_drawer={null}
                  cache_hash={null}
                  class={null}
                  className="dnb-autocomplete__root drawer_class"
                  custom_element={null}
                  custom_method={null}
                  data={null}
                  default_value="default_value"
                  direction="bottom"
                  disabled="disabled"
                  fixed_position={false}
                  focusable="focusable"
                  handle_dismiss_focus={null}
                  id="autocomplete-id"
                  ignore_events={null}
                  independent_width={false}
                  is_popup={false}
                  keep_open="keep_open"
                  list_class="dnb-autocomplete__list"
                  max_height={1}
                  no_animation={true}
                  no_scroll_animation="no_scroll_animation"
                  onMouseDown={[Function]}
                  on_change={[Function]}
                  on_hide={[Function]}
                  on_key_down={[Function]}
                  on_pre_change={[Function]}
                  on_resize={null}
                  on_select={[Function]}
                  on_show={null}
                  on_state_update={null}
                  opened={null}
                  options_render={{}}
                  portal_class="portal_class"
                  prepared_data={null}
                  prevent_close="prevent_close"
                  prevent_focus={false}
                  prevent_selection={null}
                  raw_data={null}
                  role="listbox"
                  scrollable="scrollable"
                  size={null}
                  skip_keysearch={false}
                  skip_portal={true}
                  triangle_position={null}
                  use_drawer_on_mobile={false}
                  value={2}
                  wrapper_element={null}
                >
                  <span
                    className="dnb-drawer-list__root"
                  >
                    <span
                      className="dnb-drawer-list dnb-drawer-list--bottom dnb-autocomplete__root drawer_class dnb-drawer-list--opened"
                      disabled="disabled"
                      id="autocomplete-id-drawer-list"
                      onMouseDown={[Function]}
                    >
                      <span
                        className="dnb-drawer-list__list dnb-autocomplete__list dnb-drawer-list__list--no-animation"
                        id="autocomplete-id-listbox"
                      >
                        <DrawerList.Options
                          aria-activedescendant="option-autocomplete-id-2"
                          aria-expanded={true}
                          aria-labelledby="autocomplete-id-label"
                          cache_hash="22undefinedundefinedbottom1"
                          class={null}
                          className={null}
                          id="autocomplete-id-ul"
                          role="listbox"
                          showFocusRing={false}
                          style={
                            {
                              "maxHeight": "1rem",
                            }
                          }
                          tabIndex="-1"
                          triangleRef={
                            {
                              "current": <li
                                aria-hidden="true"
                                class="dnb-drawer-list__triangle"
                              />,
                            }
                          }
                        >
                          <ul
                            aria-activedescendant="option-autocomplete-id-2"
                            aria-expanded={true}
                            aria-labelledby="autocomplete-id-label"
                            className="dnb-drawer-list__options"
                            id="autocomplete-id-ul"
                            role="listbox"
                            style={
                              {
                                "maxHeight": "1rem",
                              }
                            }
                            tabIndex="-1"
                          >
                            <Items>
                              <DrawerList.Item
                                active={false}
                                class={null}
                                className="first-of-type"
                                data-item={0}
                                hash="option-autocomplete-id-0-0"
                                id="option-autocomplete-id-0"
                                key="option-autocomplete-id-0-0"
                                onClick={[Function]}
                                onKeyDown={[Function]}
                                on_click={null}
                                role="option"
                                selected={false}
                                value={null}
                              >
                                <li
                                  aria-selected={false}
                                  className="first-of-type dnb-drawer-list__option"
                                  data-item={0}
                                  id="option-autocomplete-id-0"
                                  key="lioption-autocomplete-id-0-0"
                                  onClick={[Function]}
                                  onKeyDown={[Function]}
                                  role="option"
                                  tabIndex="-1"
                                >
                                  <span
                                    className="dnb-drawer-list__option__inner"
                                  >
                                    <ItemContent
                                      hash="option-autocomplete-id-0-0"
                                    >
                                      <span
                                        className="dnb-drawer-list__option__item"
                                      >
                                        AA c
                                      </span>
                                    </ItemContent>
                                  </span>
                                </li>
                              </DrawerList.Item>
                              <DrawerList.Item
                                active={false}
                                class={null}
                                className=""
                                data-item={1}
                                hash="option-autocomplete-id-1-1"
                                id="option-autocomplete-id-1"
                                key="option-autocomplete-id-1-1"
                                onClick={[Function]}
                                onKeyDown={[Function]}
                                on_click={null}
                                role="option"
                                selected={false}
                                value={null}
                              >
                                <li
                                  aria-selected={false}
                                  className="dnb-drawer-list__option"
                                  data-item={1}
                                  id="option-autocomplete-id-1"
                                  key="lioption-autocomplete-id-1-1"
                                  onClick={[Function]}
                                  onKeyDown={[Function]}
                                  role="option"
                                  tabIndex="-1"
                                >
                                  <span
                                    className="dnb-drawer-list__option__inner"
                                  >
                                    <ItemContent
                                      hash="option-autocomplete-id-1-1"
                                    >
                                      <span
                                        className="dnb-drawer-list__option__item"
                                      >
                                        BB cc zethx
                                      </span>
                                    </ItemContent>
                                  </span>
                                </li>
                              </DrawerList.Item>
                              <DrawerList.Item
                                active={true}
                                class={null}
                                className="last-of-type"
                                data-item={2}
                                hash="option-autocomplete-id-2-2"
                                id="option-autocomplete-id-2"
                                key="option-autocomplete-id-2-2"
                                onClick={[Function]}
                                onKeyDown={[Function]}
                                on_click={null}
                                role="option"
                                selected={true}
                                value={null}
                              >
                                <li
                                  aria-current={true}
                                  aria-selected={true}
                                  className="last-of-type dnb-drawer-list__option dnb-drawer-list__option--selected dnb-drawer-list__option--focus"
                                  data-item={2}
                                  id="option-autocomplete-id-2"
                                  key="lioption-autocomplete-id-2-2"
                                  onClick={[Function]}
                                  onKeyDown={[Function]}
                                  role="option"
                                  tabIndex="0"
                                >
                                  <span
                                    className="dnb-drawer-list__option__inner"
                                  >
                                    <ItemContent
                                      hash="option-autocomplete-id-2-2"
                                    >
                                      <span
                                        className="dnb-drawer-list__option__item item-nr-1"
                                        key="option-autocomplete-id-2-20"
                                      >
                                        CC
                                      </span>
                                      <span
                                        className="dnb-drawer-list__option__item item-nr-2"
                                        key="option-autocomplete-id-2-21"
                                      >
                                        cc
                                      </span>
                                    </ItemContent>
                                  </span>
                                </li>
                              </DrawerList.Item>
                            </Items>
                            <li
                              aria-hidden={true}
                              className="dnb-drawer-list__triangle"
                            />
                          </ul>
                        </DrawerList.Options>
                        <OnMounted
                          addObservers={[Function]}
                          removeObservers={[Function]}
                        />
                      </span>
                    </span>
                  </span>
                </DrawerListInstance>
              </DrawerList>
            </span>
            <Suffix
              className="dnb-autocomplete__suffix"
              context={
                {
                  "align_autocomplete": null,
                  "ariaLiveDelay": 1,
                  "aria_live_options": "aria_live_options",
                  "children": "children",
                  "class": "class",
                  "className": "className",
                  "custom_element": {},
                  "custom_method": [Function],
                  "data": [
                    "AA c",
                    "BB cc zethx",
                    {
                      "content": [
                        "CC",
                        "cc",
                      ],
                    },
                  ],
                  "default_value": "default_value",
                  "direction": "bottom",
                  "disable_filter": "disable_filter",
                  "disable_highlighting": "disable_highlighting",
                  "disable_reorder": "disable_reorder",
                  "disabled": "disabled",
                  "drawer_class": "drawer_class",
                  "enable_body_lock": true,
                  "focusable": "focusable",
                  "global_status_id": "main",
                  "icon": "icon",
                  "icon_position": null,
                  "icon_size": "icon_size",
                  "id": "autocomplete-id",
                  "indicator_label": "indicator_label",
                  "input_element": null,
                  "input_icon": "input_icon",
                  "input_ref": null,
                  "input_value": "input_value",
                  "keep_open": "keep_open",
                  "keep_value": "keep_value",
                  "keep_value_and_selection": "keep_value_and_selection",
                  "label": "Autocomplete Label:",
                  "label_direction": "horizontal",
                  "label_sr_only": "label_sr_only",
                  "max_height": 1,
                  "mode": "sync",
                  "no_animation": true,
                  "no_options": "no_options",
                  "no_scroll_animation": "no_scroll_animation",
                  "observer_element": "observer_element",
                  "on_blur": [Function],
                  "on_change": [Function],
                  "on_focus": [Function],
                  "on_hide": [Function],
                  "on_select": [Function],
                  "on_show": [Function],
                  "on_state_update": [Function],
                  "on_type": [Function],
                  "open_on_focus": "open_on_focus",
                  "opened": true,
                  "options_render": {},
                  "page_offset": "page_offset",
                  "placeholder": "placeholder",
                  "portal_class": "portal_class",
                  "prevent_close": "prevent_close",
                  "prevent_selection": null,
                  "scrollable": "scrollable",
                  "search_in_word_index": "search_in_word_index",
                  "search_numbers": "search_numbers",
                  "selected_sr": "selected_sr",
                  "show_all": "show_all",
                  "show_clear_button": "show_clear_button",
                  "show_options_sr": "show_options_sr",
                  "show_submit_button": true,
                  "size": null,
                  "skeleton": "skeleton",
                  "skip_portal": true,
                  "status": "status",
                  "status_no_animation": "status_no_animation",
                  "status_props": null,
                  "status_state": "error",
                  "stretch": "stretch",
                  "submit_button_icon": "submit_button_icon",
                  "submit_button_title": "submit_button_title",
                  "submit_element": "submit_element",
                  "suffix": "suffix",
                  "title": "title",
                  "triangle_position": null,
                  "value": 2,
                }
              }
              id="autocomplete-id-suffix"
            >
              <span
                className="dnb-suffix dnb-autocomplete__suffix dnb-skeleton dnb-skeleton--font"
                id="autocomplete-id-suffix"
              >
                suffix
              </span>
            </Suffix>
          </span>
        </span>
        <span
          aria-live="assertive"
          className="dnb-sr-only"
        />
      </span>
    </AutocompleteInstance>
  </DrawerListProvider>
</Autocomplete>
`;

exports[`Autocomplete scss have to match default theme snapshot 1`] = `
"/*
* Autocomplete theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,
.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover
~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell {
  --border-color: var(--color-sea-green);
  box-shadow: 0 0 0 0.125rem var(--border-color);
  border-color: transparent; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,
    .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover
~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell {
      box-shadow: 0 0 0 0.125rem var(--color-sea-green); } }

.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,
.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover
~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__submit-button__button {
  border-radius: 0;
  color: var(--color-white);
  background-color: var(--color-sea-green);
  box-shadow: none; }

.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
  color: transparent; }

.dnb-autocomplete__shell, .dnb-autocomplete__input {
  border-radius: var(--autocomplete-border-radius); }

.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover
~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell {
  --border-color: var(--color-fire-red);
  box-shadow: 0 0 0 0.125rem var(--border-color);
  border-color: transparent; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover
~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell {
      box-shadow: 0 0 0 0.125rem var(--color-fire-red); } }

.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
  font-weight: var(--font-weight-basis); }

.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
  color: var(--color-black-55); }

.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
  font-weight: var(--font-weight-bold); }

.dnb-autocomplete__root
.dnb-drawer-list__option--selected
.dnb-drawer-list__option__item:nth-of-type(n + 2) {
  color: var(--color-white); }

.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
  color: var(--color-white); }
"
`;

exports[`Autocomplete scss have to match snapshot 1`] = `
"/*
* DNB Autocomplete
*
*/
/**
 * This file is only used to make components independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
/*
 * Scopes
 *
 */
/*
 * Document Reset
 *
 */
/*
* DNB Input
*
*/
/*
* DNB Button
*
*/
/*
* DNB icon
*
*/
/*
* Icon component
*
*/
.dnb-icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1rem;
  color: inherit;
  width: 1em;
  height: 1em; }
  .dnb-icon img,
  .dnb-icon svg {
    width: inherit;
    height: inherit;
    shape-rendering: geometricPrecision;
    vertical-align: top; }
  .dnb-icon svg[width='100%'] {
    width: inherit; }
  .dnb-icon svg[height='100%'] {
    height: inherit; }
  .dnb-icon--inherit-color svg:not([fill]),
  .dnb-icon--inherit-color svg [fill] {
    fill: currentColor; }
  .dnb-icon--inherit-color svg [stroke] {
    stroke: currentColor; }
  .dnb-icon--small {
    font-size: 0.75rem; }
  .dnb-icon--default {
    font-size: 1rem; }
  .dnb-icon--medium {
    font-size: 1.5rem; }
  .dnb-icon--large {
    font-size: 2rem; }
  .dnb-icon--x-large {
    font-size: 2.5rem; }
  .dnb-icon--xx-large {
    font-size: 3rem; }
  .dnb-icon--custom-size {
    width: auto;
    height: auto; }
  .dnb-icon--auto {
    font-size: 1em; }
  .dnb-icon--auto > .dnb-icon--wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  h1 .dnb-icon,
  h2 .dnb-icon,
  h3 .dnb-icon,
  h4 .dnb-icon,
  h5 .dnb-icon,
  h6 .dnb-icon {
    vertical-align: middle; }
  .dnb-icon.dnb-skeleton {
    color: var(--skeleton-color) !important; }
    .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
      content: none !important; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-icon {
      flex: none; } }

/*
* DNB Tooltip
*
*/
.dnb-tooltip {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-tooltip *,
  .dnb-tooltip ::before,
  .dnb-tooltip ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-tooltip ::before,
  .dnb-tooltip ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Tooltip component
*
*/
.dnb-tooltip {
  position: absolute;
  z-index: 3100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--easing-default); }
  .dnb-tooltip--large {
    padding: 0.25rem 1rem; }
  .dnb-tooltip--animate_position {
    transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); }
  .dnb-tooltip--active {
    visibility: visible;
    /*
      because of the first "show" we also use animation
      also, use forwards because of the usage of visibility
    */
    animation: show-tooltip 200ms var(--easing-default) forwards; }
  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
    animation: show-tooltip 1ms var(--easing-default) forwards; }
  .dnb-tooltip--hide {
    visibility: visible;
    animation: hide-tooltip 200ms var(--easing-default) forwards; }
  .dnb-tooltip--hide.dnb-tooltip--no-animation {
    animation: hide-tooltip 1ms linear forwards; }
  .dnb-tooltip--fixed {
    position: fixed; }
  html[data-visual-test] .dnb-tooltip--hide {
    animation: hide-tooltip 1ms linear 1s forwards; }
  .dnb-tooltip__portal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0; }
  .dnb-tooltip__content {
    min-width: 2rem;
    min-height: 1.5rem;
    padding: 0; }
  .dnb-tooltip__arrow {
    position: absolute;
    pointer-events: none;
    margin: 0;
    width: 1rem;
    height: 0.5rem;
    overflow: hidden; }
    .dnb-tooltip__arrow::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 1rem;
      height: 1rem;
      transform: translateY(70%) rotate(45deg); }
    .dnb-tooltip__arrow__position--bottom {
      top: -0.5rem; }
    .dnb-tooltip__arrow__position--top {
      bottom: -0.5rem;
      transform: rotate(180deg); }
    .dnb-tooltip__arrow__position--left {
      right: -0.75rem;
      margin-right: 3px;
      transform: rotate(90deg); }
    .dnb-tooltip__arrow__position--right {
      left: -0.75rem;
      margin-left: 3px;
      transform: rotate(270deg); }
    .dnb-tooltip__arrow__arrow--left {
      align-self: flex-start; }
    .dnb-tooltip__arrow__arrow--right {
      align-self: flex-end; }

@keyframes show-tooltip {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes hide-tooltip {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    visibility: hidden; } }

/*
* DNB FormStatus
*
*/
.dnb-form-status {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-form-status *,
  .dnb-form-status ::before,
  .dnb-form-status ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-form-status ::before,
  .dnb-form-status ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * FormStatus component
 *
 */
:root {
  --form-status-radius: 0.25rem; }

.dnb-form-status {
  display: flex;
  opacity: 1;
  transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default); }
  .dnb-form-status--hidden {
    will-change: height, opacity, margin, padding;
    width: 0;
    height: 0;
    opacity: 0; }
  .dnb-form-status--is-animating {
    overflow: hidden;
    width: auto; }
  .dnb-form-status--disappear, .dnb-form-status--hidden {
    margin: 0 !important;
    padding: 0 !important; }
  .dnb-form-status__shell {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: inherit;
    border-radius: var(--form-status-radius); }
  .dnb-form-status__text {
    padding: 0.625rem 1rem;
    cursor: text;
    color: inherit;
    line-height: var(--line-height-small);
    font-size: var(--font-size-small);
    white-space: normal; }
    button .dnb-form-status__text {
      cursor: inherit; }
    .dnb-form-status__text .dnb-anchor {
      font-size: inherit; }
  .dnb-icon + .dnb-form-status__text {
    padding-left: 0.5rem; }
  .dnb-form-status__shell > .dnb-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.3333333em 0.3333333em 0.3333333em 0.6666666em; }
  .dnb-form-status__size--large .dnb-form-status__text {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem; }
  .dnb-form-status__size--large .dnb-form-status__shell > .dnb-icon {
    margin-top: 0.6666666em;
    margin-bottom: 0.6666666em; }
  .dnb-form-status--stretch {
    flex-grow: 1; }
  .dnb-form-status--stretch .dnb-form-status__shell {
    width: 100%; }
  .dnb-form-status--stretch .dnb-form-status__text {
    max-width: 47rem; }
  .dnb-form-status[hidden] {
    display: none; }
  .dnb-form-status--no-animation,
  html[data-visual-test] .dnb-form-status {
    transition-duration: 1ms !important; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-form-status__shell > .dnb-icon {
      border-width: 1px; } }

.dnb-button {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-button *,
  .dnb-button ::before,
  .dnb-button ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-button ::before,
  .dnb-button ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Button component
*
*/
:root {
  --button-font-size: var(--font-size-basis);
  --button-font-size-small: var(--font-size-small);
  --button-width: 2.5rem;
  --button-height: 2.5rem;
  --button-width--small: 1.5rem;
  --button-height--small: 1.5rem;
  --button-width--medium: 2rem;
  --button-height--medium: 2rem;
  --button-width--large: 3rem;
  --button-height--large: 3rem;
  --button-icon-size: 1rem;
  --button-border-width: 0.0625rem;
  --button-border-width--hover: 0.1875rem;
  --button-border-radius: calc(var(--button-height) / 2);
  --button-border-radius--small: calc(var(--button-height--small) / 2);
  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
  --button-border-radius--large: calc(var(--button-height--large) / 2); }

.dnb-button {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  height: auto;
  padding: 0;
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-border-radius);
  text-decoration: none;
  font-size: var(--font-size-small);
  /* stylelint-disable-next-line */ }
  .dnb-button--wrap {
    overflow-wrap: break-word;
    white-space: normal; }
  .dnb-button,
  .dnb-core-style .dnb-button {
    line-height: var(--button-height); }
  .dnb-button__text {
    margin: 0.5rem 0;
    font-size: var(--button-font-size);
    line-height: var(--line-height-basis);
    color: inherit;
    transform: translateY(-0.03125rem); }
    .dnb-button__text [data-os='linux'] {
      transform: translateY(-0.035rem); }
  .dnb-button__alignment {
    display: inline-block;
    width: 0; }
  .dnb-button__bounding {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transform: scale(1.1, 1.4);
    background-color: transparent;
    border-radius: var(--button-border-radius); }
  .dnb-button--has-text {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }
  .dnb-button--size-small {
    width: var(--button-width--small);
    font-size: var(--button-font-size-small);
    border-radius: var(--button-border-radius--small); }
    .dnb-button--size-small,
    .dnb-core-style .dnb-button--size-small {
      line-height: var(--button-height--small); }
  .dnb-button--size-small .dnb-button__text {
    margin: 0; }
  .dnb-button--has-text.dnb-button--size-small {
    padding-left: 1rem;
    padding-right: 1rem; }
  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small {
    padding-left: 0.5rem; }
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
    padding-right: 0.5rem; }
  .dnb-button--size-medium {
    width: var(--button-width--medium);
    border-radius: var(--button-border-radius--medium); }
    .dnb-button--size-medium,
    .dnb-core-style .dnb-button--size-medium {
      line-height: var(--button-height--medium); }
  .dnb-button--size-medium .dnb-button__text {
    margin: 0; }
  .dnb-button--has-text.dnb-button--size-medium {
    padding-left: 1rem;
    padding-right: 1rem; }
  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
    padding-left: 0.5rem; }
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
    padding-right: 0.5rem; }
  .dnb-button--size-large {
    width: var(--button-width--large);
    border-radius: var(--button-border-radius--large); }
    .dnb-button--size-large,
    .dnb-core-style .dnb-button--size-large {
      line-height: var(--button-height--large); }
  .dnb-button--has-text.dnb-button--size-large {
    padding-left: 2rem;
    padding-right: 2rem; }
  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large {
    padding-left: 1rem; }
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
    padding-right: 1rem; }
  .dnb-button--has-text {
    width: auto; }
  .dnb-button--has-text .dnb-button__icon {
    margin: 0 calc(var(--button-icon-size) / 2); }
  .dnb-button--has-text.dnb-button--icon-position-left {
    padding-left: 0.5rem; }
  .dnb-button--has-text.dnb-button--icon-position-right {
    padding-right: 0.5rem; }
  .dnb-button--has-text.dnb-button--has-icon .dnb-button__icon {
    order: 2; }
  .dnb-button--has-text.dnb-button--has-icon .dnb-button__text {
    order: 1; }
  .dnb-button:not(.dnb-button--has-text) .dnb-button__icon {
    width: inherit; }
  .dnb-button__icon.dnb-icon svg:not([width]):not([height]) {
    width: var(--button-icon-size);
    height: var(--button-icon-size); }
  [href] > .dnb-button__icon.dnb-icon {
    line-height: var(--button-font-size); }
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
    order: 1; }
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *,
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *,
  .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
    order: 2; }
  .dnb-button--stretch {
    width: 100%; }
  .dnb-button--reset {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: visible;
    border: none;
    border-radius: 0;
    background-color: transparent;
    appearance: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    line-height: inherit; }
    html:not([data-whatintent='touch']) .dnb-button--reset:hover[disabled] {
      cursor: not-allowed; }
    html:not([data-whatintent='touch']) .dnb-button--reset:hover:not([disabled]) {
      box-shadow: none;
      border: none; }
    .dnb-button--reset:not([disabled]):focus, .dnb-button--reset:not([disabled]):active {
      outline: none; }
      html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
        --border-color: var(--color-emerald-green);
        box-shadow: 0 0 0 0.125rem var(--border-color);
        border-color: transparent; }
        @media screen and (-ms-high-contrast: none) {
          html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):focus, html[data-whatinput='keyboard'] .dnb-button--reset:not([disabled]):active {
            box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
    html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):focus,
    html[data-whatinput='mouse'] .dnb-button--reset:not([disabled]):active {
      box-shadow: none;
      color: inherit;
      border: none; }
  .dnb-button[type='button'], .dnb-button[type='reset'], .dnb-button[type='submit'] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none; }
  .dnb-button[disabled] {
    cursor: not-allowed;
    outline: none; }
  .dnb-form-row--vertical .dnb-form-row__content > .dnb-button {
    align-self: flex-start; }
  .dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text {
    white-space: nowrap; }
  .dnb-button + .dnb-form-status {
    margin-top: 0.5rem; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-button {
      flex: none; }
      .dnb-button__icon, .dnb-button__text {
        transform: translateY(-0.0625rem); } }

/* Firefox includes a hidden border which messes up button dimensions */
button.dnb-button::-moz-focus-inner {
  border: none; }

/*
* DNB FormLabel
*
*/
.dnb-form-label {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-form-label *,
  .dnb-form-label ::before,
  .dnb-form-label ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-form-label ::before,
  .dnb-form-label ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * FormLabel component
 *
 */
.dnb-form-label {
  display: inline-block;
  width: auto;
  padding: 0;
  margin-right: 1rem;
  text-align: left;
  vertical-align: baseline;
  white-space: pre-wrap;
  word-break: normal;
  font-size: var(--font-size-basis);
  color: inherit; }
  .dnb-form-label--vertical {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem; }
  .dnb-form-label--sr-only {
    width: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important; }
  .dnb-form-label[for]:not([disabled]) {
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer; }
  .dnb-form-label[disabled] {
    cursor: not-allowed; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-form-label {
      max-width: 60vw; } }

legend.dnb-form-label {
  display: inline-block; }

.dnb-input {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-input *,
  .dnb-input ::before,
  .dnb-input ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-input ::before,
  .dnb-input ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Input component
*
*/
:root {
  --input-font-size: var(--font-size-basis);
  --input-font-size--small: var(--font-size-basis);
  --input-font-size--medium: var(--font-size-basis);
  --input-font-size--large: var(--font-size-medium);
  --input-padding: 1rem;
  --input-padding--small: 1rem;
  --input-padding--medium: 1rem;
  --input-padding--large: 1rem;
  --input-height: 2rem;
  --input-height--small: 1.5rem;
  --input-height--medium: 2.5rem;
  --input-height--large: 3rem;
  --input-border-width: 0.0625rem;
  --input-border-radius: 0.25rem; }

.dnb-input {
  display: inline-flex;
  align-items: center;
  font-size: var(--input-font-small);
  line-height: var(--input-height);
  text-align: left; }
  .dnb-input__inner {
    display: inline-flex;
    flex-direction: column;
    width: auto; }
  .dnb-input__shell {
    position: relative;
    display: flex;
    align-items: center;
    border: var(--input-border-width) solid var(--color-sea-green); }
  .dnb-input__input {
    border: none;
    outline: none;
    word-break: normal;
    position: relative;
    z-index: 2; }
  .dnb-input__input[disabled] {
    user-select: none;
    -webkit-user-select: none;
    opacity: 1; }
  .dnb-input__shell, .dnb-input__input {
    height: var(--input-height);
    border-radius: var(--input-border-radius); }
  .dnb-input__placeholder, .dnb-input__input {
    width: 100%;
    padding-left: var(--input-padding);
    padding-right: var(--input-padding); }
  .dnb-input__placeholder, .dnb-input__input,
  .dnb-input input.dnb-input__input {
    padding-top: 0;
    padding-bottom: 0;
    color: inherit;
    background-color: transparent;
    font-size: var(--input-font-size);
    line-height: inherit; }
  .dnb-input__placeholder {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .dnb-input input.dnb-input__input[type='file'] {
    line-height: calc(var(--input-height) - 2px); }
  .dnb-input__input::-webkit-search-cancel-button {
    display: none; }
  .dnb-input__input::-ms-clear {
    display: none; }
  .dnb-input ::-webkit-file-upload-button {
    cursor: pointer;
    outline: none;
    color: var(--color-sea-green); }
    .dnb-input ::-webkit-file-upload-button:active, .dnb-input ::-webkit-file-upload-button:hover {
      color: var(--color-emerald-green); }
  .dnb-input--has-submit-element .dnb-input__placeholder,
  .dnb-input--has-submit-element .dnb-input__input,
  .dnb-input--has-clear-button .dnb-input__placeholder,
  .dnb-input--has-clear-button .dnb-input__input {
    padding-right: calc(var(--input-padding) * 2.5); }
  .dnb-input--password .dnb-input__placeholder,
  .dnb-input--password .dnb-input__input {
    margin-right: 2.5rem;
    padding-right: 0; }
    .dnb-input--password .dnb-input__placeholder::-ms-clear,
    .dnb-input--password .dnb-input__input::-ms-clear {
      display: none; }
  .dnb-input--password .dnb-input__placeholder {
    padding-right: 4rem; }
  .dnb-input--password .dnb-input__input {
    font-family: var(--font-family-monospace); }
  .dnb-input__row {
    display: inline-flex;
    align-items: center; }
  .dnb-input__suffix {
    color: inherit; }
  .dnb-input__submit-element {
    z-index: 3;
    margin-left: calc(1px - 1px - var(--input-height));
    line-height: var(--line-height-basis); }
  .dnb-input__submit-button {
    position: relative;
    align-self: center;
    /* IE needs this to stay centered */ }
    .dnb-input__submit-button__button {
      border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0; }
  .dnb-input > .dnb-form-label {
    line-height: var(--line-height-basis); }
  @media screen and (max-width: 40em) {
    .dnb-input {
      flex-wrap: wrap; }
      .dnb-input > .dnb-form-label {
        margin-bottom: 0.5rem;
        margin-top: 0.5rem; } }
  .dnb-input:not(.dnb-input--vertical)[class*='__status'] {
    align-items: flex-start; }
    .dnb-input:not(.dnb-input--vertical)[class*='__status'] > .dnb-form-label {
      margin-top: 0.25rem; }
  .dnb-input--small {
    line-height: var(--input-height--small); }
    .dnb-input--small .dnb-input__shell,
    .dnb-input--small .dnb-input__input {
      height: var(--input-height--small); }
    .dnb-input--small .dnb-input__placeholder,
    .dnb-input--small .dnb-input__input {
      padding-left: var(--input-padding--small);
      padding-right: var(--input-padding--small);
      font-size: var(--input-font-size--small); }
    .dnb-input--small .dnb-input__submit-element {
      margin-left: calc(1px - 1px - var(--input-height--small)); }
      .dnb-input--small .dnb-input__submit-element .dnb-button--input-button {
        width: var(--input-height--small);
        height: var(--input-height--small);
        line-height: var(--input-height--small); }
  .dnb-input--small.dnb-input--has-submit-element .dnb-input__placeholder,
  .dnb-input--small.dnb-input--has-submit-element .dnb-input__input,
  .dnb-input--small.dnb-input--has-clear-button .dnb-input__placeholder,
  .dnb-input--small.dnb-input--has-clear-button .dnb-input__input {
    padding-right: calc(var(--input-padding--small) * 2); }
  .dnb-input--medium {
    line-height: var(--input-height--medium); }
    .dnb-input--medium .dnb-input__shell,
    .dnb-input--medium .dnb-input__input {
      height: var(--input-height--medium); }
    .dnb-input--medium .dnb-input__placeholder,
    .dnb-input--medium .dnb-input__input {
      padding-left: var(--input-padding--medium);
      padding-right: var(--input-padding--medium);
      font-size: var(--input-font-size--medium); }
    .dnb-input--medium .dnb-input__submit-element {
      margin-left: calc(1px - 1px - var(--input-height--medium)); }
      .dnb-input--medium .dnb-input__submit-element .dnb-button--input-button {
        width: var(--input-height--medium);
        height: var(--input-height--medium);
        line-height: var(--input-height--medium); }
  .dnb-input--medium.dnb-input--has-submit-element .dnb-input__placeholder,
  .dnb-input--medium.dnb-input--has-submit-element .dnb-input__input,
  .dnb-input--medium.dnb-input--has-clear-button .dnb-input__placeholder,
  .dnb-input--medium.dnb-input--has-clear-button .dnb-input__input {
    padding-right: calc(var(--input-padding--medium) * 3); }
  .dnb-input--large {
    line-height: var(--input-height--large); }
    .dnb-input--large .dnb-input__shell,
    .dnb-input--large .dnb-input__input {
      height: var(--input-height--large); }
    .dnb-input--large .dnb-input__placeholder,
    .dnb-input--large .dnb-input__input {
      padding-left: var(--input-padding--large);
      padding-right: var(--input-padding--large);
      font-size: var(--input-font-size--large); }
    .dnb-input--large .dnb-input__submit-element {
      margin-left: calc(1px - 1px - var(--input-height--large)); }
      .dnb-input--large .dnb-input__submit-element .dnb-button--input-button {
        width: var(--input-height--large);
        height: var(--input-height--large); }
  .dnb-input--large.dnb-input--has-submit-element .dnb-input__placeholder,
  .dnb-input--large.dnb-input--has-submit-element .dnb-input__input,
  .dnb-input--large.dnb-input--has-clear-button .dnb-input__placeholder,
  .dnb-input--large.dnb-input--has-clear-button .dnb-input__input {
    padding-right: calc(var(--input-padding--large) * 3); }
  .dnb-input--large.dnb-input--has-clear-button:not(.dnb-input--has-submit-element) .dnb-input__submit-element {
    margin-left: calc(1px - 1px - var(--input-height--large) + 0.5rem); }
  .dnb-input__align--center .dnb-input__placeholder,
  .dnb-input__align--center .dnb-input__input {
    text-align: center; }
  .dnb-input__align--right .dnb-input__placeholder,
  .dnb-input__align--right .dnb-input__input {
    text-align: right; }
  .dnb-input--clear.dnb-input__submit-element {
    opacity: 0;
    transition: opacity 200ms ease-in-out; }
    .dnb-input--clear.dnb-input__submit-element .dnb-button {
      width: var(--input-height--small);
      height: var(--input-height--small);
      border-radius: var(--button-border-radius); }
      .dnb-input--clear.dnb-input__submit-element .dnb-button .dnb-button__icon {
        margin: auto; }
      html:not([data-whatintent='touch'])
.dnb-input--clear.dnb-input__submit-element .dnb-button:not(.dnb-button--has-text):hover[disabled] {
        cursor: default; }
  .dnb-input--small .dnb-input--clear.dnb-input__submit-element .dnb-button {
    width: 1rem;
    height: 1rem; }
  .dnb-input--medium .dnb-input--clear.dnb-input__submit-element .dnb-button,
  .dnb-input--large .dnb-input--clear.dnb-input__submit-element .dnb-button {
    width: var(--input-height--small);
    height: var(--input-height--small); }
  .dnb-input[data-has-content='true'] .dnb-input--clear {
    opacity: 1; }
  .dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
    margin-right: 2.5rem; }
  .dnb-input--small.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
    margin-right: 2rem; }
  .dnb-input--medium.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
    margin-right: 3rem; }
  .dnb-input--large.dnb-input--has-submit-element .dnb-input--clear.dnb-input__submit-element {
    margin-right: 3.5rem; }
  .dnb-input__inner > .dnb-form-status {
    order: 2;
    margin-top: 0.5rem; }
  .dnb-input--vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
  .dnb-input--stretch {
    display: flex;
    flex-grow: 1; }
  .dnb-input--stretch .dnb-input__inner {
    flex-grow: 1; }
  .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell {
    width: 100%; }
  .dnb-input--stretch .dnb-form-label + .dnb-input__inner {
    width: auto; }
  .dnb-input--vertical.dnb-input--stretch .dnb-input__inner {
    width: 100%; }
  .dnb-form-row--horizontal .dnb-input--stretch {
    width: 100%; }
  .dnb-input__icon {
    order: 0;
    position: absolute;
    left: 1rem;
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto; }
  .dnb-input--icon-position-right .dnb-input__icon {
    order: 1;
    left: auto;
    right: 1rem; }
  .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,
  .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
    padding-left: 2.5rem; }
  .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
  .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
    padding-right: 2.5rem; }
  .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,
  .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
    padding-left: 3rem; }
  .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
  .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
    padding-right: 3rem; }
  html[data-visual-test] .dnb-input__input {
    caret-color: var(--color-white); }
  @media screen and (max-width: 40em) {
    .dnb-responsive-component .dnb-input {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 0.5rem; }
      .dnb-responsive-component .dnb-input__row {
        align-items: flex-start; }
      .dnb-responsive-component .dnb-input > .dnb-form-label {
        margin-bottom: 0.5rem; } }
  @media screen and (-ms-high-contrast: none) {
    .dnb-input {
      vertical-align: baseline; }
      .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) {
        flex: none; }
      .dnb-input__inner {
        width: 100%; }
      .dnb-input__input, .dnb-input__placeholder {
        transform: translateY(-0.0625rem); } }

/*
* DNB Dropdown
*
*/
.dnb-dropdown {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-dropdown *,
  .dnb-dropdown ::before,
  .dnb-dropdown ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-dropdown ::before,
  .dnb-dropdown ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Dropdown component
*
*/
:root {
  --dropdown-width: 16rem;
  --dropdown-height: 2rem;
  --dropdown-height--small: 1.5rem;
  --dropdown-height--medium: 2.5rem;
  --dropdown-height--large: 3rem;
  --dropdown-padding-horizontal: 1rem;
  --dropdown-focus-border-width: 0.125rem;
  --dropdown-text-padding: 0.5rem;
  --dropdown-border-radius: 0.25rem; }

.dnb-dropdown {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-small);
  line-height: var(--dropdown-height); }
  .dnb-dropdown__inner {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: auto;
    color: inherit; }
  .dnb-dropdown__shell {
    position: relative;
    width: var(--dropdown-width);
    height: var(--dropdown-height);
    margin: 0;
    padding: 0;
    color: inherit; }
  .dnb-dropdown__row {
    display: inline-flex; }
  .dnb-dropdown--large .dnb-drawer-list__triangle {
    margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); }
  .dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle {
    margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); }
  .dnb-dropdown__icon {
    position: relative;
    order: 2;
    display: inline-flex;
    justify-content: center;
    pointer-events: none; }
  .dnb-dropdown__trigger {
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    width: 100%; }
    .dnb-dropdown__trigger.dnb-button {
      padding: 0 1rem;
      border-radius: var(--dropdown-border-radius); }
  .dnb-dropdown--is-popup .dnb-dropdown__trigger.dnb-button {
    padding: 0;
    border-radius: 50%; }
  .dnb-dropdown__text {
    order: 1;
    position: relative;
    z-index: 4;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    line-height: inherit;
    font-size: var(--font-size-basis); }
    .dnb-dropdown__text__inner {
      display: inherit;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: inherit; }
  .dnb-dropdown--icon-position-left .dnb-dropdown__text {
    order: 2;
    padding-right: 0;
    padding-left: var(--dropdown-text-padding); }
  .dnb-dropdown--icon-position-left .dnb-dropdown__icon {
    order: 1; }
  .dnb-dropdown--icon-position-right .dnb-dropdown__text {
    padding-right: var(--dropdown-text-padding); }
  .dnb-dropdown--independent-width .dnb-dropdown__shell {
    width: auto; }
  @media screen and (max-width: 40em) {
    .dnb-dropdown--action-menu .dnb-dropdown__trigger.dnb-button {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      border-radius: 50%; } }
  @media screen and (min-width: 40em) {
    .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text {
      padding: 0 0.5rem; } }
  @media screen and (max-width: 40em) {
    .dnb-dropdown--action-menu .dnb-dropdown__shell .dnb-dropdown__text {
      width: 0;
      padding: 0; } }
  .dnb-dropdown--icon-position-left .dnb-button--tertiary
~ .dnb-drawer-list__root--portal {
    left: -0.5rem; }
  .dnb-dropdown--icon-position-right .dnb-button--tertiary
~ .dnb-drawer-list__root--portal {
    left: 0.5rem; }
  .dnb-dropdown .dnb-button--tertiary.dnb-button--active {
    box-shadow: none; }
  .dnb-dropdown .dnb-button--tertiary .dnb-button__text {
    margin: 0 0.5rem; }
    .dnb-dropdown .dnb-button--tertiary .dnb-button__text::after {
      bottom: 0; }
  .dnb-dropdown--icon-position-left .dnb-button--tertiary .dnb-dropdown__text,
  .dnb-dropdown--icon-position-right .dnb-button--tertiary .dnb-dropdown__text {
    padding: 0; }
  .dnb-dropdown .dnb-button--tertiary:focus::before {
    left: 0 !important;
    right: 0 !important; }
  .dnb-dropdown--default.dnb-dropdown--is-popup .dnb-dropdown__shell,
  .dnb-dropdown--is-popup .dnb-dropdown__trigger {
    padding: 0;
    width: var(--dropdown-height);
    height: var(--dropdown-height); }
  .dnb-dropdown--is-popup .dnb-dropdown__icon {
    width: 100%; }
  .dnb-dropdown--is-popup.dnb-dropdown--scroll .dnb-dropdown__options {
    min-height: 1rem; }
  .dnb-dropdown--is-popup .dnb-drawer-list__root {
    width: var(--dropdown-width); }
  .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__shell,
  .dnb-dropdown--small.dnb-dropdown--is-popup .dnb-dropdown__trigger {
    width: var(--dropdown-height--small); }
  .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__shell,
  .dnb-dropdown--medium.dnb-dropdown--is-popup .dnb-dropdown__trigger {
    width: var(--dropdown-height--medium); }
  .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__shell,
  .dnb-dropdown--large.dnb-dropdown--is-popup .dnb-dropdown__trigger {
    width: var(--dropdown-height--large); }
  .dnb-dropdown--small .dnb-dropdown__shell,
  .dnb-dropdown--small .dnb-dropdown__trigger {
    height: var(--dropdown-height--small); }
  .dnb-dropdown--small,
  .dnb-dropdown--small .dnb-dropdown__trigger.dnb-button {
    line-height: var(--dropdown-height--small); }
  .dnb-dropdown--medium .dnb-dropdown__shell,
  .dnb-dropdown--medium .dnb-dropdown__trigger {
    height: var(--dropdown-height--medium); }
  .dnb-dropdown--medium,
  .dnb-dropdown--medium .dnb-dropdown__trigger.dnb-button {
    line-height: var(--dropdown-height--medium); }
  .dnb-dropdown--large .dnb-dropdown__shell,
  .dnb-dropdown--large .dnb-dropdown__trigger {
    height: var(--dropdown-height--large); }
  .dnb-dropdown--large,
  .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button {
    line-height: var(--dropdown-height--large); }
  .dnb-dropdown--large .dnb-dropdown__trigger.dnb-button .dnb-dropdown__text {
    line-height: var(--line-height-basis); }
  .dnb-dropdown > .dnb-form-label {
    margin-right: 1rem;
    line-height: var(--line-height-basis); }
  @media screen and (max-width: 40em) {
    .dnb-dropdown {
      flex-wrap: wrap; }
      .dnb-dropdown > .dnb-form-label {
        margin-bottom: 0.5rem;
        margin-top: 0.5rem; } }
  .dnb-dropdown--stretch {
    display: flex;
    flex-grow: 1; }
  .dnb-dropdown--stretch .dnb-dropdown__inner {
    flex-grow: 1; }
  .dnb-dropdown--stretch .dnb-dropdown__row, .dnb-dropdown--stretch .dnb-dropdown__inner, .dnb-dropdown--stretch .dnb-dropdown__shell {
    width: 100%; }
  .dnb-dropdown--stretch .dnb-form-label + .dnb-dropdown__inner {
    width: auto; }
  .dnb-dropdown--vertical.dnb-dropdown--stretch .dnb-dropdown__inner {
    width: 100%; }
  .dnb-form-row--horizontal .dnb-dropdown--stretch {
    width: 100%; }
  label + .dnb-dropdown[class*='__form-status'] {
    vertical-align: top; }
    label + .dnb-dropdown[class*='__form-status'] .dnb-dropdown__shell {
      top: -0.375rem; }
  .dnb-dropdown__inner > .dnb-form-status {
    order: 2;
    margin-top: 0.5rem; }
  .dnb-dropdown--vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
  .dnb-dropdown:not(.dnb-dropdown--vertical)[class*='__status'] {
    align-items: flex-start; }
    .dnb-dropdown:not(.dnb-dropdown--vertical)[class*='__status'] > .dnb-form-label {
      margin-top: 0.25rem; }
  @media screen and (max-width: 40em) {
    .dnb-responsive-component .dnb-dropdown {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 0.5rem; }
      .dnb-responsive-component .dnb-dropdown > .dnb-form-label {
        margin-bottom: 0.5rem; }
      .dnb-responsive-component .dnb-dropdown__helper {
        display: none; } }
  @media screen and (-ms-high-contrast: none) {
    .dnb-dropdown {
      flex: none;
      vertical-align: baseline; }
      .dnb-dropdown__shell {
        top: 0; }
      .dnb-dropdown__options {
        display: block; } }

/*
* DNB ProgressIndicator
*
*/
.dnb-progress-indicator {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-progress-indicator *,
  .dnb-progress-indicator ::before,
  .dnb-progress-indicator ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-progress-indicator ::before,
  .dnb-progress-indicator ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
 * ProgressIndicator component
 *
 */
:root {
  --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
  --progress-indicator-circular-circle: 88;
  --progress-indicator-circular-circle-offset--min: 88;
  --progress-indicator-circular-circle-offset--max: 1; }

.dnb-progress-indicator {
  position: relative;
  display: inline-flex;
  align-items: center; }
  .dnb-progress-indicator--vertical {
    flex-direction: column; }
  .dnb-progress-indicator--horizontal {
    justify-content: center; }
  .dnb-progress-indicator__label {
    display: inline-flex; }
    .dnb-progress-indicator__label .dnb-p {
      align-self: center; }
  .dnb-spacing .dnb-progress-indicator .dnb-p,
  .dnb-spacing .dnb-progress-indicator .dnb-p:not([class*='dnb-space']) {
    margin: 0; }
  .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
    margin: 0 1rem; }
  .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
    margin-top: 0.5rem; }
  .dnb-progress-indicator__circular {
    position: relative;
    width: 2rem;
    height: 2rem;
    transform: rotate(-90deg); }
    .dnb-progress-indicator__circular svg {
      position: absolute;
      width: 100%;
      height: 100%; }
    .dnb-progress-indicator__circular__line {
      animation-duration: 2s;
      animation-delay: 200ms;
      animation-timing-function: var(--progress-indicator-timing);
      animation-iteration-count: infinite; }
    .dnb-progress-indicator__circular__line.background {
      stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); }
    .dnb-progress-indicator__circular__line.light {
      animation-name: progress-indicator-circular-line-light;
      stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle);
      stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); }
    .dnb-progress-indicator__circular__line.dark {
      animation-name: progress-indicator-circular-line-dark;
      stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle);
      stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
    .dnb-progress-indicator__circular__line.paused {
      animation-play-state: paused; }
    .dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark {
      transition: stroke-dashoffset 600ms var(--progress-indicator-timing); }
    .dnb-progress-indicator__circular__circle {
      stroke-linecap: round; }
    .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
      stroke: grey; }
    .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
      stroke: var(--color-black); }
  .dnb-progress-indicator__linear {
    position: relative;
    overflow: hidden;
    width: 100%;
    will-change: transform;
    height: 0.5rem;
    border-radius: 0.25rem; }
    .dnb-progress-indicator__linear__bar {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      transform-origin: left;
      border-radius: inherit; }
    .dnb-progress-indicator__linear__bar-transition {
      transition: transform 0.2s linear; }
    .dnb-progress-indicator__linear__bar1-animation {
      width: auto;
      animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .dnb-progress-indicator__linear__bar2-animation {
      width: auto;
      animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; }
  .dnb-progress-indicator, .dnb-progress-indicator--visible {
    opacity: 0;
    animation: progress-indicator-fade-in 200ms ease-out 1 forwards; }
  .dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible) {
    animation: progress-indicator-fade-out 600ms ease-out 1 forwards; }
  .dnb-progress-indicator--no-animation {
    animation-duration: 0ms; }
  html[data-visual-test] .dnb-progress-indicator__circular__line {
    animation-duration: 0ms;
    animation-iteration-count: 0; }
  html[data-visual-test] .dnb-progress-indicator__bar-transition {
    transition: none; }
  .dnb-progress-indicator--full-width {
    width: 100%;
    min-width: 1rem; }

@keyframes progress-indicator-fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes progress-indicator-fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes progress-indicator-circular-line-light {
  0% {
    stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
  50% {
    stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
  100% {
    stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } }

@keyframes progress-indicator-circular-line-dark {
  0% {
    stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
  50% {
    stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); }
  100% {
    stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } }

@keyframes progress-indicator-linear-bar-1 {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; } }

@keyframes progress-indicator-linear-bar-2 {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; } }

.dnb-autocomplete {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-autocomplete *,
  .dnb-autocomplete ::before,
  .dnb-autocomplete ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-autocomplete ::before,
  .dnb-autocomplete ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Autocomplete component
*
*/
:root {
  --autocomplete-width: 16rem;
  --autocomplete-height: 2rem;
  --autocomplete-height--small: 1.5rem;
  --autocomplete-height--medium: 2.5rem;
  --autocomplete-height--large: 3rem;
  --autocomplete-padding-horizontal: 1rem;
  --autocomplete-focus-border-width: 0.125rem;
  --autocomplete-text-padding: 0.5rem;
  --autocomplete-border-radius: 0.25rem; }

.dnb-autocomplete {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-small);
  line-height: var(--autocomplete-height); }
  .dnb-autocomplete__inner {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: auto;
    color: inherit; }
  .dnb-autocomplete--right .dnb-autocomplete__inner {
    align-items: flex-end; }
  .dnb-autocomplete__shell {
    position: relative;
    width: var(--autocomplete-width);
    margin: 0;
    padding: 0;
    color: inherit; }
  .dnb-autocomplete__row {
    display: inline-flex;
    align-items: center; }
  .dnb-autocomplete--small {
    line-height: var(--autocomplete-height--small); }
  .dnb-autocomplete--medium {
    line-height: var(--autocomplete-height--medium); }
  .dnb-autocomplete--large {
    line-height: var(--autocomplete-height--large); }
  .dnb-autocomplete__icon {
    display: inline-flex;
    justify-content: center;
    pointer-events: none; }
  .dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-sea-green); }
    .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
      display: flex;
      flex-direction: column; }
    .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon {
      align-self: center; }
  .dnb-autocomplete__input {
    display: inline-flex;
    align-items: center;
    outline: none; }
    .dnb-autocomplete__input,
    .dnb-autocomplete__input .dnb-input__inner,
    .dnb-autocomplete__input .dnb-input__shell,
    .dnb-autocomplete__input .dnb-input__input {
      width: 100%; }
  .dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon {
    transform: rotate(180deg);
    transform-origin: 50% 50%; }
  .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
    --border-color: var(--color-black-55);
    box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
    /* iOS fix - because "inset" works not fine with border-radius */
    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
    border-color: transparent; }
    @supports (-webkit-touch-callout: none) {
      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
        box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
        .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
          box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
    @media screen and (-ms-high-contrast: none) {
      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
        box-shadow: inset 0 0 0 1px var(--color-black-55); } }
  .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
    transition: transform 400ms ease-out; }
    html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
      transition-duration: 1ms !important; }
  .dnb-autocomplete .dnb-input__inner__element {
    position: relative;
    z-index: 3;
    cursor: text; }
  @media screen and (min-width: 40em) {
    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder,
    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
      padding-right: 0 !important; } }
  @media screen and (max-width: 40em) {
    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__placeholder,
    .dnb-autocomplete .dnb-input--has-inner-element .dnb-input__input {
      padding-right: 2.5rem !important; } }
  .dnb-autocomplete .dnb-input__inner__element.dnb-p {
    white-space: nowrap;
    padding: 0 0.5rem; }
    @media screen and (max-width: 40em) {
      .dnb-autocomplete .dnb-input__inner__element.dnb-p {
        display: none; } }
  .dnb-autocomplete .dnb-input__inner__element.dnb-p,
  .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
    margin: 0; }
  .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
    margin-right: 2.5rem !important; }
  .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
    padding-right: 3rem; }
  .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
    padding-right: 1rem; }
  .dnb-autocomplete--disabled .dnb-input__inner__element {
    cursor: not-allowed; }
  .dnb-autocomplete__text {
    order: 1;
    position: relative;
    z-index: 4;
    width: 100%;
    height: inherit;
    line-height: inherit;
    padding: 0 var(--autocomplete-text-padding) 0 0;
    overflow: hidden;
    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    font-size: var(--font-size-basis); }
    .dnb-autocomplete__text__inner {
      display: inline-block;
      width: 100%;
      height: inherit;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      color: inherit;
      text-decoration: none;
      text-overflow: inherit;
      text-align: inherit; }
  .dnb-autocomplete > .dnb-form-label {
    margin-right: 1rem;
    line-height: var(--line-height-basis); }
  @media screen and (max-width: 40em) {
    .dnb-autocomplete {
      flex-wrap: wrap; }
      .dnb-autocomplete > .dnb-form-label {
        margin-bottom: 0.5rem;
        margin-top: 0.5rem; } }
  .dnb-autocomplete--stretch {
    display: flex;
    flex-grow: 1; }
  .dnb-autocomplete--stretch .dnb-autocomplete__inner {
    flex-grow: 1; }
  .dnb-autocomplete--stretch .dnb-autocomplete__row, .dnb-autocomplete--stretch .dnb-autocomplete__inner, .dnb-autocomplete--stretch .dnb-autocomplete__shell {
    width: 100%; }
  .dnb-autocomplete--stretch .dnb-form-label + .dnb-autocomplete__inner {
    width: auto; }
  .dnb-autocomplete--vertical.dnb-autocomplete--stretch .dnb-autocomplete__inner {
    width: 100%; }
  .dnb-form-row--horizontal .dnb-autocomplete--stretch {
    width: 100%; }
  label + .dnb-autocomplete[class*='__form-status'] {
    vertical-align: top; }
    label + .dnb-autocomplete[class*='__form-status'] .dnb-autocomplete__shell {
      top: -0.375rem; }
  .dnb-autocomplete__inner > .dnb-form-status {
    order: 2;
    margin-top: 0.5rem; }
  .dnb-autocomplete--vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
  .dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*='__status'] {
    align-items: flex-start; }
    .dnb-autocomplete:not(.dnb-autocomplete--vertical)[class*='__status'] > .dnb-form-label {
      margin-top: 0.25rem; }
  @media screen and (max-width: 40em) {
    .dnb-responsive-component .dnb-autocomplete {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 0.5rem; }
      .dnb-responsive-component .dnb-autocomplete > .dnb-form-label {
        margin-bottom: 0.5rem; }
      .dnb-responsive-component .dnb-autocomplete__helper {
        display: none; } }
  .dnb-autocomplete__list .dnb-drawer-list__option__item > span {
    padding-right: 0.125em; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-autocomplete {
      flex: none;
      vertical-align: baseline; }
      .dnb-autocomplete__shell {
        top: 0; }
      .dnb-autocomplete__options {
        display: block; } }
"
`;