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

exports[`PoolDetailsStatsButton loading skeleton shown correctly 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;
}

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

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

.c2 {
  gap: 12px;
  z-index: 1;
}

.c6 {
  height: 44px;
  width: 175px;
  border-radius: 900px;
}

.c4 {
  gap: 2px;
  display: none;
}

@media (max-width:1024px) {
  .c2 {
    gap: 8px;
    position: fixed;
    bottom: 0px;
    left: 0;
    margin: 8px;
    width: calc(100% - 16px);
    background: #FFFFFF;
    padding: 12px 32px;
    border: 1px solid #22222212;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1020;
  }

  .c2 > :first-child {
    margin-right: auto;
  }
}

@media (max-width:768px) {
  .c2 {
    bottom: 56px;
  }
}

@media (max-width:1024px) {
  .c4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0 c1 c2"
          data-testid="pdp-buttons-loading-skeleton"
        >
          <div
            class="c3 c4"
          >
            <div
              class="c5 c6"
            />
          </div>
          <div
            class="c5 c6"
          />
          <div
            class="c5 c6"
          />
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;

exports[`PoolDetailsStatsButton renders both buttons correctly 1`] = `
<DocumentFragment>
  .c1 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c36 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: primary;
  border: 0;
  border-radius: 4px;
}

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

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

.c19 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

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

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

.c9 {
  color: #CECECE;
  -webkit-letter-spacing: -0.01em;
  -moz-letter-spacing: -0.01em;
  -ms-letter-spacing: -0.01em;
  letter-spacing: -0.01em;
}

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

.c22 {
  outline: none;
  border: none;
  font-size: inherit;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: opacity,color,background-color;
  transition-property: opacity,color,background-color;
}

.c22:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.c38 {
  padding: 16px;
  width: 100%;
  line-height: 24px;
  font-weight: 535;
  text-align: center;
  border-radius: 16px;
  outline: none;
  border: 1px solid transparent;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  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;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  will-change: transform;
  -webkit-transition: -webkit-transform 450ms ease;
  -webkit-transition: transform 450ms ease;
  transition: transform 450ms ease;
  -webkit-transform: perspective(1px) translateZ(0);
  -ms-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}

.c38:disabled {
  opacity: 50%;
  cursor: auto;
  pointer-events: none;
}

.c38 > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c38 > a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c51 {
  background-color: #FC72FF;
  font-size: 20px;
  font-weight: 535;
  padding: 16px;
  color: #FFFFFF;
}

.c51:focus {
  box-shadow: 0 0 0 1pt #fb58ff;
  background-color: #fb58ff;
}

.c51:hover {
  background-color: #fb58ff;
}

.c51:active {
  box-shadow: 0 0 0 1pt #fb3fff;
  background-color: #fb3fff;
}

.c51:disabled {
  background-color: #22222212;
  color: #7D7D7D;
  cursor: auto;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

.c39 {
  background-color: #FFFFFF;
  color: #7D7D7D;
  border: 1px solid #22222212;
  font-size: 16px;
  font-weight: 535;
}

.c39:hover {
  background-color: #ececec;
}

.c39:active {
  background-color: #e0e0e0;
}

.c0 {
  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: 24px;
}

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

.c49 {
  display: grid;
  grid-auto-rows: auto;
  grid-row-gap: 4px;
}

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

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

.c53 {
  z-index: 1020;
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.60);
  opacity: 0;
  pointer-events: none;
}

.c33 {
  color: #222222;
  pointer-events: auto;
  width: 0;
  position: relative;
  font-weight: 485;
  outline: none;
  border: none;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: transparent;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px;
  -webkit-appearance: textfield;
  text-align: right;
}

.c33::-webkit-search-decoration {
  -webkit-appearance: none;
}

.c33 [type='number'] {
  -moz-appearance: textfield;
}

.c33::-webkit-outer-spin-button,
.c33::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.c33::-webkit-input-placeholder {
  color: #CECECE;
}

.c33::-moz-placeholder {
  color: #CECECE;
}

.c33:-ms-input-placeholder {
  color: #CECECE;
}

.c33::placeholder {
  color: #CECECE;
}

.c34 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
  text-align: left;
  font-size: 36px;
  font-weight: 485;
  max-height: 44px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  position: relative;
  border-radius: 20px;
  z-index: 1;
  width: initial;
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
  will-change: height;
}

.c31 {
  min-height: 44px;
  border-radius: 20px;
  width: initial;
}

.c40 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FFFFFF;
  opacity: 1;
  color: #222222;
  cursor: pointer;
  height: 36px;
  border-radius: 18px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #22222212;
  font-size: 24px;
  font-weight: 485;
  width: initial;
  padding: 4px 8px 4px 4px;
  gap: 8px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 12px;
  box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04);
  visibility: visible;
  -webkit-animation: none;
  animation: none;
}

.c40:hover,
.c40:active {
  background-color: #F9F9F9;
}

.c40:before {
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.c40:hover:before {
  background-color: #98A1C014;
}

.c40:active:before {
  background-color: #B8C0DC3d;
}

.c32 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 4px;
}

.c44 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #7D7D7D;
  font-size: 0.75rem;
  line-height: 1rem;
}

.c44 span:hover {
  cursor: pointer;
  color: #4a4a4a;
}

.c45 {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height: 24px;
  padding: 8px 0px 0px 0px;
}

.c41 {
  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;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.c43 {
  margin: 0 0.25rem 0 0.35rem;
  height: 35%;
  margin-left: 8px;
}

.c43 path {
  stroke: #222222;
  stroke-width: 2px;
}

.c42 {
  margin: 0 0.25rem 0 0.25rem;
  font-size: 20px;
  font-weight: 535;
}

.c15 {
  position: relative;
  z-index: 1;
  -webkit-transition: -webkit-transform 250ms ease;
  -webkit-transition: transform 250ms ease;
  transition: transform 250ms ease;
  border-radius: 24px;
}

.c16 {
  border-radius: 24px;
  z-index: -1;
}

.c47 {
  border-radius: 12px;
  height: 40px;
  width: 40px;
  position: relative;
  margin-top: -18px;
  margin-bottom: -18px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F9F9F9;
  border: 4px solid;
  border-color: #FFFFFF;
  z-index: 2;
}

.c47:hover {
  cursor: pointer;
  opacity: 0.8;
}

.c29 {
  background-color: #F9F9F9;
  border-radius: 16px;
  color: #7D7D7D;
  font-size: 14px;
  font-weight: 500;
  height: 120px;
  line-height: 20px;
  padding: 16px;
  position: relative;
}

.c29:before {
  box-sizing: border-box;
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: '';
  border: 1px solid #F9F9F9;
}

.c29:hover:before {
  border-color: #98A1C014;
}

.c29:focus-within:before {
  border-color: #B8C0DC3d;
}

.c50 {
  border-bottom: 1px solid #FFFFFF;
}

.c48 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.c23 {
  color: #222222;
  background-color: #22222212;
  padding: 8px 16px;
  border-radius: 20px;
  gap: 4px;
  font-weight: 485;
}

.c23:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c23:active {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c24 {
  color: #7D7D7D;
  padding: 8px 16px;
  border-radius: 20px;
  gap: 4px;
  font-weight: 485;
}

.c24:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c24:active {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c28 {
  height: 24px;
  width: 24px;
}

.c28 > * {
  fill: #7D7D7D;
}

.c26 {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.c26:not([disabled]):hover {
  opacity: 0.7;
}

.c27 {
  padding: 6px 12px;
  border-radius: 16px;
}

.c25 {
  position: relative;
}

.c18 {
  margin-bottom: 12px;
  padding-right: 4px;
  color: #7D7D7D;
}

.c20 {
  gap: 0px;
}

.c20 .c21 {
  padding: 8px 12px;
}

.c3 {
  gap: 12px;
  z-index: 1;
}

.c10 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 12px 16px 12px 12px;
  border: unset;
  border-radius: 900px;
  width: 50%;
  gap: 8px;
  color: #FC72FF;
  background-color: #FC72FF1f;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
}

.c10:hover {
  opacity: 0.6;
}

.c10:active {
  opacity: 0.4;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 12px 16px 12px 12px;
  border: unset;
  border-radius: 900px;
  width: 50%;
  gap: 8px;
  color: #FC72FF;
  background-color: #FC72FF1f;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
}

.c12:hover {
  opacity: 0.6;
}

.c12:active {
  opacity: 0.4;
}

.c13 {
  z-index: 0;
  gap: 24px;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  -webkit-transition: max-height 250ms ease;
  transition: max-height 250ms ease;
  padding-bottom: 0;
}

.c13 .c14:before {
  background-color: unset;
}

.c13 .c37 {
  visibility: hidden;
}

.c5 {
  gap: 2px;
  display: none;
}

@media (hover:hover) and (pointer:fine) {
  .c22:hover {
    opacity: 0.6;
  }
}

@media (max-width:720px) {
  .c52 {
    display: none;
  }
}

@media only screen and (max-width:1024px) {
  .c53 {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  }
}

@media (max-width:1024px) {
  .c3 {
    gap: 8px;
    position: fixed;
    bottom: 0px;
    left: 0;
    margin: 8px;
    width: calc(100% - 16px);
    background: #FFFFFF;
    padding: 12px 32px;
    border: 1px solid #22222212;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1020;
  }

  .c3 > :first-child {
    margin-right: auto;
  }
}

@media (max-width:768px) {
  .c3 {
    bottom: 56px;
  }
}

@media (max-width:1024px) {
  .c10 {
    width: 120px;
  }
}

@media (max-width:640px) {

}

@media (max-width:1024px) {
  .c12 {
    width: 120px;
  }
}

@media (max-width:640px) {
  .c12 {
    display: none;
  }
}

@media (max-width:1024px) {
  .c13 {
    position: fixed;
    width: calc(100% - 16px);
    padding: 0px 12px 12px;
    border-radius: 24px;
    max-width: 480px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1030;
    background: #FFFFFF;
    -webkit-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
  }
}

@media (max-width:1024px) {
  .c5 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

<span
    class=""
    style="display: contents;"
  >
    <span
      class=" _dsp_contents"
    >
      <span
        class=" t_light _dsp_contents is_Theme"
      >
        <div
          class="c0"
        >
          <div
            class="c1 c2 c3"
          >
            <div
              class="c4 c5"
            >
              <div
                class="c6 css-142zc9n"
              >
                Your balances
              </div>
              <div
                class="c1 c7"
              >
                <div
                  class="c8 css-1jyz67g"
                >
                  0 USDC
                </div>
                <div
                  class="c9 css-1jyz67g"
                >
                  |
                </div>
                <div
                  class="c8 css-1jyz67g"
                >
                  0 WETH
                </div>
              </div>
            </div>
            <button
              class="c10"
              data-testid="pool-details-swap-button"
            >
              <div
                class="c11 css-1guhfcl"
              >
                Swap
              </div>
            </button>
            <button
              class="c12"
              data-testid="pool-details-add-liquidity-button"
            >
              <div
                class="c11 css-1guhfcl"
              >
                Add liquidity
              </div>
            </button>
          </div>
          <div
            class="c4 c13"
            data-testid="pool-details-swap-modal"
          >
            <div
              class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _width-10037 _gap-1481558183"
            >
              <main
                class="c14 c15"
                id="swap-page"
              >
                <div
                  class="c16"
                >
                  <div
                    class="c1 c2 c17 c18"
                  >
                    <div
                      class="c1 c2 c19 c20"
                    >
                      <h1
                        class="c21 c22 c23"
                        role="button"
                        tabindex="0"
                      >
                        Swap
                      </h1>
                      <button
                        class="c21 c22 c24"
                      >
                        Limit
                      </button>
                      <button
                        class="c21 c22 c24"
                      >
                        Send
                      </button>
                      <button
                        class="c21 c22 c24"
                      >
                        Buy
                      </button>
                    </div>
                    <div
                      class="c1 c2 c19"
                    >
                      <div
                        class="c25"
                      >
                        <button
                          aria-label="Transaction Settings"
                          class="c26"
                          data-testid="open-settings-dialog-button"
                          id="open-settings-dialog-button"
                        >
                          <div
                            class="c1 c2 c27"
                          >
                            <svg
                              class="c28"
                              fill="none"
                              height="24"
                              viewBox="0 0 24 24"
                              width="24"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
                                fill="currentColor"
                              />
                            </svg>
                          </div>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div
                    style="display: relative;"
                  >
                    <div
                      class="c29"
                    >
                      <div
                        class="c30"
                        id="swap-currency-input"
                      >
                        <div
                          class="c31"
                        >
                          <span
                            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _fontSize-229441158 _lineHeight-222976511 _fontWeight-233016202 _userSelect-none"
                            data-disable-theme="true"
                          >
                            Sell
                          </span>
                          <div
                            class="c32"
                          >
                            <div
                              style="display: flex; flex-grow: 1;"
                            >
                              <input
                                autocomplete="off"
                                autocorrect="off"
                                class="c33 c34 token-amount-input"
                                id="swap-currency-input"
                                inputmode="decimal"
                                maxlength="79"
                                minlength="1"
                                pattern="^[0-9]*[.,]?[0-9]*$"
                                placeholder="0"
                                spellcheck="false"
                                type="text"
                                value=""
                              />
                            </div>
                            <div>
                              <div
                                class="c35"
                              >
                                <button
                                  class="c36 c37 c38 c39 c40 open-currency-select-button"
                                  data-testid="currency-1-USDC"
                                >
                                  <span
                                    class="c41"
                                  >
                                    <div
                                      class="c1 c2 c19"
                                    >
                                      <div
                                        class="css-view-175oi2r"
                                        style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: row; opacity: 0;"
                                      >
                                        <span
                                          class="c42 token-symbol-container"
                                        >
                                          USDC
                                        </span>
                                      </div>
                                    </div>
                                    <svg
                                      class="c43"
                                    >
                                      dropdown.svg
                                    </svg>
                                  </span>
                                </button>
                              </div>
                            </div>
                          </div>
                          <div
                            class="c44 c45"
                          >
                            <div
                              class="c1 c2 c17"
                            >
                              <div
                                class="c46"
                              />
                              <div
                                class="c1 c2 c19"
                                style="height: 16px;"
                              >
                                <div
                                  class="c11 css-142zc9n"
                                  data-testid="balance-text"
                                  style="display: inline;"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <span
                          class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _position-absolute _width-1px _height-1px _mt--1px _mr--1px _mb--1px _ml--1px _zIndex--10000 _overflowX-hidden _overflowY-hidden _opacity-1e-8 _pointerEvents-none"
                        >
                          <h2
                            class="is_DialogTitle font_heading _display-inline _boxSizing-border-box _wordWrap-break-word _color-675002279 _fontFamily-299667014 _fontWeight-233016078 _fontSize-229441158 _lineHeight-222976511 _userSelect-auto _whiteSpace-normal _mt-0px _mr-0px _mb-0px _ml-0px"
                            data-disable-theme="true"
                            id="title-:r4:"
                            role="heading"
                          />
                        </span>
                      </div>
                    </div>
                    <div
                      class="c47"
                    >
                      <div
                        class="c48"
                        color="#222222"
                        data-testid="swap-currency-button"
                      >
                        <svg
                          fill="none"
                          height="16"
                          stroke="#222222"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          viewBox="0 0 24 24"
                          width="16"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <line
                            x1="12"
                            x2="12"
                            y1="5"
                            y2="19"
                          />
                          <polyline
                            points="19 12 12 19 5 12"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="c49"
                  >
                    <div>
                      <div
                        class="c29 c50"
                      >
                        <div
                          class="c30"
                          id="swap-currency-output"
                        >
                          <div
                            class="c31"
                          >
                            <span
                              class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _fontSize-229441158 _lineHeight-222976511 _fontWeight-233016202 _userSelect-none"
                              data-disable-theme="true"
                            >
                              Buy
                            </span>
                            <div
                              class="c32"
                            >
                              <div
                                style="display: flex; flex-grow: 1;"
                              >
                                <input
                                  autocomplete="off"
                                  autocorrect="off"
                                  class="c33 c34 token-amount-input"
                                  id="swap-currency-output"
                                  inputmode="decimal"
                                  maxlength="79"
                                  minlength="1"
                                  pattern="^[0-9]*[.,]?[0-9]*$"
                                  placeholder="0"
                                  spellcheck="false"
                                  type="text"
                                  value=""
                                />
                              </div>
                              <div>
                                <div
                                  class="c35"
                                >
                                  <button
                                    class="c36 c37 c38 c39 c40 open-currency-select-button"
                                    data-testid="currency-1-WETH"
                                  >
                                    <span
                                      class="c41"
                                    >
                                      <div
                                        class="c1 c2 c19"
                                      >
                                        <div
                                          class="css-view-175oi2r"
                                          style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: row; opacity: 0;"
                                        >
                                          <span
                                            class="c42 token-symbol-container"
                                          >
                                            WETH
                                          </span>
                                        </div>
                                      </div>
                                      <svg
                                        class="c43"
                                      >
                                        dropdown.svg
                                      </svg>
                                    </span>
                                  </button>
                                </div>
                              </div>
                            </div>
                            <div
                              class="c44 c45"
                            >
                              <div
                                class="c1 c2 c17"
                              >
                                <div
                                  class="c46"
                                />
                                <div
                                  class="c1 c2 c19"
                                  style="height: 16px;"
                                >
                                  <div
                                    class="c11 css-142zc9n"
                                    data-testid="balance-text"
                                    style="display: inline;"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                          <span
                            class="font_body _fontFamily-299667014 _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _position-absolute _width-1px _height-1px _mt--1px _mr--1px _mb--1px _ml--1px _zIndex--10000 _overflowX-hidden _overflowY-hidden _opacity-1e-8 _pointerEvents-none"
                          >
                            <h2
                              class="is_DialogTitle font_heading _display-inline _boxSizing-border-box _wordWrap-break-word _color-675002279 _fontFamily-299667014 _fontWeight-233016078 _fontSize-229441158 _lineHeight-222976511 _userSelect-auto _whiteSpace-normal _mt-0px _mr-0px _mb-0px _ml-0px"
                              data-disable-theme="true"
                              id="title-:rb:"
                              role="heading"
                            />
                          </span>
                        </div>
                      </div>
                    </div>
                    <div>
                      <button
                        class="c36 c38 c51"
                        data-testid="swap-button"
                        disabled=""
                        id="swap-button"
                      >
                        <span
                          class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-675002279 _fontFamily-299667014 _wordWrap-break-word _fontSize-20px _lineHeight-222976542 _fontWeight-233016202"
                          data-disable-theme="true"
                        >
                          Connecting wallet...
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </main>
              <div
                class="_textDecoration-_platformweb_none _transitionDuration-_platformweb_0d0t2s46 _opacity-0hover-0d0t846 _opacity-0active-0d0t646 _transform-0active-scale11281 _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _cursor-pointer"
              >
                <div
                  class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _flexGrow-1 _overflowX-hidden _overflowY-hidden _borderTopWidth-1481558369 _borderRightWidth-1481558369 _borderBottomWidth-1481558369 _borderLeftWidth-1481558369 _borderTopColor-d0t1462239119 _borderRightColor-d0t1462239119 _borderBottomColor-d0t1462239119 _borderLeftColor-d0t1462239119 _backgroundColor-568007324 _alignItems-center _pl-1481558400 _borderTopLeftRadius-1307610060 _borderTopRightRadius-1307610060 _borderBottomRightRadius-1307610060 _borderBottomLeftRadius-1307610060 _justifyContent-441309761 _width-10037 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                >
                  <div
                    class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _height-10037"
                  >
                    <div
                      class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
                      style="align-self: center; position: absolute; left: 0px; top: -50.918400000000005px; height: 99.84px; width: 32.32px;"
                    >
                      <div
                        class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
                        style="background-image: url(bridging-banner.png);"
                      />
                      <img
                        alt=""
                        class="css-accessibilityImage-9pa8cd"
                        draggable="false"
                        src="bridging-banner.png"
                      />
                    </div>
                  </div>
                  <div
                    class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _alignItems-center _pt-1481558214 _pr-1481558214 _pb-1481558214 _pl-1316330300"
                  >
                    <div
                      class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _flexGrow-1 _alignContent-center"
                    >
                      <div
                        class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center"
                      >
                        <span
                          class="font_subHeading _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843134974 _fontFamily-299667014 _wordWrap-break-word _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016140"
                          data-disable-theme="true"
                        >
                          Swapping across networks
                          <div
                            class="_alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _pt-1481558338 _display-1685637459"
                          >
                            <div
                              class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _ml-1481558276 _pr-1481558307 _pl-1481558307 _pb-1481558338 _pt-3px _backgroundColor-170210283 _borderTopLeftRadius-1307609936 _borderTopRightRadius-1307609936 _borderBottomRightRadius-1307609936 _borderBottomLeftRadius-1307609936 _alignItems-center"
                            >
                              <span
                                class="font_button _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-1637244180 _fontFamily-299667014 _wordWrap-break-word _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016109"
                                data-disable-theme="true"
                              >
                                New
                              </span>
                            </div>
                          </div>
                        </span>
                      </div>
                      <span
                        class="c52"
                      >
                        <span
                          class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202"
                          data-disable-theme="true"
                        >
                          Move ETH, USDC, and more across 8+ networks.
                        </span>
                      </span>
                    </div>
                    <div
                      class="_opacity-0active-0d0t7546 _transform-0active-scale11281 _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _cursor-pointer"
                    >
                      <svg
                        fill="none"
                        stroke-width="8"
                        style="color: rgb(191, 191, 191); width: 24px; height: 24px;"
                        viewBox="0 0 16 16"
                      >
                        <path
                          d="M12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L12.5303 4.53033ZM3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L3.46967 11.4697ZM4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L4.53033 3.46967ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM11.4697 3.46967L3.46967 11.4697L4.53033 12.5303L12.5303 4.53033L11.4697 3.46967ZM3.46967 4.53033L11.4697 12.5303L12.5303 11.4697L4.53033 3.46967L3.46967 4.53033Z"
                          fill="currentColor"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="c53"
          />
        </div>
      </span>
    </span>
  </span>
</DocumentFragment>
`;
