// 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;
}

.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;
}

.c7 {
  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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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);
}

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

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

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {

}

<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="c0 c7"
            >
              <svg
                aria-labelledby="titleID"
                height="16"
                width="16"
              >
                <title
                  id="titleID"
                >
                  Ethereum logo
                </title>
                <rect
                  fill="#F9F9F9"
                  height="16"
                  rx="4"
                  width="16"
                />
                <rect
                  fill="#6B8AFF33"
                  height="16"
                  rx="4"
                  width="16"
                />
                <svg
                  height="16"
                  width="16"
                >
                  ethereum.svg
                </svg>
              </svg>
              $0
            </div>
          </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>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {

}

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {

}

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {

}

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c7 {
  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: 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;
}

.c3 {
  color: #222222;
}

.c12 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

.c9 {
  color: #4673fa;
}

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c13 {
  display: inline;
}

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

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

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

<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="c7 c8"
              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="c9"
              >
                <div
                  class="c3 css-142zc9n"
                >
                  Uniswap X
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c12 css-obwv3p"
          >
            <div
              class="c12 css-obwv3p"
            >
              <div
                class="c9 c13"
              >
                UniswapX
              </div>
               aggregates liquidity sources for better prices and gas free swaps. 
              <a
                class="c14"
                href="https://support.uniswap.org/hc/en-us/articles/17515415311501"
                rel="noopener noreferrer"
                target="_blank"
              >
                Learn more
              </a>
            </div>
          </div>
        </div>
        <div
          class="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact input 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;
}

.c7 {
  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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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);
}

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

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

<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="c0 c7"
            >
              <svg
                aria-labelledby="titleID"
                height="16"
                width="16"
              >
                <title
                  id="titleID"
                >
                  Ethereum logo
                </title>
                <rect
                  fill="#F9F9F9"
                  height="16"
                  rx="4"
                  width="16"
                />
                <rect
                  fill="#6B8AFF33"
                  height="16"
                  rx="4"
                  width="16"
                />
                <svg
                  height="16"
                  width="16"
                >
                  ethereum.svg
                </svg>
              </svg>
              $1.00
            </div>
          </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>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </div>
      <div
        class="c5"
      >
        <div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <span
              class=""
            >
              ~-105566.373%
            </span>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The impact your trade has on the market price of this pool.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  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;
}

.c24 {
  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;
}

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

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

.c3 {
  color: #222222;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c31::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

.c30 {
  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);
}

.c10 {
  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;
}

.c19 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #000;
  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;
}

.c15 {
  opacity: 0;
  -webkit-transition: opacity 250ms ease-in;
  transition: opacity 250ms ease-in;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c14 {
  width: 20px;
  height: 20px;
  background: #22222212;
  -webkit-transition: background-color 250ms ease-in;
  transition: background-color 250ms ease-in;
  box-shadow: 0 0 1px white;
  border-radius: 50%;
}

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

.c27 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.c28 {
  z-index: 1;
}

.c29 {
  position: absolute;
  left: -10px !important;
}

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

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

.c16 {
  -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;
}

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

.c17 {
  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;
}

.c18 path {
  stroke: #22222212;
}

.c20 {
  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;
}

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

.c22 {
  word-break: normal;
}

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

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

<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="css-142zc9n"
            >
              Uniswap Client
            </div>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            <div
              class="c10"
            >
              <div
                class="c11 css-vurnku"
              >
                <div
                  class="c0 c1 c12"
                >
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="ABC logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                  <div
                    class="c0 c1 c16"
                  >
                    <div
                      class="c17"
                    >
                      <svg
                        class="c18"
                      >
                        dot_line.svg
                      </svg>
                    </div>
                    <div
                      class="c19 c20"
                    >
                      <div
                        class="c19 c21"
                      >
                        <div
                          class="c3 c22 css-1m65e73"
                        >
                          V3
                        </div>
                      </div>
                      <div
                        class="c9 c22 css-1m65e73"
                        style="min-width: auto;"
                      >
                        100%
                      </div>
                    </div>
                    <div
                      class="c23 c24 c25"
                      style="justify-content: space-evenly; z-index: 2;"
                      width="100%"
                    >
                      <div
                        class="c5"
                      >
                        <div>
                          <div
                            class="c19 c26"
                          >
                            <div
                              class="css-mbnpt3"
                            >
                              <div
                                class="c27"
                              >
                                <div
                                  class="c28"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="DEF logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="c29"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="ABC logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="c9 c22 css-1m65e73"
                            >
                              1%
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="c7"
                        style="position: fixed; left: 0px; top: 0px;"
                      >
                        <div
                          class="c30"
                        >
                          ABC/DEF 1% pool
                        </div>
                        <div
                          class="c31 arrow-"
                          style="position: absolute;"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="DEF logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c9 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="c31 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact input api 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;
}

.c7 {
  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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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);
}

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

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

<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="c0 c7"
            >
              <svg
                aria-labelledby="titleID"
                height="16"
                width="16"
              >
                <title
                  id="titleID"
                >
                  Ethereum logo
                </title>
                <rect
                  fill="#F9F9F9"
                  height="16"
                  rx="4"
                  width="16"
                />
                <rect
                  fill="#6B8AFF33"
                  height="16"
                  rx="4"
                  width="16"
                />
                <svg
                  height="16"
                  width="16"
                >
                  ethereum.svg
                </svg>
              </svg>
              $1.00
            </div>
          </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>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </div>
      <div
        class="c5"
      >
        <div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <span
              class=""
            >
              ~-105566.373%
            </span>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The impact your trade has on the market price of this pool.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  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;
}

.c24 {
  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;
}

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

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

.c3 {
  color: #222222;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c31::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

.c30 {
  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);
}

.c10 {
  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;
}

.c19 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #000;
  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;
}

.c15 {
  opacity: 0;
  -webkit-transition: opacity 250ms ease-in;
  transition: opacity 250ms ease-in;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c14 {
  width: 20px;
  height: 20px;
  background: #22222212;
  -webkit-transition: background-color 250ms ease-in;
  transition: background-color 250ms ease-in;
  box-shadow: 0 0 1px white;
  border-radius: 50%;
}

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

.c27 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.c28 {
  z-index: 1;
}

.c29 {
  position: absolute;
  left: -10px !important;
}

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

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

.c16 {
  -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;
}

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

.c17 {
  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;
}

.c18 path {
  stroke: #22222212;
}

.c20 {
  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;
}

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

.c22 {
  word-break: normal;
}

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

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

<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="css-142zc9n"
            >
              Uniswap API
            </div>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            <div
              class="c10"
            >
              <div
                class="c11 css-vurnku"
              >
                <div
                  class="c0 c1 c12"
                >
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="ABC logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                  <div
                    class="c0 c1 c16"
                  >
                    <div
                      class="c17"
                    >
                      <svg
                        class="c18"
                      >
                        dot_line.svg
                      </svg>
                    </div>
                    <div
                      class="c19 c20"
                    >
                      <div
                        class="c19 c21"
                      >
                        <div
                          class="c3 c22 css-1m65e73"
                        >
                          V3
                        </div>
                      </div>
                      <div
                        class="c9 c22 css-1m65e73"
                        style="min-width: auto;"
                      >
                        100%
                      </div>
                    </div>
                    <div
                      class="c23 c24 c25"
                      style="justify-content: space-evenly; z-index: 2;"
                      width="100%"
                    >
                      <div
                        class="c5"
                      >
                        <div>
                          <div
                            class="c19 c26"
                          >
                            <div
                              class="css-mbnpt3"
                            >
                              <div
                                class="c27"
                              >
                                <div
                                  class="c28"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="DEF logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="c29"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="ABC logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="c9 c22 css-1m65e73"
                            >
                              1%
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="c7"
                        style="position: fixed; left: 0px; top: 0px;"
                      >
                        <div
                          class="c30"
                        >
                          ABC/DEF 1% pool
                        </div>
                        <div
                          class="c31 arrow-"
                          style="position: absolute;"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="DEF logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c9 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="c31 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx exact output 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;
}

.c7 {
  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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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);
}

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

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

<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="c0 c7"
            >
              <svg
                aria-labelledby="titleID"
                height="16"
                width="16"
              >
                <title
                  id="titleID"
                >
                  Ethereum logo
                </title>
                <rect
                  fill="#F9F9F9"
                  height="16"
                  rx="4"
                  width="16"
                />
                <rect
                  fill="#6B8AFF33"
                  height="16"
                  rx="4"
                  width="16"
                />
                <svg
                  height="16"
                  width="16"
                >
                  ethereum.svg
                </svg>
              </svg>
              -
            </div>
          </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>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </div>
      <div
        class="c5"
      >
        <div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <span
              class=""
            >
              ~-105566.373%
            </span>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The impact your trade has on the market price of this pool.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The maximum amount you are guaranteed to spend. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  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;
}

.c24 {
  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;
}

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

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

.c3 {
  color: #222222;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c31::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

.c30 {
  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);
}

.c10 {
  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;
}

.c19 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #000;
  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;
}

.c15 {
  opacity: 0;
  -webkit-transition: opacity 250ms ease-in;
  transition: opacity 250ms ease-in;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c14 {
  width: 20px;
  height: 20px;
  background: #22222212;
  -webkit-transition: background-color 250ms ease-in;
  transition: background-color 250ms ease-in;
  box-shadow: 0 0 1px white;
  border-radius: 50%;
}

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

.c27 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.c28 {
  z-index: 1;
}

.c29 {
  position: absolute;
  left: -10px !important;
}

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

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

.c16 {
  -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;
}

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

.c17 {
  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;
}

.c18 path {
  stroke: #22222212;
}

.c20 {
  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;
}

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

.c22 {
  word-break: normal;
}

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

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

<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="css-142zc9n"
            >
              Uniswap Client
            </div>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            <div
              class="c10"
            >
              <div
                class="c11 css-vurnku"
              >
                <div
                  class="c0 c1 c12"
                >
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="ABC logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                  <div
                    class="c0 c1 c16"
                  >
                    <div
                      class="c17"
                    >
                      <svg
                        class="c18"
                      >
                        dot_line.svg
                      </svg>
                    </div>
                    <div
                      class="c19 c20"
                    >
                      <div
                        class="c19 c21"
                      >
                        <div
                          class="c3 c22 css-1m65e73"
                        >
                          V3
                        </div>
                      </div>
                      <div
                        class="c9 c22 css-1m65e73"
                        style="min-width: auto;"
                      >
                        100%
                      </div>
                    </div>
                    <div
                      class="c23 c24 c25"
                      style="justify-content: space-evenly; z-index: 2;"
                      width="100%"
                    >
                      <div
                        class="c5"
                      >
                        <div>
                          <div
                            class="c19 c26"
                          >
                            <div
                              class="css-mbnpt3"
                            >
                              <div
                                class="c27"
                              >
                                <div
                                  class="c28"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="GHI logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="c29"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="ABC logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="c9 c22 css-1m65e73"
                            >
                              0.3%
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="c7"
                        style="position: fixed; left: 0px; top: 0px;"
                      >
                        <div
                          class="c30"
                        >
                          ABC/GHI 0.3% pool
                        </div>
                        <div
                          class="c31 arrow-"
                          style="position: absolute;"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="GHI logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000003/logo.png"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c9 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="c31 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx fee on buy 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;
}

.c7 {
  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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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);
}

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

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

<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="c0 c7"
            >
              <svg
                aria-labelledby="titleID"
                height="16"
                width="16"
              >
                <title
                  id="titleID"
                >
                  Ethereum logo
                </title>
                <rect
                  fill="#F9F9F9"
                  height="16"
                  rx="4"
                  width="16"
                />
                <rect
                  fill="#6B8AFF33"
                  height="16"
                  rx="4"
                  width="16"
                />
                <svg
                  height="16"
                  width="16"
                >
                  ethereum.svg
                </svg>
              </svg>
              $1.00
            </div>
          </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>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 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="c10"
              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="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </div>
      <div
        class="c5"
      >
        <div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <span
              class=""
            >
              ~-108834.406%
            </span>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The impact your trade has on the market price of this pool.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  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;
}

.c24 {
  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;
}

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

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

.c3 {
  color: #222222;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c31::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

.c30 {
  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);
}

.c10 {
  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;
}

.c19 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #000;
  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;
}

.c15 {
  opacity: 0;
  -webkit-transition: opacity 250ms ease-in;
  transition: opacity 250ms ease-in;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c14 {
  width: 20px;
  height: 20px;
  background: #22222212;
  -webkit-transition: background-color 250ms ease-in;
  transition: background-color 250ms ease-in;
  box-shadow: 0 0 1px white;
  border-radius: 50%;
}

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

.c27 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.c28 {
  z-index: 1;
}

.c29 {
  position: absolute;
  left: -10px !important;
}

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

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

.c16 {
  -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;
}

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

.c17 {
  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;
}

.c18 path {
  stroke: #22222212;
}

.c20 {
  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;
}

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

.c22 {
  word-break: normal;
}

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

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

<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="css-142zc9n"
            >
              Uniswap API
            </div>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            <div
              class="c10"
            >
              <div
                class="c11 css-vurnku"
              >
                <div
                  class="c0 c1 c12"
                >
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="ABC logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                  <div
                    class="c0 c1 c16"
                  >
                    <div
                      class="c17"
                    >
                      <svg
                        class="c18"
                      >
                        dot_line.svg
                      </svg>
                    </div>
                    <div
                      class="c19 c20"
                    >
                      <div
                        class="c19 c21"
                      >
                        <div
                          class="c3 c22 css-1m65e73"
                        >
                          V3
                        </div>
                      </div>
                      <div
                        class="c9 c22 css-1m65e73"
                        style="min-width: auto;"
                      >
                        100%
                      </div>
                    </div>
                    <div
                      class="c23 c24 c25"
                      style="justify-content: space-evenly; z-index: 2;"
                      width="100%"
                    >
                      <div
                        class="c5"
                      >
                        <div>
                          <div
                            class="c19 c26"
                          >
                            <div
                              class="css-mbnpt3"
                            >
                              <div
                                class="c27"
                              >
                                <div
                                  class="c28"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="DEF logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="c29"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="ABC logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="c9 c22 css-1m65e73"
                            >
                              1%
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="c7"
                        style="position: fixed; left: 0px; top: 0px;"
                      >
                        <div
                          class="c30"
                        >
                          ABC/DEF 1% pool
                        </div>
                        <div
                          class="c31 arrow-"
                          style="position: absolute;"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="DEF logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c9 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="c31 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`SwapLineItem.tsx fee on sell 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;
}

.c7 {
  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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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);
}

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

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

<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="c0 c7"
            >
              <svg
                aria-labelledby="titleID"
                height="16"
                width="16"
              >
                <title
                  id="titleID"
                >
                  Ethereum logo
                </title>
                <rect
                  fill="#F9F9F9"
                  height="16"
                  rx="4"
                  width="16"
                />
                <rect
                  fill="#6B8AFF33"
                  height="16"
                  rx="4"
                  width="16"
                />
                <svg
                  height="16"
                  width="16"
                >
                  ethereum.svg
                </svg>
              </svg>
              $1.00
            </div>
          </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>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 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="c10"
              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="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </div>
      <div
        class="c5"
      >
        <div>
          <div
            class="c3 c6 css-142zc9n"
          >
            <span
              class=""
            >
              ~-108834.406%
            </span>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The impact your trade has on the market price of this pool.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

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

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c7 {
  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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            This fee is applied on select token pairs to ensure the best experience with Uniswap. There is no fee associated with this swap. 
            <a
              class="c10"
              href="https://support.uniswap.org/hc/en-us/articles/20131678274957"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn more
            </a>
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  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;
}

.c24 {
  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;
}

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

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

.c3 {
  color: #222222;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c31::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

.c30 {
  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);
}

.c10 {
  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;
}

.c19 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #F9F9F9;
  border: unset;
  border-radius: 0.5rem;
  color: #000;
  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;
}

.c15 {
  opacity: 0;
  -webkit-transition: opacity 250ms ease-in;
  transition: opacity 250ms ease-in;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.c14 {
  width: 20px;
  height: 20px;
  background: #22222212;
  -webkit-transition: background-color 250ms ease-in;
  transition: background-color 250ms ease-in;
  box-shadow: 0 0 1px white;
  border-radius: 50%;
}

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

.c27 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.c28 {
  z-index: 1;
}

.c29 {
  position: absolute;
  left: -10px !important;
}

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

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

.c16 {
  -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;
}

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

.c17 {
  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;
}

.c18 path {
  stroke: #22222212;
}

.c20 {
  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;
}

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

.c22 {
  word-break: normal;
}

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

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

<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="css-142zc9n"
            >
              Uniswap API
            </div>
          </div>
        </div>
      </div>
      <div
        class="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            <div
              class="c10"
            >
              <div
                class="c11 css-vurnku"
              >
                <div
                  class="c0 c1 c12"
                >
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="ABC logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                      />
                    </div>
                  </div>
                  <div
                    class="c0 c1 c16"
                  >
                    <div
                      class="c17"
                    >
                      <svg
                        class="c18"
                      >
                        dot_line.svg
                      </svg>
                    </div>
                    <div
                      class="c19 c20"
                    >
                      <div
                        class="c19 c21"
                      >
                        <div
                          class="c3 c22 css-1m65e73"
                        >
                          V3
                        </div>
                      </div>
                      <div
                        class="c9 c22 css-1m65e73"
                        style="min-width: auto;"
                      >
                        100%
                      </div>
                    </div>
                    <div
                      class="c23 c24 c25"
                      style="justify-content: space-evenly; z-index: 2;"
                      width="100%"
                    >
                      <div
                        class="c5"
                      >
                        <div>
                          <div
                            class="c19 c26"
                          >
                            <div
                              class="css-mbnpt3"
                            >
                              <div
                                class="c27"
                              >
                                <div
                                  class="c28"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="DEF logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  class="c29"
                                >
                                  <div
                                    class="c13"
                                    style="height: 20px; width: 20px;"
                                  >
                                    <div
                                      class="c14"
                                    >
                                      <img
                                        alt="ABC logo"
                                        class="c15"
                                        loading="lazy"
                                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000001/logo.png"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div
                              class="c9 c22 css-1m65e73"
                            >
                              1%
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="c7"
                        style="position: fixed; left: 0px; top: 0px;"
                      >
                        <div
                          class="c30"
                        >
                          ABC/DEF 1% pool
                        </div>
                        <div
                          class="c31 arrow-"
                          style="position: absolute;"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="c13"
                    style="height: 20px; width: 20px;"
                  >
                    <div
                      class="c14"
                    >
                      <img
                        alt="DEF logo"
                        class="c15"
                        loading="lazy"
                        src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x0000000000000000000000000000000000000002/logo.png"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c9 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="c31 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
</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;
}

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

.c3 {
  color: #222222;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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;
}

.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);
}

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

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

<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>
  .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;
}

.c10 {
  color: #7D7D7D;
}

.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;
}

.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;
}

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

.c11::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;
}

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

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

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

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

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

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

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

.c11.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);
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </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"
          >
            The impact your trade has on the market price of this pool.
          </div>
        </div>
        <div
          class="c11 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.c7 {
  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;
}

.c8 {
  color: #7D7D7D;
}

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

.c14:hover {
  opacity: 0.6;
}

.c14:active {
  opacity: 0.4;
}

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

.c10 {
  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;
}

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

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

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

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

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

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

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

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

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

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

.c11 {
  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);
}

.c12 {
  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;
}

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

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

.c9 {
  background: #22222212;
  border-radius: 8px;
  color: #7D7D7D;
  height: 20px;
  padding: 0 6px;
}

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

<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 c7"
            >
              <div
                class="c8 c9 css-1lgneq0"
              />
               2%
            </div>
          </div>
        </div>
      </div>
      <div
        class="c10"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c11"
        >
          <div
            class="c8 css-obwv3p"
          >
            <div
              class="c12"
            >
              <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="c13"
              />
              <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="c14"
                  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="c15 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.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: 50px;
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Fee
      </div>
      <div
        class="c3 c5 css-142zc9n"
      >
        <div
          class="c6"
          data-testid="loading-row"
          height="15"
          width="50"
        />
      </div>
    </div>
  </div>
  .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;
}

.c9 {
  color: #7D7D7D;
}

.c7 {
  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;
}

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

.c10::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;
}

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

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

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

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

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

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

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

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

.c8 {
  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);
}

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

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

<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="c7"
        style="position: fixed; left: 0px; top: 0px;"
      >
        <div
          class="c8"
        >
          <div
            class="c9 css-obwv3p"
          >
            The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.
          </div>
        </div>
        <div
          class="c10 arrow-"
          style="position: absolute;"
        />
      </div>
    </div>
  </div>
  .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;
}

.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: 50px;
}

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

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Order routing
      </div>
      <div
        class="c3 c5 css-142zc9n"
      >
        <div
          class="c6"
          data-testid="loading-row"
          height="15"
          width="50"
        />
      </div>
    </div>
  </div>
</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;
}

.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;
}

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

<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>
  .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;
}

.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;
}

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Price impact
      </div>
      <div
        class="c5"
        data-testid="loading-row"
        height="15"
        width="50"
      />
    </div>
  </div>
  .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;
}

.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;
}

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

<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>
  .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;
}

.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;
}

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

<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>
  .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;
}

.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: 70px;
}

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Receive at least
      </div>
      <div
        class="c5"
        data-testid="loading-row"
        height="15"
        width="70"
      />
    </div>
  </div>
  .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;
}

.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;
}

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

<div>
    <div
      class="c0 c1 c2"
    >
      <div
        class="c3 c4 css-142zc9n"
        data-testid="swap-li-label"
      >
        Order routing
      </div>
      <div
        class="c5"
        data-testid="loading-row"
        height="15"
        width="50"
      />
    </div>
  </div>
</DocumentFragment>
`;
