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

exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
<DocumentFragment>
  .c2 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

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

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

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

.c6 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

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

.c9 {
  color: #222222;
}

.c14 {
  color: #7D7D7D;
}

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

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

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

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

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

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

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

.c8 {
  background-color: transparent;
  border: none;
  cursor: pointer;
  -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: 0;
  grid-template-columns: 1fr auto;
  grid-gap: 0.25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  text-align: left;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

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

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

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

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

.c5 {
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.c15 {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  -webkit-transition: -webkit-transform 0.1s linear;
  -webkit-transition: transform 0.1s linear;
  transition: transform 0.1s linear;
}

.c17 {
  padding-top: 12px;
}

.c1 {
  border: 1px solid #22222212;
  border-radius: 16px;
  padding: 12px 16px;
}

<div
    class="c0 c1"
  >
    <div
      class="c2 c3 c4 c5"
      data-testid="swap-details-header-row"
    >
      <div
        class="c2 c3 c6"
      >
        <div
          class="c7"
          data-testid="trade-price-container"
        >
          <button
            class="c8"
            title="1 DEF = 1.00 ABC "
          >
            <div
              class="c9 css-142zc9n"
            >
              1 DEF = 1.00 ABC 
            </div>
             
          </button>
        </div>
      </div>
      <div
        class="c2 c10 c11"
      >
        <div
          class="c12"
        >
          <div>
            <div
              class="c7"
            >
              <div
                class="c2 c10 c11"
              >
                <svg
                  class="c13"
                  fill="none"
                  height="24"
                  viewBox="0 0 24 24"
                  width="24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clip-rule="evenodd"
                    d="M15.3078 0.278393C15.7064 -0.103884 16.3395 -0.0906517 16.7217 0.307949L20.9689 4.73645C21.2428 4.97487 21.4729 5.26217 21.6459 5.58477C21.8481 5.93184 22 6.34831 22 6.8271V17.2013C22 18.7486 20.7455 20.0001 19.2 20.0001C17.6536 20.0001 16.4 18.7465 16.4 17.2001V14.9C16.4 14.3477 15.9523 13.9 15.4 13.9H15V21.0001C15 21.0691 14.9965 21.1374 14.9897 21.2046C14.9515 21.5802 14.8095 21.925 14.5927 22.2099C14.2274 22.6901 13.6499 23.0001 13 23.0001H5C4.30964 23.0001 3.70098 22.6503 3.34157 22.1183C3.12592 21.7991 3.00001 21.4143 3 21.0001V4.00003C3 2.34317 4.34315 1.00003 6 1.00003H12C13.6569 1.00003 15 2.34317 15 4.00003V11.9H15.4C17.0569 11.9 18.4 13.2432 18.4 14.9V17.2001C18.4 17.642 18.7582 18.0001 19.2 18.0001C19.6427 18.0001 20 17.6423 20 17.2013V9.82932C19.6872 9.93987 19.3506 10 19 10C17.3431 10 16 8.65688 16 7.00003C16 5.78863 16.718 4.74494 17.7517 4.27129L15.2783 1.6923C14.896 1.2937 14.9092 0.660671 15.3078 0.278393ZM19.6098 6.20743C19.441 6.07738 19.2296 6.00003 19 6.00003C18.4477 6.00003 18 6.44774 18 7.00003C18 7.55231 18.4477 8.00003 19 8.00003C19.5523 8.00003 20 7.55231 20 7.00003C20 6.84096 19.9629 6.69057 19.8968 6.55705C19.8303 6.45176 19.7349 6.33571 19.6098 6.20743ZM5 11C5 10.4477 5.44772 10 6 10H9H12C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12H6C5.44772 12 5 11.5523 5 11ZM5 15C5 14.4477 5.44772 14 6 14H12C12.5523 14 13 14.4477 13 15C13 15.5523 12.5523 16 12 16H6C5.44772 16 5 15.5523 5 15ZM6 18C5.44772 18 5 18.4477 5 19C5 19.5523 5.44772 20 6 20H12C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18H6Z"
                    fill="currentColor"
                    fill-rule="evenodd"
                  />
                </svg>
                <div
                  class="c14 css-142zc9n"
                >
                  <div
                    class="c2 c10"
                  >
                    <div>
                      $1.00
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <svg
          class="c15"
          fill="none"
          height="24"
          stroke="#CECECE"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polyline
            points="6 9 12 15 18 9"
          />
        </svg>
      </div>
    </div>
    <div
      style="height: 0px; overflow: hidden; width: 100%; min-width: min-content; will-change: height;"
    >
      <div>
        <div
          class="c16 c17"
          data-testid="advanced-swap-details"
        >
          <div
            class="c18"
          />
          <div>
            <div
              class="c2 c3 c4"
            >
              <div
                class="c9 c19 css-142zc9n"
                data-testid="swap-li-label"
              >
                Price impact
              </div>
              <div
                class="c12"
              >
                <div>
                  <div
                    class="c9 c20 css-142zc9n"
                  >
                    <span
                      class=""
                    >
                      ~-105566.373%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div
              class="c2 c3 c4"
            >
              <div
                class="c9 c19 css-142zc9n"
                data-testid="swap-li-label"
              >
                Max. slippage
              </div>
              <div
                class="c12"
              >
                <div>
                  <div
                    class="c9 c20 css-142zc9n"
                  >
                    <div
                      class="c2 c21"
                    >
                      <div
                        class="c14 c22 css-1lgneq0"
                      />
                       2%
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div
              class="c2 c3 c4"
            >
              <div
                class="c9 c19 css-142zc9n"
                data-testid="swap-li-label"
              >
                Fee 
              </div>
              <div
                class="c12"
              >
                <div>
                  <div
                    class="c9 c20 css-142zc9n"
                  >
                    0 DEF
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div
              class="c2 c3 c4"
            >
              <div
                class="c9 c19 css-142zc9n"
                data-testid="swap-li-label"
              >
                Network cost
              </div>
              <div
                class="c12"
              >
                <div>
                  <div
                    class="c9 c20 css-142zc9n"
                  >
                    <div
                      class="c2 c10"
                    >
                      <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>
          </div>
          <div
            class="c18"
          />
          <div>
            <div
              class="c2 c3 c4"
            >
              <div
                class="c9 c19 css-142zc9n"
                data-testid="swap-li-label"
              >
                Order routing
              </div>
              <div
                class="c12"
              >
                <div>
                  <div
                    class="c9 c20 css-142zc9n"
                  >
                    <div
                      class="css-142zc9n"
                    >
                      Uniswap Client
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
