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

exports[`CommonBases renders without crashing 1`] = `
.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;
  gap: 4px;
}

.c2 {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -4px;
}

.c2 > * {
  margin: 4px !important;
}

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

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

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

.c3 {
  border: 1px solid #22222212;
  border-radius: 18px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 6px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 12px;
  line-height: 0px;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c3:hover {
  cursor: pointer;
  background-color: #98A1C014;
}

<div>
  <div
    class="c0 c1 c2"
  >
    <div
      class="c3"
      data-testid="common-base-ETH"
      tabindex="0"
    >
      <div
        class="c4"
        style="height: 24px; width: 24px; margin-right: 8px;"
      >
        <div
          class="c5"
        >
          <img
            alt="ETH logo"
            class="c6"
            loading="lazy"
            src="ethereum-logo.png"
          />
        </div>
      </div>
      <div
        class="css-1qnq88a"
      >
        ETH
      </div>
    </div>
    <div
      class="c3"
      data-testid="common-base-DAI"
      tabindex="0"
    >
      <div
        class="c4"
        style="height: 24px; width: 24px; margin-right: 8px;"
      >
        <div
          class="c5"
        >
          <img
            alt="DAI logo"
            class="c6"
            loading="lazy"
            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
          />
        </div>
      </div>
      <div
        class="css-1qnq88a"
      >
        DAI
      </div>
    </div>
    <div
      class="c3"
      data-testid="common-base-USDC"
      tabindex="0"
    >
      <div
        class="c4"
        style="height: 24px; width: 24px; margin-right: 8px;"
      >
        <div
          class="c5"
        >
          <img
            alt="USDC logo"
            class="c6"
            loading="lazy"
            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
          />
        </div>
      </div>
      <div
        class="css-1qnq88a"
      >
        USDC
      </div>
    </div>
    <div
      class="c3"
      data-testid="common-base-USDT"
      tabindex="0"
    >
      <div
        class="c4"
        style="height: 24px; width: 24px; margin-right: 8px;"
      >
        <div
          class="c5"
        >
          <img
            alt="USDT logo"
            class="c6"
            loading="lazy"
            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png"
          />
        </div>
      </div>
      <div
        class="css-1qnq88a"
      >
        USDT
      </div>
    </div>
    <div
      class="c3"
      data-testid="common-base-WBTC"
      tabindex="0"
    >
      <div
        class="c4"
        style="height: 24px; width: 24px; margin-right: 8px;"
      >
        <div
          class="c5"
        >
          <img
            alt="WBTC logo"
            class="c6"
            loading="lazy"
            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png"
          />
        </div>
      </div>
      <div
        class="css-1qnq88a"
      >
        WBTC
      </div>
    </div>
    <div
      class="c3"
      data-testid="common-base-WETH"
      tabindex="0"
    >
      <div
        class="c4"
        style="height: 24px; width: 24px; margin-right: 8px;"
      >
        <div
          class="c5"
        >
          <img
            alt="WETH logo"
            class="c6"
            loading="lazy"
            src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
          />
        </div>
      </div>
      <div
        class="css-1qnq88a"
      >
        WETH
      </div>
    </div>
  </div>
</div>
`;
