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

exports[`LimitsMenu should render when there are two open orders 1`] = `
.c7 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

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

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

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

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

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

.c21 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FF5F52;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 20px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 24px;
  padding: 16px;
  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;
}

.c21:active .c23 {
  background-color: #B8C0DC3d;
}

.c21:focus .c23 {
  background-color: #B8C0DC3d;
}

.c21:hover .c23 {
  background-color: #98A1C014;
}

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

.c21:disabled:active .c23,
.c21:disabled:focus .c23,
.c21:disabled:hover .c23 {
  background-color: transparent;
}

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

.c13 {
  display: grid;
  grid-auto-rows: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.c12 {
  color: #7D7D7D;
}

.c11 {
  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: relative;
  top: 0;
  left: 0;
}

.c9 {
  gap: 12px;
  height: 68px;
  padding: 0 16px;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  cursor: pointer;
}

.c9:hover {
  cursor: pointer;
}

.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: relative;
  overflow: hidden;
  cursor: pointer;
  line-height: 1;
}

.c18 {
  border-color: #7D7D7D;
  display: inline-block;
  margin-right: 1px;
  border-radius: 4px;
  height: 16px;
  width: 16px;
  border-style: solid;
  border-width: 2px;
  position: relative;
}

.c19 {
  position: absolute;
  top: -24px;
  -webkit-clip: rect(0 0 0 0);
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.c20 {
  display: none;
  height: 16px;
  width: 16px;
  color: white;
  position: absolute;
  right: 1px;
}

.c10 {
  padding: 8px 16px;
  height: unset;
}

.c1 {
  width: 100%;
  overflow: auto;
  margin-top: 4px;
  padding: 14px 16px 16px;
  -webkit-scrollbar-width: thin;
  -moz-scrollbar-width: thin;
  -ms-scrollbar-width: thin;
  scrollbar-width: thin;
  -webkit-scrollbar-color: #22222212 transparent;
  -moz-scrollbar-color: #22222212 transparent;
  -ms-scrollbar-color: #22222212 transparent;
  scrollbar-color: #22222212 transparent;
  height: 100%;
}

.c1::-webkit-scrollbar {
  background: transparent;
  width: 4px;
  overflow-y: scroll;
}

.c1::-webkit-scrollbar-thumb {
  background: #22222212;
  border-radius: 8px;
}

.c1::-webkit-scrollbar-track {
  margin-top: 40px;
}

.c4 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

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

.c3:hover {
  opacity: 0.6;
}

.c3:active {
  opacity: 0.4;
}

.c2 {
  color: #222222;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.c6 {
  height: 100%;
  position: relative;
}

.c22 {
  position: absolute;
  bottom: 16px;
  width: 100%;
}

<div>
  <div
    class="c0 c1"
  >
    <div
      class="c2"
    >
      <svg
        class="c3"
        data-testid="wallet-back"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <line
          x1="19"
          x2="5"
          y1="12"
          y2="12"
        />
        <polyline
          points="12 19 5 12 12 5"
        />
      </svg>
      <span
        class="c4"
      >
        <div
          class="c5 css-n8z49y"
        >
          Open limits
        </div>
      </span>
    </div>
    <div
      class="c0 c6"
      data-testid="LimitsMenuContainer"
    >
      <div
        class="c7 c8"
      >
        <div
          class="c7 c8 c9 c10"
        >
          <div
            class="c0"
          >
            <div
              class="c11"
            >
              <svg
                class="c12"
                height="40px"
                width="40px"
              >
                contract-interaction.svg
              </svg>
            </div>
          </div>
          <div
            class="c13"
          >
            <div
              class="c14 css-15li2d9"
            >
              Expires January 26, 2024 at 1:52PM
            </div>
            <div
              class="c0"
            >
              <div
                class="c7 c15"
              >
                <div
                  class="c5 css-n8z49y"
                >
                  252.074
                   
                  DAI
                </div>
                <svg
                  fill="none"
                  height="12px"
                  stroke="#222222"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="12px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="5"
                    x2="19"
                    y1="12"
                    y2="12"
                  />
                  <polyline
                    points="12 5 19 12 12 19"
                  />
                </svg>
                <div
                  class="c5 css-n8z49y"
                >
                  0.10684
                   
                  WETH
                </div>
              </div>
              <div
                class="c16 css-142zc9n"
              >
                when 0.00042 WETH/DAI
              </div>
            </div>
          </div>
        </div>
        <label
          class="c17"
        >
          <span
            aria-hidden="true"
            class="c18"
            size="16"
          />
          <input
            class="c19"
            size="16"
            type="checkbox"
          />
          <svg
            class="c20"
            fill="none"
            height="28"
            size="16"
            viewBox="0 0 28 28"
            width="28"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M13.7464 21.1101C13.3792 21.6796 12.8372 22 12.2076 22C11.5607 22 11.0536 21.733 10.5814 21.1101L6.45464 15.9844C6.15738 15.6107 6 15.2191 6 14.792C6 13.9021 6.66448 13.208 7.52131 13.208C8.0459 13.208 8.46557 13.4038 8.88525 13.9555L12.1377 18.1735L19.0448 6.88988C19.412 6.28476 19.8842 6 20.4087 6C21.2306 6 22 6.58732 22 7.4594C22 7.86874 21.7902 8.29588 21.5628 8.66963L13.7464 21.1101Z"
              fill="currentColor"
            />
          </svg>
        </label>
      </div>
      <div
        class="c7 c8"
      >
        <div
          class="c7 c8 c9 c10"
        >
          <div
            class="c0"
          >
            <div
              class="c11"
            >
              <svg
                class="c12"
                height="40px"
                width="40px"
              >
                contract-interaction.svg
              </svg>
            </div>
          </div>
          <div
            class="c13"
          >
            <div
              class="c14 css-15li2d9"
            >
              Expires January 26, 2024 at 1:52PM
            </div>
            <div
              class="c0"
            >
              <div
                class="c7 c15"
              >
                <div
                  class="c5 css-n8z49y"
                >
                  252.074
                   
                  DAI
                </div>
                <svg
                  fill="none"
                  height="12px"
                  stroke="#222222"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="12px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="5"
                    x2="19"
                    y1="12"
                    y2="12"
                  />
                  <polyline
                    points="12 5 19 12 12 19"
                  />
                </svg>
                <div
                  class="c5 css-n8z49y"
                >
                  0.10684
                   
                  WETH
                </div>
              </div>
              <div
                class="c16 css-142zc9n"
              >
                when 0.00042 WETH/DAI
              </div>
            </div>
          </div>
        </div>
        <label
          class="c17"
        >
          <span
            aria-hidden="true"
            class="c18"
            size="16"
          />
          <input
            class="c19"
            size="16"
            type="checkbox"
          />
          <svg
            class="c20"
            fill="none"
            height="28"
            size="16"
            viewBox="0 0 28 28"
            width="28"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M13.7464 21.1101C13.3792 21.6796 12.8372 22 12.2076 22C11.5607 22 11.0536 21.733 10.5814 21.1101L6.45464 15.9844C6.15738 15.6107 6 15.2191 6 14.792C6 13.9021 6.66448 13.208 7.52131 13.208C8.0459 13.208 8.46557 13.4038 8.88525 13.9555L12.1377 18.1735L19.0448 6.88988C19.412 6.28476 19.8842 6 20.4087 6C21.2306 6 22 6.58732 22 7.4594C22 7.86874 21.7902 8.29588 21.5628 8.66963L13.7464 21.1101Z"
              fill="currentColor"
            />
          </svg>
        </label>
      </div>
      <button
        class="c21 c22"
        disabled=""
        size="2"
      >
        <div
          class="c23 c24"
        />
        Cancel 0 limits
      </button>
    </div>
  </div>
</div>
`;

exports[`LimitsMenu should render when there is one open order 1`] = `
.c7 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

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

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

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

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

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

.c21 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FF5F52;
  border-radius: 16px;
  border: 0;
  color: #222222;
  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: 20px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 24px;
  padding: 16px;
  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;
}

.c21:active .c23 {
  background-color: #B8C0DC3d;
}

.c21:focus .c23 {
  background-color: #B8C0DC3d;
}

.c21:hover .c23 {
  background-color: #98A1C014;
}

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

.c21:disabled:active .c23,
.c21:disabled:focus .c23,
.c21:disabled:hover .c23 {
  background-color: transparent;
}

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

.c13 {
  display: grid;
  grid-auto-rows: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.c12 {
  color: #7D7D7D;
}

.c11 {
  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: relative;
  top: 0;
  left: 0;
}

.c9 {
  gap: 12px;
  height: 68px;
  padding: 0 16px;
  -webkit-transition: 250ms ease background-color;
  transition: 250ms ease background-color;
  cursor: pointer;
}

.c9:hover {
  cursor: pointer;
}

.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: relative;
  overflow: hidden;
  cursor: pointer;
  line-height: 1;
}

.c18 {
  border-color: #7D7D7D;
  display: inline-block;
  margin-right: 1px;
  border-radius: 4px;
  height: 16px;
  width: 16px;
  border-style: solid;
  border-width: 2px;
  position: relative;
}

.c19 {
  position: absolute;
  top: -24px;
  -webkit-clip: rect(0 0 0 0);
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.c20 {
  display: none;
  height: 16px;
  width: 16px;
  color: white;
  position: absolute;
  right: 1px;
}

.c10 {
  padding: 8px 16px;
  height: unset;
}

.c1 {
  width: 100%;
  overflow: auto;
  margin-top: 4px;
  padding: 14px 16px 16px;
  -webkit-scrollbar-width: thin;
  -moz-scrollbar-width: thin;
  -ms-scrollbar-width: thin;
  scrollbar-width: thin;
  -webkit-scrollbar-color: #22222212 transparent;
  -moz-scrollbar-color: #22222212 transparent;
  -ms-scrollbar-color: #22222212 transparent;
  scrollbar-color: #22222212 transparent;
  height: 100%;
}

.c1::-webkit-scrollbar {
  background: transparent;
  width: 4px;
  overflow-y: scroll;
}

.c1::-webkit-scrollbar-thumb {
  background: #22222212;
  border-radius: 8px;
}

.c1::-webkit-scrollbar-track {
  margin-top: 40px;
}

.c4 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

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

.c3:hover {
  opacity: 0.6;
}

.c3:active {
  opacity: 0.4;
}

.c2 {
  color: #222222;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.c6 {
  height: 100%;
  position: relative;
}

.c22 {
  position: absolute;
  bottom: 16px;
  width: 100%;
}

<div>
  <div
    class="c0 c1"
  >
    <div
      class="c2"
    >
      <svg
        class="c3"
        data-testid="wallet-back"
        fill="none"
        height="24"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <line
          x1="19"
          x2="5"
          y1="12"
          y2="12"
        />
        <polyline
          points="12 19 5 12 12 5"
        />
      </svg>
      <span
        class="c4"
      >
        <div
          class="c5 css-n8z49y"
        >
          Open limits
        </div>
      </span>
    </div>
    <div
      class="c0 c6"
      data-testid="LimitsMenuContainer"
    >
      <div
        class="c7 c8"
      >
        <div
          class="c7 c8 c9 c10"
        >
          <div
            class="c0"
          >
            <div
              class="c11"
            >
              <svg
                class="c12"
                height="40px"
                width="40px"
              >
                contract-interaction.svg
              </svg>
            </div>
          </div>
          <div
            class="c13"
          >
            <div
              class="c14 css-15li2d9"
            >
              Expires January 26, 2024 at 1:52PM
            </div>
            <div
              class="c0"
            >
              <div
                class="c7 c15"
              >
                <div
                  class="c5 css-n8z49y"
                >
                  252.074
                   
                  DAI
                </div>
                <svg
                  fill="none"
                  height="12px"
                  stroke="#222222"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  viewBox="0 0 24 24"
                  width="12px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <line
                    x1="5"
                    x2="19"
                    y1="12"
                    y2="12"
                  />
                  <polyline
                    points="12 5 19 12 12 19"
                  />
                </svg>
                <div
                  class="c5 css-n8z49y"
                >
                  0.10684
                   
                  WETH
                </div>
              </div>
              <div
                class="c16 css-142zc9n"
              >
                when 0.00042 WETH/DAI
              </div>
            </div>
          </div>
        </div>
        <label
          class="c17"
        >
          <span
            aria-hidden="true"
            class="c18"
            size="16"
          />
          <input
            class="c19"
            size="16"
            type="checkbox"
          />
          <svg
            class="c20"
            fill="none"
            height="28"
            size="16"
            viewBox="0 0 28 28"
            width="28"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M13.7464 21.1101C13.3792 21.6796 12.8372 22 12.2076 22C11.5607 22 11.0536 21.733 10.5814 21.1101L6.45464 15.9844C6.15738 15.6107 6 15.2191 6 14.792C6 13.9021 6.66448 13.208 7.52131 13.208C8.0459 13.208 8.46557 13.4038 8.88525 13.9555L12.1377 18.1735L19.0448 6.88988C19.412 6.28476 19.8842 6 20.4087 6C21.2306 6 22 6.58732 22 7.4594C22 7.86874 21.7902 8.29588 21.5628 8.66963L13.7464 21.1101Z"
              fill="currentColor"
            />
          </svg>
        </label>
      </div>
      <button
        class="c21 c22"
        disabled=""
        size="2"
      >
        <div
          class="c23 c24"
        />
        Cancel 0 limits
      </button>
    </div>
  </div>
</div>
`;
