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

exports[`PoolDetailsPage pool header is displayed when data is received from thegraph 1`] = `
<DocumentFragment>
  .c0 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c9 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.c31 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 4px 0px;
}

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

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

.c10 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  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;
}

.c32 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  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;
  padding: 4px 0px;
}

.c6 {
  color: #7D7D7D;
}

.c7 {
  color: #222222;
}

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

.c21 {
  background-color: transparent;
  bottom: 0;
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: 150ms ease background-color;
  transition: 150ms ease background-color;
  width: 100%;
}

.c18 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FFEFFF;
  border-radius: 16px;
  border: 0;
  color: #FC72FF;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  font-size: 16px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 20px;
  padding: 10px 12px;
  position: relative;
  -webkit-transition: 150ms ease opacity;
  transition: 150ms ease opacity;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c18:active .c20 {
  background-color: #B8C0DC3d;
}

.c18:focus .c20 {
  background-color: #B8C0DC3d;
}

.c18:hover .c20 {
  background-color: #98A1C014;
}

.c18:disabled {
  cursor: default;
  opacity: 0.6;
}

.c18:disabled:active .c20,
.c18:disabled:focus .c20,
.c18:disabled:hover .c20 {
  background-color: transparent;
}

.c4 {
  gap: 36px;
}

.c5 {
  -webkit-text-decoration: none;
  text-decoration: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
}

.c5:hover {
  opacity: 0.6;
}

.c5:active {
  opacity: 0.4;
}

.c14 {
  background: #F9F9F9;
  padding: 2px 6px;
  border-radius: 4px;
}

.c15 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
}

.c15:hover {
  opacity: 0.6;
}

.c15:active {
  opacity: 0.4;
}

.c11 {
  position: relative;
  top: 0;
  left: 0;
}

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

.c12 img {
  width: 16px;
  height: 32px;
  object-fit: cover;
}

.c12 img:first-child {
  border-radius: 16px 0 0 16px;
  object-position: 0 0;
}

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

.c13 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.c33 {
  color: #FF5F52;
}

.c23 {
  font-weight: 485;
  font-size: 24px;
  line-height: 36px;
}

.c22 {
  gap: 24px;
  padding: 20px;
  border-radius: 20px;
  background: #F9F9F9;
  width: 100%;
}

.c24 {
  gap: 8px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 180px;
}

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

.c26 {
  font-weight: 485;
  font-size: 18px;
  line-height: 24px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.c27 {
  height: 8px;
  width: 40.698463777008904%;
  background: #2172E5;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 1px solid #F9F9F9;
}

.c28 {
  height: 8px;
  width: 59.3015362229911%;
  background: #2172E5;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 1px solid #F9F9F9;
}

.c29 {
  gap: 4px;
  width: 100%;
  -webkit-align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.c30 {
  color: #222222;
  font-size: 36px;
  font-weight: 485;
  line-height: 44px;
}

.c17 {
  gap: 12px;
}

.c19 {
  padding: 12px 16px 12px 12px;
  border-radius: 900px;
  width: 50%;
}

.c2 {
  padding: 48px;
  width: 100%;
  -webkit-align-items: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
}

.c16 {
  gap: 24px;
  margin: 0 48px 0 auto;
  width: 22vw;
  min-width: 360px;
}

@media (max-width:1023px) {
  .c23 {
    width: 100%;
  }
}

@media (max-width:1023px) {
  .c22 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    background: #FFFFFF;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 0px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (max-width:640px) {
  .c24 {
    min-width: 150px;
  }
}

@media (max-width:1023px) {
  .c25 {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width:1023px) {
  .c26 {
    font-size: 20px;
    line-height: 28px;
    width: 100%;
  }
}

@media (max-width:1023px) {
  .c29 {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0px;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
  }
}

@media (max-width:1023px) {
  .c30 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width:1023px) {
  .c17 {
    display: none;
  }
}

@media (max-width:1023px) {
  .c2 {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width:639px) {
  .c2 {
    padding: 48px 16px;
  }
}

@media (max-width:1023px) {
  .c16 {
    margin: 44px 0px;
    width: 100%;
    min-width: unset;
  }
}

<div
    class="c0 c1 c2"
  >
    <div
      class="c3 c4"
    >
      <div
        class="c0 c1"
      >
        <a
          class="c5"
          href="/tokens/ETHEREUM"
        >
          <div
            class="c6 css-1urox24"
          >
            Explore
          </div>
        </a>
        <div
          class="c6 css-1urox24"
        >
           &gt; 
        </div>
        <a
          class="c5"
          href="/tokens/ETHEREUM"
        >
          <div
            class="c6 css-1urox24"
          >
            Pool
          </div>
        </a>
        <div
          class="c6 css-1urox24"
        >
           &gt; 
        </div>
        <div
          class="c7 css-1urox24"
        >
          USDC / WETH (0x88e6...5640)
        </div>
      </div>
      <div
        class="c0 c8"
      >
        <div
          class="c9 c10"
          width="max-content"
        >
          <div
            class="c11"
          >
            <div
              class="c12"
            >
              <img
                class="c13"
                src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
              />
              <img
                class="c13"
                src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
              />
            </div>
          </div>
          <div
            class="c7 css-1jyz67g"
          >
            USDC / WETH
          </div>
        </div>
        <div
          class="c6 c14 css-1m65e73"
        >
          0.05%
        </div>
        <svg
          class="c15"
          data-testid="toggle-tokens-reverse-arrows"
          fill="none"
          height="20"
          viewBox="0 0 20 20"
          width="20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M18.125 10V12.5C18.125 14.2233 16.7225 15.625 15 15.625H4.0092L5.4425 17.0583C5.68667 17.3025 5.68667 17.6983 5.4425 17.9425C5.32084 18.0642 5.16081 18.1258 5.00081 18.1258C4.84081 18.1258 4.68079 18.065 4.55912 17.9425L2.05912 15.4425C2.00162 15.385 1.9559 15.3159 1.92424 15.2393C1.8609 15.0868 1.8609 14.9143 1.92424 14.7618C1.9559 14.6851 2.00162 14.6158 2.05912 14.5583L4.55912 12.0583C4.80329 11.8141 5.19915 11.8141 5.44332 12.0583C5.68749 12.3025 5.68749 12.6983 5.44332 12.9425L4.01001 14.3758H15C16.0333 14.3758 16.875 13.535 16.875 12.5008V10.0008C16.875 9.65581 17.155 9.37581 17.5 9.37581C17.845 9.37581 18.125 9.655 18.125 10ZM2.5 10.625C2.845 10.625 3.125 10.345 3.125 10V7.5C3.125 6.46583 3.96667 5.625 5 5.625H15.9908L14.5575 7.05831C14.3133 7.30247 14.3133 7.69834 14.5575 7.9425C14.6792 8.06417 14.8392 8.12581 14.9992 8.12581C15.1592 8.12581 15.3192 8.065 15.4409 7.9425L17.9409 5.4425C17.9984 5.385 18.0441 5.31592 18.0758 5.23926C18.1391 5.08676 18.1391 4.91426 18.0758 4.76176C18.0441 4.68509 17.9984 4.61581 17.9409 4.55831L15.4409 2.05831C15.1967 1.81414 14.8008 1.81414 14.5567 2.05831C14.3125 2.30247 14.3125 2.69834 14.5567 2.9425L15.99 4.37581H5C3.2775 4.37581 1.875 5.77748 1.875 7.50081V10.0008C1.875 10.345 2.155 10.625 2.5 10.625Z"
            fill="#5E5E5E"
          />
        </svg>
      </div>
    </div>
    <div
      class="c3 c16"
    >
      <div
        class="c0 c1 c17"
      >
        <button
          class="c18 c19"
          data-testid="pool-details-add-liquidity-button"
          size="1"
        >
          <div
            class="c20 c21"
          />
          Add liquidity
        </button>
        <button
          class="c18 c19"
          data-testid="pool-details-swap-button"
          size="1"
        >
          <div
            class="c20 c21"
          />
          Swap
        </button>
      </div>
      <div
        class="c3 c22"
      >
        <div
          class="c23 css-vurnku"
        >
          Stats
        </div>
        <div
          class="c3 c24"
        >
          <div
            class="c6 css-1urox24"
          >
            Pool balances
          </div>
          <div
            class="c0 c1 c25"
          >
            <div
              class="c0 c1 c26"
            >
              90.93M USDC
            </div>
            <div
              class="c0 c1 c26"
            >
              82,526.49 WETH
            </div>
          </div>
          <div
            class="c0 c1"
            data-testid="pool-balance-chart"
          >
            <div
              class="c27"
            />
            <div
              class="c28"
            />
          </div>
        </div>
        <div
          class="c3 c24"
        >
          <div
            class="c6 css-1urox24"
          >
            TVL
          </div>
          <div
            class="c0 c1 c29"
          >
            <div
              class="c30 css-vurnku"
            >
              $223.2M
            </div>
            <div
              class="c31 c32"
              width="max-content"
            >
              <svg
                aria-label="down"
                class="c33"
                fill="none"
                height="16"
                viewBox="0 0 24 24"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M10.6979 16.2453L6.31787 9.75247C5.58184 8.66118 6.2058 7 7.35185 7L16.6482 7C17.7942 7 18.4182 8.66243 17.6821 9.75247L13.3021 16.2453C12.623 17.2516 11.377 17.2516 10.6979 16.2453Z"
                  fill="currentColor"
                />
              </svg>
              <div
                class="c6 css-1urox24"
              >
                0.37%
              </div>
            </div>
          </div>
        </div>
        <div
          class="c3 c24"
        >
          <div
            class="c6 css-1urox24"
          >
            24H volume
          </div>
          <div
            class="c0 c1 c29"
          >
            <div
              class="c30 css-vurnku"
            >
              $233.4M
            </div>
            <div
              class="c31 c32"
              width="max-content"
            >
              <svg
                aria-label="down"
                class="c33"
                fill="none"
                height="16"
                viewBox="0 0 24 24"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M10.6979 16.2453L6.31787 9.75247C5.58184 8.66118 6.2058 7 7.35185 7L16.6482 7C17.7942 7 18.4182 8.66243 17.6821 9.75247L13.3021 16.2453C12.623 17.2516 11.377 17.2516 10.6979 16.2453Z"
                  fill="currentColor"
                />
              </svg>
              <div
                class="c6 css-1urox24"
              >
                17.75%
              </div>
            </div>
          </div>
        </div>
        <div
          class="c3 c24"
        >
          <div
            class="c6 css-1urox24"
          >
            24H fees
          </div>
          <div
            class="c0 c1 c29"
          >
            <div
              class="c30 css-vurnku"
            >
              $116.7K
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
