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

exports[`load popular tokens in searchbar should render popular tokens 1`] = `
.c5 {
  border-radius: 12px;
  border-radius: 12px;
  height: 20px;
  width: 50%;
  width: 180px;
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
  will-change: background-position;
  background-size: 400%;
}

.c6 {
  border-radius: 12px;
  border-radius: 12px;
  height: 20px;
  width: 50%;
  width: 48px;
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
  will-change: background-position;
  background-size: 400%;
}

.c7 {
  border-radius: 12px;
  border-radius: 12px;
  height: 16px;
  width: 50%;
  width: 120px;
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
  will-change: background-position;
  background-size: 400%;
}

.c8 {
  border-radius: 12px;
  border-radius: 12px;
  height: 16px;
  width: 50%;
  width: 48px;
  -webkit-animation: fAQEyV 1.5s infinite;
  animation: fAQEyV 1.5s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: linear-gradient( to left, #22222212 25%, rgba(53,53,53,0.07) 50%, #22222212 75% );
  will-change: background-position;
  background-size: 400%;
}

.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 8px 16px;
  -webkit-transition: background 250ms ease;
  transition: background 250ms ease;
}

.c1:hover {
  background: #22222212;
}

.c2 {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #22222212;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.c4 {
  width: 100%;
}

.c0 {
  display: inline-block;
  height: inherit;
}

<div>
  <span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="css-view-175oi2r"
          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; overflow-y: auto; width: 100%; opacity: 1;"
        >
          <div
            class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-spa1360334051"
          >
            <div
              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-spa94665589"
              data-testid="searchbar-dropdown"
            >
              <div
                class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _pt-t-space-spa94665589 _pb-t-space-spa94665589 _pr-t-space-spa1360334076 _pl-t-space-spa1360334076"
              >
                <div
                  class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _gap-t-space-spa94665593"
                >
                  <svg
                    fill="none"
                    height="20"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <polyline
                      points="23 6 13.5 15.5 8.5 10.5 1 18"
                    />
                    <polyline
                      points="17 6 23 6 23 12"
                    />
                  </svg>
                  <span
                    class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-smal108 _lineHeight-f-lineHeigh1269072494 _fontWeight-f-weight-bo3548"
                    data-disable-theme="true"
                  >
                    Popular tokens
                  </span>
                </div>
                <div
                  class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _ml-t-space-spa94665589 _alignItems-center"
                >
                  <div
                    class="c0"
                  >
                    <div>
                      <div
                        class="_opacity-0hover-0--7 _display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _justifyContent-center _borderTopLeftRadius-t-radius-ro291586453 _borderTopRightRadius-t-radius-ro291586453 _borderBottomRightRadius-t-radius-ro291586453 _borderBottomLeftRadius-t-radius-ro291586453 _width-18px _height-18px _outlineWidth-0px _borderTopWidth-0px _borderRightWidth-0px _borderBottomWidth-0px _borderLeftWidth-0px _cursor-default _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                      >
                        <svg
                          fill="none"
                          stroke-width="8"
                          style="width: 16px; height: 16px; color: rgb(191, 191, 191);"
                          viewBox="0 0 16 16"
                        >
                          <path
                            d="M8.00001 1.33334C4.31801 1.33334 1.33334 4.318 1.33334 8C1.33334 11.682 4.31801 14.6667 8.00001 14.6667C11.682 14.6667 14.6667 11.682 14.6667 8C14.6667 4.318 11.682 1.33334 8.00001 1.33334ZM8.50001 11C8.50001 11.276 8.27601 11.5 8.00001 11.5C7.72401 11.5 7.50001 11.276 7.50001 11V7.95264C7.50001 7.67664 7.72401 7.45264 8.00001 7.45264C8.27601 7.45264 8.50001 7.67664 8.50001 7.95264V11ZM8.01336 6.33334C7.64536 6.33334 7.34327 6.03467 7.34327 5.66667C7.34327 5.29867 7.63868 5 8.00668 5H8.01336C8.38202 5 8.68002 5.29867 8.68002 5.66667C8.68002 6.03467 8.38136 6.33334 8.01336 6.33334Z"
                            fill="currentColor"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-spa94665589"
              >
                <div
                  class="c1"
                >
                  <div
                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _width-10037 _gap-t-space-gap52"
                  >
                    <div
                      class="c2"
                    />
                    <div
                      class="c3 c4"
                    >
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241"
                      >
                        <div
                          class="c5"
                          height="20px"
                          width="180px"
                        />
                        <div
                          class="c6"
                          height="20px"
                          width="48px"
                        />
                      </div>
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241"
                      >
                        <div
                          class="c7"
                          height="16px"
                          width="120px"
                        />
                        <div
                          class="c8"
                          height="16px"
                          width="48px"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c1"
                >
                  <div
                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _width-10037 _gap-t-space-gap52"
                  >
                    <div
                      class="c2"
                    />
                    <div
                      class="c3 c4"
                    >
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241"
                      >
                        <div
                          class="c5"
                          height="20px"
                          width="180px"
                        />
                        <div
                          class="c6"
                          height="20px"
                          width="48px"
                        />
                      </div>
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241"
                      >
                        <div
                          class="c7"
                          height="16px"
                          width="120px"
                        />
                        <div
                          class="c8"
                          height="16px"
                          width="48px"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c1"
                >
                  <div
                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _width-10037 _gap-t-space-gap52"
                  >
                    <div
                      class="c2"
                    />
                    <div
                      class="c3 c4"
                    >
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241"
                      >
                        <div
                          class="c5"
                          height="20px"
                          width="180px"
                        />
                        <div
                          class="c6"
                          height="20px"
                          width="48px"
                        />
                      </div>
                      <div
                        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-space-betwe3241"
                      >
                        <div
                          class="c7"
                          height="16px"
                          width="120px"
                        />
                        <div
                          class="c8"
                          height="16px"
                          width="48px"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </span>
    </span>
  </span>
</div>
`;
