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

exports[`SwapLineItem.tsx dutch order eth input 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c21 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: auto;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c11 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c22 {
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c10 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c16 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

.c20 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c12 {
  color: #4673fa;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c17 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c17::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c17.arrow-top {
  bottom: -4px;
}

.c17.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c17.arrow-bottom {
  top: -4px;
}

.c17.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c17.arrow-left {
  right: -4px;
}

.c17.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c17.arrow-right {
  left: -4px;
}

.c17.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c19 {
  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: 4px;
}

.c15 {
  display: inline;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c18::after {
  content: 'Auto';
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .c12 {
    background-image: linear-gradient(91.39deg,#4673fa -101.76%,#9646fa 101.76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          data-testid="gas-estimate-uniswapx-icon"
                          fill="none"
                          height="14"
                          viewBox="0 0 10 14"
                          width="10"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <defs>
                            <lineargradient
                              gradientUnits="userSpaceOnUse"
                              id="AutoRouterIconGradientfixed-uuid-value"
                              x1="-10.1807"
                              x2="10.6573"
                              y1="-12.0006"
                              y2="-11.6017"
                            >
                              <stop
                                stop-color="#4673FA"
                              />
                              <stop
                                offset="1"
                                stop-color="#9646FA"
                              />
                            </lineargradient>
                          </defs>
                          <path
                            d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                            fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                          />
                        </svg>
                        <div
                          class="c10 css-142zc9n"
                        >
                          <div
                            class="c0 c11"
                          >
                            <div
                              class="c12"
                            >
                              <div
                                style="font-weight: 535;"
                              >
                                $0
                              </div>
                            </div>
                            <div>
                              <s>
                                $7.87
                              </s>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c10 css-obwv3p"
                    >
                      <div
                        class="c12 c15"
                      >
                        UniswapX
                      </div>
                       aggregates liquidity sources for better prices and gas free swaps. 
                      <a
                        class="c16"
                        href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c17 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c10 css-obwv3p"
                >
                  <div
                    class="c12 c15"
                  >
                    UniswapX
                  </div>
                   aggregates liquidity sources for better prices and gas free swaps. 
                  <a
                    class="c16"
                    href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c11"
                >
                  <div
                    class="c10 c18 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c19"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.0000000000000009 DEF
                    </div>
                  </div>
                  <div
                    class="c20"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c16"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c16"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.0000000000000009 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c21 c22"
                  style="display: inline-flex;"
                  width="auto"
                >
                  <svg
                    fill="none"
                    height="14"
                    viewBox="0 0 10 14"
                    width="10"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <defs>
                      <lineargradient
                        gradientUnits="userSpaceOnUse"
                        id="AutoRouterIconGradientfixed-uuid-value"
                        x1="-10.1807"
                        x2="10.6573"
                        y1="-12.0006"
                        y2="-11.6017"
                      >
                        <stop
                          stop-color="#4673FA"
                        />
                        <stop
                          offset="1"
                          stop-color="#9646FA"
                        />
                      </lineargradient>
                    </defs>
                    <path
                      d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                      fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                    />
                  </svg>
                  <div
                    class="c12"
                  >
                    <div
                      class="c3 css-142zc9n"
                    >
                      Uniswap X
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c10 css-obwv3p"
                >
                  <div
                    class="c12 c15"
                  >
                    UniswapX
                  </div>
                   aggregates liquidity sources for better prices and gas free swaps. 
                  <a
                    class="c16"
                    href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx dutch v2 order eth input 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c21 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: auto;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c11 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c22 {
  width: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c10 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c16 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c16:hover {
  opacity: 0.6;
}

.c16:active {
  opacity: 0.4;
}

.c20 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c12 {
  color: #4673fa;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c17 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c17::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c17.arrow-top {
  bottom: -4px;
}

.c17.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c17.arrow-bottom {
  top: -4px;
}

.c17.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c17.arrow-left {
  right: -4px;
}

.c17.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c17.arrow-right {
  left: -4px;
}

.c17.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c19 {
  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: 4px;
}

.c15 {
  display: inline;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c18::after {
  content: 'Auto';
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .c12 {
    background-image: linear-gradient(91.39deg,#4673fa -101.76%,#9646fa 101.76%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          data-testid="gas-estimate-uniswapx-icon"
                          fill="none"
                          height="14"
                          viewBox="0 0 10 14"
                          width="10"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <defs>
                            <lineargradient
                              gradientUnits="userSpaceOnUse"
                              id="AutoRouterIconGradientfixed-uuid-value"
                              x1="-10.1807"
                              x2="10.6573"
                              y1="-12.0006"
                              y2="-11.6017"
                            >
                              <stop
                                stop-color="#4673FA"
                              />
                              <stop
                                offset="1"
                                stop-color="#9646FA"
                              />
                            </lineargradient>
                          </defs>
                          <path
                            d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                            fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                          />
                        </svg>
                        <div
                          class="c10 css-142zc9n"
                        >
                          <div
                            class="c0 c11"
                          >
                            <div
                              class="c12"
                            >
                              <div
                                style="font-weight: 535;"
                              >
                                $0
                              </div>
                            </div>
                            <div>
                              <s>
                                $7.87
                              </s>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c10 css-obwv3p"
                    >
                      <div
                        class="c12 c15"
                      >
                        UniswapX
                      </div>
                       aggregates liquidity sources for better prices and gas free swaps. 
                      <a
                        class="c16"
                        href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c17 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c10 css-obwv3p"
                >
                  <div
                    class="c12 c15"
                  >
                    UniswapX
                  </div>
                   aggregates liquidity sources for better prices and gas free swaps. 
                  <a
                    class="c16"
                    href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c11"
                >
                  <div
                    class="c10 c18 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c19"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.0000000000000009 DEF
                    </div>
                  </div>
                  <div
                    class="c20"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.0000000000000009 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c16"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c16"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.0000000000000009 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c21 c22"
                  style="display: inline-flex;"
                  width="auto"
                >
                  <svg
                    fill="none"
                    height="14"
                    viewBox="0 0 10 14"
                    width="10"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <defs>
                      <lineargradient
                        gradientUnits="userSpaceOnUse"
                        id="AutoRouterIconGradientfixed-uuid-value"
                        x1="-10.1807"
                        x2="10.6573"
                        y1="-12.0006"
                        y2="-11.6017"
                      >
                        <stop
                          stop-color="#4673FA"
                        />
                        <stop
                          offset="1"
                          stop-color="#9646FA"
                        />
                      </lineargradient>
                    </defs>
                    <path
                      d="M9.97131 6.19803C9.91798 6.07737 9.79866 6.00003 9.66666 6.00003H6.66666V1.00003C6.66666 0.862034 6.58201 0.738037 6.45267 0.688704C6.32267 0.638704 6.17799 0.674696 6.08532 0.776696L0.0853237 7.44336C-0.00267631 7.54136 -0.0253169 7.68137 0.0286831 7.80204C0.0820164 7.9227 0.20133 8.00003 0.33333 8.00003H3.33333V13C3.33333 13.138 3.41799 13.262 3.54732 13.3114C3.58665 13.326 3.62666 13.3334 3.66666 13.3334C3.75933 13.3334 3.85 13.2947 3.91467 13.2227L9.91467 6.55603C10.0027 6.4587 10.0246 6.31803 9.97131 6.19803Z"
                      fill="url(#AutoRouterIconGradientfixed-uuid-value)"
                    />
                  </svg>
                  <div
                    class="c12"
                  >
                    <div
                      class="c3 css-142zc9n"
                    >
                      Uniswap X
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c10 css-obwv3p"
                >
                  <div
                    class="c12 c15"
                  >
                    UniswapX
                  </div>
                   aggregates liquidity sources for better prices and gas free swaps. 
                  <a
                    class="c16"
                    href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c17 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact input 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c36 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c12 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c37 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c38 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -1px;
}

.c38 > * {
  margin: 1px !important;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c11 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c20 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c15 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c15:hover {
  opacity: 0.6;
}

.c15:active {
  opacity: 0.4;
}

.c19 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c16 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c16::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c16.arrow-top {
  bottom: -4px;
}

.c16.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c16.arrow-bottom {
  top: -4px;
}

.c16.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c16.arrow-left {
  right: -4px;
}

.c16.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c16.arrow-right {
  left: -4px;
}

.c16.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c21 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c41 {
  max-width: 200px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 8px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  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: 4px;
}

.c22 {
  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: 12px;
}

.c10 {
  height: 16px;
  width: 16px;
}

.c10 > * {
  fill: #CECECE;
}

.c32 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #7D7D7D;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 4px 6px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 535;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c27 img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c40 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c40 img {
  width: 10px;
  height: 20px;
  object-fit: cover;
}

.c40 img:first-child {
  border-radius: 10px 0 0 10px;
  object-position: 0 0;
}

.c40 img:last-child {
  border-radius: 0 10px 10px 0;
  object-position: 100% 0;
}

.c28 {
  width: 10px;
  height: 20px;
  border-radius: 50%;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
}

.c25 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c23 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.c24 {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
}

.c29 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  position: relative;
}

.c39 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 4px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: calc(100%);
  z-index: 1;
  opacity: 0.5;
}

.c31 path {
  stroke: #22222212;
}

.c33 {
  background-color: #F9F9F9;
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  grid-auto-flow: column;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  padding: 4px 6px;
  z-index: 1020;
}

.c34 {
  background-color: #F9F9F9;
  border-radius: 4px;
  color: #7D7D7D;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 1021;
}

.c35 {
  word-break: normal;
}

.c17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c17::after {
  content: 'Auto';
}

<span
    class="t_light is_inversed _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          class="c10"
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                          />
                        </svg>
                        <div
                          class="c11 css-142zc9n"
                        >
                          <div
                            class="c0 c12"
                          >
                            <div>
                              $1.00
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c11 css-1m65e73"
                    >
                      Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                      <a
                        class="c15"
                        href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c16 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c11 css-1m65e73"
                >
                  Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                  <a
                    class="c15"
                    href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c12"
                >
                  <div
                    class="c11 c17 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c18"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.00000000000000098 DEF
                    </div>
                  </div>
                  <div
                    class="c19"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c15"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.00000000000000098 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c20 css-142zc9n"
                >
                  Uniswap Client
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c21"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c22"
                >
                  <div
                    class="c23 css-vurnku"
                  >
                    <div
                      class="c0 c1 c24"
                    >
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c0 c1 c29"
                      >
                        <div
                          class="c30"
                        >
                          <svg
                            class="c31"
                          >
                            dot_line.svg
                          </svg>
                        </div>
                        <div
                          class="c32 c33"
                        >
                          <div
                            class="c32 c34"
                          >
                            <div
                              class="c3 c35 css-1m65e73"
                            >
                              V3
                            </div>
                          </div>
                          <div
                            class="c11 c35 css-1m65e73"
                            style="min-width: auto;"
                          >
                            100%
                          </div>
                        </div>
                        <div
                          class="c36 c37 c38"
                          style="justify-content: space-evenly; z-index: 2;"
                          width="100%"
                        >
                          <div
                            class="c5"
                          >
                            <div>
                              <div
                                class="c32 c39"
                              >
                                <div
                                  class="css-mbnpt3"
                                >
                                  <div
                                    class="c40"
                                    size="20"
                                  >
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                    />
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                    />
                                  </div>
                                </div>
                                <div
                                  class="c11 c35 css-1m65e73"
                                >
                                  1%
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="c13"
                            style="position: fixed; left: 0px; top: 0px;"
                          >
                            <div
                              class="c41"
                            >
                              ABC/DEF 1% pool
                            </div>
                            <div
                              class="c16 arrow-"
                              style="position: absolute;"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11 css-obwv3p"
                  >
                    Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact input api 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c36 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c12 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c37 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c38 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -1px;
}

.c38 > * {
  margin: 1px !important;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c11 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c20 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c15 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c15:hover {
  opacity: 0.6;
}

.c15:active {
  opacity: 0.4;
}

.c19 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c16 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c16::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c16.arrow-top {
  bottom: -4px;
}

.c16.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c16.arrow-bottom {
  top: -4px;
}

.c16.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c16.arrow-left {
  right: -4px;
}

.c16.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c16.arrow-right {
  left: -4px;
}

.c16.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c21 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c41 {
  max-width: 200px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 8px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  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: 4px;
}

.c22 {
  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: 12px;
}

.c10 {
  height: 16px;
  width: 16px;
}

.c10 > * {
  fill: #CECECE;
}

.c32 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #7D7D7D;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 4px 6px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 535;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c27 img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c40 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c40 img {
  width: 10px;
  height: 20px;
  object-fit: cover;
}

.c40 img:first-child {
  border-radius: 10px 0 0 10px;
  object-position: 0 0;
}

.c40 img:last-child {
  border-radius: 0 10px 10px 0;
  object-position: 100% 0;
}

.c28 {
  width: 10px;
  height: 20px;
  border-radius: 50%;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
}

.c25 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c23 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.c24 {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
}

.c29 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  position: relative;
}

.c39 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 4px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: calc(100%);
  z-index: 1;
  opacity: 0.5;
}

.c31 path {
  stroke: #22222212;
}

.c33 {
  background-color: #F9F9F9;
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  grid-auto-flow: column;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  padding: 4px 6px;
  z-index: 1020;
}

.c34 {
  background-color: #F9F9F9;
  border-radius: 4px;
  color: #7D7D7D;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 1021;
}

.c35 {
  word-break: normal;
}

.c17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c17::after {
  content: 'Auto';
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          class="c10"
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                          />
                        </svg>
                        <div
                          class="c11 css-142zc9n"
                        >
                          <div
                            class="c0 c12"
                          >
                            <div>
                              $1.00
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c11 css-1m65e73"
                    >
                      Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                      <a
                        class="c15"
                        href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c16 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c11 css-1m65e73"
                >
                  Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                  <a
                    class="c15"
                    href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c12"
                >
                  <div
                    class="c11 c17 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c18"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.00000000000000098 DEF
                    </div>
                  </div>
                  <div
                    class="c19"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c15"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.00000000000000098 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c20 css-142zc9n"
                >
                  Uniswap API
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c21"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c22"
                >
                  <div
                    class="c23 css-vurnku"
                  >
                    <div
                      class="c0 c1 c24"
                    >
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c0 c1 c29"
                      >
                        <div
                          class="c30"
                        >
                          <svg
                            class="c31"
                          >
                            dot_line.svg
                          </svg>
                        </div>
                        <div
                          class="c32 c33"
                        >
                          <div
                            class="c32 c34"
                          >
                            <div
                              class="c3 c35 css-1m65e73"
                            >
                              V3
                            </div>
                          </div>
                          <div
                            class="c11 c35 css-1m65e73"
                            style="min-width: auto;"
                          >
                            100%
                          </div>
                        </div>
                        <div
                          class="c36 c37 c38"
                          style="justify-content: space-evenly; z-index: 2;"
                          width="100%"
                        >
                          <div
                            class="c5"
                          >
                            <div>
                              <div
                                class="c32 c39"
                              >
                                <div
                                  class="css-mbnpt3"
                                >
                                  <div
                                    class="c40"
                                    size="20"
                                  >
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                    />
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                    />
                                  </div>
                                </div>
                                <div
                                  class="c11 c35 css-1m65e73"
                                >
                                  1%
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="c13"
                            style="position: fixed; left: 0px; top: 0px;"
                          >
                            <div
                              class="c41"
                            >
                              ABC/DEF 1% pool
                            </div>
                            <div
                              class="c16 arrow-"
                              style="position: absolute;"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11 css-obwv3p"
                  >
                    Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact output 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c36 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c12 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c37 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c38 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -1px;
}

.c38 > * {
  margin: 1px !important;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c11 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c20 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c15 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c15:hover {
  opacity: 0.6;
}

.c15:active {
  opacity: 0.4;
}

.c19 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c16 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c16::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c16.arrow-top {
  bottom: -4px;
}

.c16.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c16.arrow-bottom {
  top: -4px;
}

.c16.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c16.arrow-left {
  right: -4px;
}

.c16.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c16.arrow-right {
  left: -4px;
}

.c16.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c21 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c41 {
  max-width: 200px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 8px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  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: 4px;
}

.c22 {
  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: 12px;
}

.c10 {
  height: 16px;
  width: 16px;
}

.c10 > * {
  fill: #CECECE;
}

.c32 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #7D7D7D;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 4px 6px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 535;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c27 img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c40 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c40 img {
  width: 10px;
  height: 20px;
  object-fit: cover;
}

.c40 img:first-child {
  border-radius: 10px 0 0 10px;
  object-position: 0 0;
}

.c40 img:last-child {
  border-radius: 0 10px 10px 0;
  object-position: 100% 0;
}

.c28 {
  width: 10px;
  height: 20px;
  border-radius: 50%;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
}

.c25 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c23 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.c24 {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
}

.c29 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  position: relative;
}

.c39 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 4px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: calc(100%);
  z-index: 1;
  opacity: 0.5;
}

.c31 path {
  stroke: #22222212;
}

.c33 {
  background-color: #F9F9F9;
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  grid-auto-flow: column;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  padding: 4px 6px;
  z-index: 1020;
}

.c34 {
  background-color: #F9F9F9;
  border-radius: 4px;
  color: #7D7D7D;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 1021;
}

.c35 {
  word-break: normal;
}

.c17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c17::after {
  content: 'Auto';
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          class="c10"
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                          />
                        </svg>
                        <div
                          class="c11 css-142zc9n"
                        >
                          <div
                            class="c0 c12"
                          >
                            <div>
                              -
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c11 css-1m65e73"
                    >
                      Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                      <a
                        class="c15"
                        href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c16 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c11 css-1m65e73"
                >
                  Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                  <a
                    class="c15"
                    href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c12"
                >
                  <div
                    class="c11 c17 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c18"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Pay at most
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.00000000000000102 ABC
                    </div>
                  </div>
                  <div
                    class="c19"
                  />
                  <div>
                    If the price moves so that you will pay more than 0.00000000000000102 ABC, your transaction will be reverted. This is the maximum amount you are guaranteed to pay. 
                    <a
                      class="c15"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 GHI
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Pay at most
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.00000000000000102 ABC
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c20 css-142zc9n"
                >
                  Uniswap Client
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c21"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c22"
                >
                  <div
                    class="c23 css-vurnku"
                  >
                    <div
                      class="c0 c1 c24"
                    >
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c0 c1 c29"
                      >
                        <div
                          class="c30"
                        >
                          <svg
                            class="c31"
                          >
                            dot_line.svg
                          </svg>
                        </div>
                        <div
                          class="c32 c33"
                        >
                          <div
                            class="c32 c34"
                          >
                            <div
                              class="c3 c35 css-1m65e73"
                            >
                              V3
                            </div>
                          </div>
                          <div
                            class="c11 c35 css-1m65e73"
                            style="min-width: auto;"
                          >
                            100%
                          </div>
                        </div>
                        <div
                          class="c36 c37 c38"
                          style="justify-content: space-evenly; z-index: 2;"
                          width="100%"
                        >
                          <div
                            class="c5"
                          >
                            <div>
                              <div
                                class="c32 c39"
                              >
                                <div
                                  class="css-mbnpt3"
                                >
                                  <div
                                    class="c40"
                                    size="20"
                                  >
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                    />
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
                                    />
                                  </div>
                                </div>
                                <div
                                  class="c11 c35 css-1m65e73"
                                >
                                  0.3%
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="c13"
                            style="position: fixed; left: 0px; top: 0px;"
                          >
                            <div
                              class="c41"
                            >
                              ABC/GHI 0.3% pool
                            </div>
                            <div
                              class="c16 arrow-"
                              style="position: absolute;"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11 css-obwv3p"
                  >
                    This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx fee on buy 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c36 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c12 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c37 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c38 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -1px;
}

.c38 > * {
  margin: 1px !important;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c11 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c20 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c15 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c15:hover {
  opacity: 0.6;
}

.c15:active {
  opacity: 0.4;
}

.c19 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c16 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c16::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c16.arrow-top {
  bottom: -4px;
}

.c16.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c16.arrow-bottom {
  top: -4px;
}

.c16.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c16.arrow-left {
  right: -4px;
}

.c16.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c16.arrow-right {
  left: -4px;
}

.c16.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c21 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c41 {
  max-width: 200px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 8px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  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: 4px;
}

.c22 {
  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: 12px;
}

.c10 {
  height: 16px;
  width: 16px;
}

.c10 > * {
  fill: #CECECE;
}

.c32 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #7D7D7D;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 4px 6px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 535;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c27 img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c40 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c40 img {
  width: 10px;
  height: 20px;
  object-fit: cover;
}

.c40 img:first-child {
  border-radius: 10px 0 0 10px;
  object-position: 0 0;
}

.c40 img:last-child {
  border-radius: 0 10px 10px 0;
  object-position: 100% 0;
}

.c28 {
  width: 10px;
  height: 20px;
  border-radius: 50%;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
}

.c25 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c23 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.c24 {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
}

.c29 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  position: relative;
}

.c39 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 4px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: calc(100%);
  z-index: 1;
  opacity: 0.5;
}

.c31 path {
  stroke: #22222212;
}

.c33 {
  background-color: #F9F9F9;
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  grid-auto-flow: column;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  padding: 4px 6px;
  z-index: 1020;
}

.c34 {
  background-color: #F9F9F9;
  border-radius: 4px;
  color: #7D7D7D;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 1021;
}

.c35 {
  word-break: normal;
}

.c17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c17::after {
  content: 'Auto';
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          class="c10"
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                          />
                        </svg>
                        <div
                          class="c11 css-142zc9n"
                        >
                          <div
                            class="c0 c12"
                          >
                            <div>
                              $1.00
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c11 css-1m65e73"
                    >
                      Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                      <a
                        class="c15"
                        href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c16 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c11 css-1m65e73"
                >
                  Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                  <a
                    class="c15"
                    href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            DEF fee
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <span
                  class=""
                >
                  3%
                </span>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/18673568523789-What-is-a-token-fee-"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c12"
                >
                  <div
                    class="c11 c17 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c18"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.00000000000000098 DEF
                    </div>
                  </div>
                  <div
                    class="c19"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c15"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.00000000000000098 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c20 css-142zc9n"
                >
                  Uniswap API
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c21"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c22"
                >
                  <div
                    class="c23 css-vurnku"
                  >
                    <div
                      class="c0 c1 c24"
                    >
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c0 c1 c29"
                      >
                        <div
                          class="c30"
                        >
                          <svg
                            class="c31"
                          >
                            dot_line.svg
                          </svg>
                        </div>
                        <div
                          class="c32 c33"
                        >
                          <div
                            class="c32 c34"
                          >
                            <div
                              class="c3 c35 css-1m65e73"
                            >
                              V3
                            </div>
                          </div>
                          <div
                            class="c11 c35 css-1m65e73"
                            style="min-width: auto;"
                          >
                            100%
                          </div>
                        </div>
                        <div
                          class="c36 c37 c38"
                          style="justify-content: space-evenly; z-index: 2;"
                          width="100%"
                        >
                          <div
                            class="c5"
                          >
                            <div>
                              <div
                                class="c32 c39"
                              >
                                <div
                                  class="css-mbnpt3"
                                >
                                  <div
                                    class="c40"
                                    size="20"
                                  >
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                    />
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                    />
                                  </div>
                                </div>
                                <div
                                  class="c11 c35 css-1m65e73"
                                >
                                  1%
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="c13"
                            style="position: fixed; left: 0px; top: 0px;"
                          >
                            <div
                              class="c41"
                            >
                              ABC/DEF 1% pool
                            </div>
                            <div
                              class="c16 arrow-"
                              style="position: absolute;"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11 css-obwv3p"
                  >
                    Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx fee on sell 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c36 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 4px;
}

.c12 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c37 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c38 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -1px;
}

.c38 > * {
  margin: 1px !important;
}

.c9 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: -xs;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c11 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c20 {
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}

.c15 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c15:hover {
  opacity: 0.6;
}

.c15:active {
  opacity: 0.4;
}

.c19 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c13 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c16 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c16::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c16.arrow-top {
  bottom: -4px;
}

.c16.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c16.arrow-bottom {
  top: -4px;
}

.c16.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c16.arrow-left {
  right: -4px;
}

.c16.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c16.arrow-right {
  left: -4px;
}

.c16.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c14 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c21 {
  max-width: 400px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 16px 20px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c41 {
  max-width: 200px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 8px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c18 {
  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: 4px;
}

.c22 {
  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: 12px;
}

.c10 {
  height: 16px;
  width: 16px;
}

.c10 > * {
  fill: #CECECE;
}

.c32 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #7D7D7D;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 4px 6px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 535;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c27 img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c40 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  position: relative;
  top: 0;
  left: 0;
}

.c40 img {
  width: 10px;
  height: 20px;
  object-fit: cover;
}

.c40 img:first-child {
  border-radius: 10px 0 0 10px;
  object-position: 0 0;
}

.c40 img:last-child {
  border-radius: 0 10px 10px 0;
  object-position: 100% 0;
}

.c28 {
  width: 10px;
  height: 20px;
  border-radius: 50%;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
}

.c25 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c23 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.c24 {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
}

.c29 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  position: relative;
}

.c39 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px 4px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: calc(100%);
  z-index: 1;
  opacity: 0.5;
}

.c31 path {
  stroke: #22222212;
}

.c33 {
  background-color: #F9F9F9;
  border-radius: 8px;
  display: grid;
  grid-gap: 4px;
  grid-auto-flow: column;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  padding: 4px 6px;
  z-index: 1020;
}

.c34 {
  background-color: #F9F9F9;
  border-radius: 4px;
  color: #7D7D7D;
  font-size: 10px;
  padding: 2px 4px;
  z-index: 1021;
}

.c35 {
  word-break: normal;
}

.c17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c17::after {
  content: 'Auto';
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c5"
                >
                  <div>
                    <div
                      class="c7"
                    >
                      <div
                        class="c0 c8 c9"
                      >
                        <svg
                          class="c10"
                          fill="none"
                          height="24"
                          viewBox="0 0 24 24"
                          width="24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            clip-rule="evenodd"
                            d="M15.3078 1.77827C15.7064 1.39599 16.3395 1.40923 16.7217 1.80783L20.9689 6.23633C21.2428 6.47474 21.4729 6.76205 21.6459 7.08464C21.8481 7.43172 22 7.84819 22 8.32698V16.7012C22 18.2484 20.7455 19.5 19.2 19.5C17.6536 19.5 16.4 18.2464 16.4 16.7V14.3999C16.4 13.8476 15.9523 13.3999 15.4 13.3999H14V20.5C14 20.569 13.9965 20.6372 13.9897 20.7045C13.9515 21.08 13.8095 21.4249 13.5927 21.7098C13.2274 22.19 12.6499 22.5 12 22.5H4C3.30964 22.5 2.70098 22.1502 2.34157 21.6182C2.12592 21.299 2.00001 20.9142 2 20.5V5.4999C2 3.84305 3.34315 2.4999 5 2.4999H11C12.6569 2.4999 14 3.84305 14 5.4999V11.3999H15.4C17.0569 11.3999 18.4 12.7431 18.4 14.3999V16.7C18.4 17.1418 18.7582 17.5 19.2 17.5C19.6427 17.5 20 17.1422 20 16.7012V11.3292C19.6872 11.4397 19.3506 11.4999 19 11.4999C17.3431 11.4999 16 10.1568 16 8.4999C16 7.28851 16.718 6.24482 17.7517 5.77117L15.2783 3.19217C14.896 2.79357 14.9092 2.16055 15.3078 1.77827ZM19.6098 7.70731C19.441 7.57725 19.2296 7.4999 19 7.4999C18.4477 7.4999 18 7.94762 18 8.4999C18 9.05219 18.4477 9.4999 19 9.4999C19.5523 9.4999 20 9.05219 20 8.4999C20 8.34084 19.9629 8.19045 19.8968 8.05693C19.8303 7.95164 19.7349 7.83559 19.6098 7.70731ZM5.21572 4.72463C4.66343 4.72463 4.21572 5.17235 4.21572 5.72463V9.72463C4.21572 10.2769 4.66343 10.7246 5.21572 10.7246H10.7157C11.268 10.7246 11.7157 10.2769 11.7157 9.72463V5.72463C11.7157 5.17235 11.268 4.72463 10.7157 4.72463H5.21572Z"
                            fill="currentColor"
                            fill-rule="evenodd"
                          />
                        </svg>
                        <div
                          class="c11 css-142zc9n"
                        >
                          <div
                            class="c0 c12"
                          >
                            <div>
                              $1.00
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c13"
                  style="position: fixed; left: 0px; top: 0px;"
                >
                  <div
                    class="c14"
                  >
                    <div
                      class="c11 css-1m65e73"
                    >
                      Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                      <a
                        class="c15"
                        href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        Learn more
                      </a>
                    </div>
                  </div>
                  <div
                    class="c16 arrow-"
                    style="position: absolute;"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c11 css-1m65e73"
                >
                  Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                  <a
                    class="c15"
                    href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            ABC fee
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <span
                  class=""
                >
                  3%
                </span>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not receive any of these fees. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/18673568523789-What-is-a-token-fee-"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c12"
                >
                  <div
                    class="c11 c17 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c18"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.00000000000000098 DEF
                    </div>
                  </div>
                  <div
                    class="c19"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c15"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                Fees are applied to ensure the best experience with Uniswap. There is no fee associated with this swap. 
                <a
                  class="c15"
                  href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn more
                </a>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.00000000000000098 DEF
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c14"
            >
              <div
                class="c11 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c20 css-142zc9n"
                >
                  Uniswap API
                </div>
              </div>
            </div>
          </div>
          <div
            class="c13"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c21"
            >
              <div
                class="c11 css-obwv3p"
              >
                <div
                  class="c22"
                >
                  <div
                    class="c23 css-vurnku"
                  >
                    <div
                      class="c0 c1 c24"
                    >
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c0 c1 c29"
                      >
                        <div
                          class="c30"
                        >
                          <svg
                            class="c31"
                          >
                            dot_line.svg
                          </svg>
                        </div>
                        <div
                          class="c32 c33"
                        >
                          <div
                            class="c32 c34"
                          >
                            <div
                              class="c3 c35 css-1m65e73"
                            >
                              V3
                            </div>
                          </div>
                          <div
                            class="c11 c35 css-1m65e73"
                            style="min-width: auto;"
                          >
                            100%
                          </div>
                        </div>
                        <div
                          class="c36 c37 c38"
                          style="justify-content: space-evenly; z-index: 2;"
                          width="100%"
                        >
                          <div
                            class="c5"
                          >
                            <div>
                              <div
                                class="c32 c39"
                              >
                                <div
                                  class="css-mbnpt3"
                                >
                                  <div
                                    class="c40"
                                    size="20"
                                  >
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                    />
                                    <img
                                      class="c28"
                                      size="20"
                                      src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                    />
                                  </div>
                                </div>
                                <div
                                  class="c11 c35 css-1m65e73"
                                >
                                  1%
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="c13"
                            style="position: fixed; left: 0px; top: 0px;"
                          >
                            <div
                              class="c41"
                            >
                              ABC/DEF 1% pool
                            </div>
                            <div
                              class="c16 arrow-"
                              style="position: absolute;"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="c25"
                        style="height: 20px; width: 20px;"
                      >
                        <div
                          class="c26"
                        >
                          <div
                            class="c27"
                            size="20"
                          >
                             
                            <img
                              class="c28"
                              size="20"
                              src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c11 css-obwv3p"
                  >
                    Best price route costs ~$1.00 in gas.  This route optimizes your total output by considering split routes, multiple hops, and the gas cost of each step.
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c16 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx preview exact in 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c13 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 8px;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c10 {
  color: #7D7D7D;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c7 {
  -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, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 50px;
}

.c11 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c11:hover {
  opacity: 0.6;
}

.c11:active {
  opacity: 0.4;
}

.c16 {
  width: 100%;
  height: 1px;
  background-color: #22222212;
}

.c8 {
  z-index: 1070;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 150ms linear,opacity 150ms linear;
  transition: visibility 150ms linear,opacity 150ms linear;
  color: #7D7D7D;
}

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

.c12 {
  width: 8px;
  height: 8px;
  z-index: 9998;
}

.c12::before {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  z-index: 9998;
  content: '';
  border: 1px solid #22222212;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #FFFFFF;
}

.c12.arrow-top {
  bottom: -4px;
}

.c12.arrow-top::before {
  border-top: none;
  border-left: none;
}

.c12.arrow-bottom {
  top: -4px;
}

.c12.arrow-bottom::before {
  border-bottom: none;
  border-right: none;
}

.c12.arrow-left {
  right: -4px;
}

.c12.arrow-left::before {
  border-bottom: none;
  border-left: none;
}

.c12.arrow-right {
  left: -4px;
}

.c12.arrow-right::before {
  border-right: none;
  border-top: none;
}

.c9 {
  max-width: 256px;
  width: calc(100vw - 16px);
  cursor: default;
  padding: 12px;
  pointer-events: auto;
  color: #222222;
  font-weight: 485;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #22222212;
  box-shadow: 0 4px 8px 0 rgba(47,128,237,0.1);
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c17 {
  cursor: auto;
  color: #7D7D7D;
}

.c6 {
  text-align: right;
  overflow-wrap: break-word;
}

.c15 {
  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: 4px;
}

.c14 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c14::after {
  content: 'Auto';
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c7"
                  data-testid="loading-row"
                  height="15"
                  width="50"
                />
              </div>
            </div>
          </div>
          <div
            class="c8"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c9"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c10 css-1m65e73"
                >
                  Network cost is paid in ETH on the ETHEREUM network in order to transact. 
                  <a
                    class="c11"
                    href="https://support.uniswap.org/hc/en-us/articles/8370337377805-What-is-a-network-fee-"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    Learn more
                  </a>
                </div>
              </div>
            </div>
            <div
              class="c12 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                <div
                  class="c0 c13"
                >
                  <div
                    class="c10 c14 css-1lgneq0"
                  />
                   2%
                </div>
              </div>
            </div>
          </div>
          <div
            class="c8"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c9"
            >
              <div
                class="c10 css-obwv3p"
              >
                <div
                  class="c15"
                >
                  <div
                    class="c0 c1 c2"
                  >
                    <div
                      class="c3 css-obwv3p"
                    >
                      Receive at least
                    </div>
                    <div
                      class="c3 css-obwv3p"
                    >
                      0.00000000000000098 DEF
                    </div>
                  </div>
                  <div
                    class="c16"
                  />
                  <div>
                    If the price moves so that you will receive less than 0.00000000000000098 DEF, your transaction will be reverted. This is the minimum amount you are guaranteed to receive. 
                    <a
                      class="c11"
                      href="https://support.uniswap.org/hc/en-us/articles/8643879653261-What-is-Price-Slippage-"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      Learn more
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="c12 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c17 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee
          </div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <div
              class="c7"
              data-testid="loading-row"
              height="15"
              width="50"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c5"
          >
            <div>
              <div
                class="c3 c6 css-142zc9n"
              >
                0.00000000000000098 DEF
              </div>
            </div>
          </div>
          <div
            class="c8"
            style="position: fixed; left: 0px; top: 0px;"
          >
            <div
              class="c9"
            >
              <div
                class="c10 css-obwv3p"
              >
                The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
              </div>
            </div>
            <div
              class="c12 arrow-"
              style="position: absolute;"
            />
          </div>
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c17 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <div
              class="c7"
              data-testid="loading-row"
              height="15"
              width="50"
            />
          </div>
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx syncing 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c2 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c3 {
  color: #222222;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

.c5 {
  -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, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 50px;
}

.c6 {
  -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, #FFFFFF 25%, #22222212 50%, #FFFFFF 75% );
  background-size: 400%;
  will-change: background-position;
  border-radius: 12px;
  height: 15px;
  width: 70px;
}

.c4 {
  cursor: help;
  color: #7D7D7D;
}

.c7 {
  cursor: auto;
  color: #7D7D7D;
}

<span
    class=" _dsp_contents"
  >
    <span
      class=" t_light _dsp_contents is_Theme"
    >
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Network cost
          </div>
          <div
            class="c5"
            data-testid="loading-row"
            height="15"
            width="50"
          />
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Max. slippage
          </div>
          <div
            class="c5"
            data-testid="loading-row"
            height="15"
            width="50"
          />
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Fee 
          </div>
          <div
            class="c5"
            data-testid="loading-row"
            height="15"
            width="50"
          />
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c4 css-142zc9n"
            data-testid="swap-li-label"
          >
            Receive at least
          </div>
          <div
            class="c6"
            data-testid="loading-row"
            height="15"
            width="70"
          />
        </div>
      </div>
      <div>
        <div
          class="c0 c1 c2"
        >
          <div
            class="c3 c7 css-142zc9n"
            data-testid="swap-li-label"
          >
            Order routing
          </div>
          <div
            class="c5"
            data-testid="loading-row"
            height="15"
            width="50"
          />
        </div>
      </div>
    </span>
  </span>
</DocumentFragment>
`;
