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

exports[`CancelOrdersDialog should render limit order text 1`] = `
.c8 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

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

.c24 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

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

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

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

.c10 {
  color: #222222;
  cursor: pointer;
  -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;
}

.c6 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c6:hover {
  opacity: 0.6;
}

.c6:active {
  opacity: 0.4;
}

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

.c25 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c25:active .c27 {
  background-color: #B8C0DC3d;
}

.c25:focus .c27 {
  background-color: #B8C0DC3d;
}

.c25:hover .c27 {
  background-color: #98A1C014;
}

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

.c25:disabled:active .c27,
.c25:disabled:focus .c27,
.c25:disabled:hover .c27 {
  background-color: transparent;
}

.c29 {
  -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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c29:active .c27 {
  background-color: #B8C0DC3d;
}

.c29:focus .c27 {
  background-color: #B8C0DC3d;
}

.c29:hover .c27 {
  background-color: #98A1C014;
}

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

.c29:disabled:active .c27,
.c29:disabled:focus .c27,
.c29:disabled:hover .c27 {
  background-color: transparent;
}

.c0 {
  will-change: transform,opacity;
}

.c0[data-reach-dialog-overlay] {
  z-index: 1040;
  background-color: transparent;
  overflow: hidden;
  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;
  overflow-y: scroll;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.60);
}

.c1 {
  overflow-y: auto;
}

.c1[data-reach-dialog-content] {
  margin: auto;
  background-color: #F9F9F9;
  border: 1px solid #22222212;
  box-shadow: 8px 12px 20px rgba(51,53,72,0.04),4px 6px 12px rgba(51,53,72,0.02),4px 4px 8px rgba(51,53,72,0.04);
  padding: 0px;
  width: 50vw;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 90vh;
  max-width: 420px;
  display: inline-table;
  border-radius: 20px;
}

.c7 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 16px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 485;
  line-height: 20px;
  background: #F9F9F9;
  color: #7D7D7D;
  stroke: none;
}

.c7:hover {
  background: #22222212;
  color: #222222;
  opacity: unset;
}

.c7:hover path {
  fill: #222222;
}

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

.c11 {
  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: 16px;
}

.c13 {
  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: 8px;
}

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

.c3 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c4 {
  background-color: #FFFFFF;
  outline: 1px solid #22222212;
  border-radius: 20px;
  padding: 16px 24px 24px 24px;
  width: 100%;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c15 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c17 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  color: #222222;
  border-radius: 12px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  color: #FFFFFF;
  border-radius: 12px;
}

.c5 {
  padding: 4px 0px;
}

.c22 {
  cursor: auto;
  color: #7D7D7D;
}

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

.c20 {
  border-top: 1px solid #22222212;
  margin-top: 16px;
  padding-top: 16px;
}

@media screen and (max-width:640px) {
  .c0[data-reach-dialog-overlay] {
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
  }
}

@media screen and (max-width:768px) {
  .c1[data-reach-dialog-content] {
    width: 65vw;
  }
}

@media screen and (max-width:640px) {
  .c1[data-reach-dialog-content] {
    margin: 0;
    width: 100vw;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

<body
  data-scroll-locked=""
>
  <div
    aria-hidden="true"
  >
    <span
      class=""
      style="display: contents;"
    >
      <span
        class=" _dsp_contents"
      >
        <span
          class=" t_light _dsp_contents is_Theme"
        >
          <div
            tabindex="0"
          />
        </span>
      </span>
    </span>
  </div>
  <reach-portal>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="0"
    />
    <div
      data-focus-lock-disabled="false"
    >
      <div>
        <div
          class="c0"
          data-reach-dialog-overlay=""
          style="opacity: 0;"
        >
          <div
            aria-label="dialog"
            aria-modal="true"
            class="c1"
            data-reach-dialog-content=""
            role="dialog"
            tabindex="-1"
          >
            <div
              class="c2 c3 c4"
            >
              <div
                class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-441309761 _alignItems-center _gap-1481558307 _width-10037 c5"
              >
                <div
                  class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
                >
                  <a
                    class="c6 c7"
                    href="https://support.uniswap.org/hc/en-us"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    <div
                      class="c8 c9"
                    >
                      <svg
                        fill="none"
                        height="16"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
                          fill="#9B9B9B"
                        />
                      </svg>
                      Get help
                    </div>
                  </a>
                  <svg
                    class="c10"
                    data-testid="Dialog-closeButton"
                    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="18"
                      x2="6"
                      y1="6"
                      y2="18"
                    />
                    <line
                      x1="6"
                      x2="18"
                      y1="6"
                      y2="18"
                    />
                  </svg>
                </div>
              </div>
              <div
                class="c2 c3"
              >
                <div
                  class="c11 c3"
                >
                  <div
                    class="c12"
                  >
                    <svg
                      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"
                    >
                      <circle
                        cx="12"
                        cy="12"
                        r="10"
                      />
                      <line
                        x1="4.93"
                        x2="19.07"
                        y1="4.93"
                        y2="19.07"
                      />
                    </svg>
                  </div>
                  <div
                    class="c13 c3"
                  >
                    <div
                      class="c14 c15 css-4kpdx7"
                    >
                      Cancel limit
                    </div>
                    <div
                      class="c16 c17 css-1urox24"
                    >
                      <div
                        class="c18"
                      >
                        Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
                        <div
                          class="c8 c19 c20"
                        >
                          <div
                            class="c8 c19 c21"
                          >
                            <div
                              class="c14 c22 css-142zc9n"
                              data-testid="swap-li-label"
                            >
                              Network cost
                            </div>
                            <div
                              class="c14 c23 css-142zc9n"
                            >
                              <span>
                                -
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c8 c24"
                >
                  <button
                    class="c25 c26"
                  >
                    <div
                      class="c27 c28"
                    />
                    Never mind
                  </button>
                  <button
                    class="c29 c30"
                  >
                    <div
                      class="c27 c28"
                    />
                    Proceed
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="0"
    />
  </reach-portal>
</body>
`;

exports[`CancelOrdersDialog should render order cancel correctly 1`] = `
.c8 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

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

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

.c24 {
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

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

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

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

.c10 {
  color: #222222;
  cursor: pointer;
  -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;
}

.c6 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FC72FF;
  stroke: #FC72FF;
  font-weight: 500;
}

.c6:hover {
  opacity: 0.6;
}

.c6:active {
  opacity: 0.4;
}

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

.c25 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #22222212;
  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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c25:active .c27 {
  background-color: #B8C0DC3d;
}

.c25:focus .c27 {
  background-color: #B8C0DC3d;
}

.c25:hover .c27 {
  background-color: #98A1C014;
}

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

.c25:disabled:active .c27,
.c25:disabled:focus .c27,
.c25:disabled:hover .c27 {
  background-color: transparent;
}

.c29 {
  -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: 14px;
  font-weight: 535;
  gap: 12px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 16px;
  padding: 8px;
  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;
}

.c29:active .c27 {
  background-color: #B8C0DC3d;
}

.c29:focus .c27 {
  background-color: #B8C0DC3d;
}

.c29:hover .c27 {
  background-color: #98A1C014;
}

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

.c29:disabled:active .c27,
.c29:disabled:focus .c27,
.c29:disabled:hover .c27 {
  background-color: transparent;
}

.c0 {
  will-change: transform,opacity;
}

.c0[data-reach-dialog-overlay] {
  z-index: 1040;
  background-color: transparent;
  overflow: hidden;
  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;
  overflow-y: scroll;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.60);
}

.c1 {
  overflow-y: auto;
}

.c1[data-reach-dialog-content] {
  margin: auto;
  background-color: #F9F9F9;
  border: 1px solid #22222212;
  box-shadow: 8px 12px 20px rgba(51,53,72,0.04),4px 6px 12px rgba(51,53,72,0.02),4px 4px 8px rgba(51,53,72,0.04);
  padding: 0px;
  width: 50vw;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 90vh;
  max-width: 420px;
  display: inline-table;
  border-radius: 20px;
}

.c7 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 16px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 485;
  line-height: 20px;
  background: #F9F9F9;
  color: #7D7D7D;
  stroke: none;
}

.c7:hover {
  background: #22222212;
  color: #222222;
  opacity: unset;
}

.c7:hover path {
  fill: #222222;
}

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

.c11 {
  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: 16px;
}

.c13 {
  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: 8px;
}

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

.c3 {
  width: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c4 {
  background-color: #FFFFFF;
  outline: 1px solid #22222212;
  border-radius: 20px;
  padding: 16px 24px 24px 24px;
  width: 100%;
}

.c12 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #22222212;
  width: 48px;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 12px;
}

.c15 {
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  font-weight: 500;
}

.c17 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  -webkit-letter-spacing: 0em;
  -moz-letter-spacing: 0em;
  -ms-letter-spacing: 0em;
  letter-spacing: 0em;
  text-align: center;
}

.c26 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  color: #222222;
  border-radius: 12px;
}

.c30 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 40px;
  color: #FFFFFF;
  border-radius: 12px;
}

.c5 {
  padding: 4px 0px;
}

.c22 {
  cursor: auto;
  color: #7D7D7D;
}

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

.c20 {
  border-top: 1px solid #22222212;
  margin-top: 16px;
  padding-top: 16px;
}

@media screen and (max-width:640px) {
  .c0[data-reach-dialog-overlay] {
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
  }
}

@media screen and (max-width:768px) {
  .c1[data-reach-dialog-content] {
    width: 65vw;
  }
}

@media screen and (max-width:640px) {
  .c1[data-reach-dialog-content] {
    margin: 0;
    width: 100vw;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

<body
  data-scroll-locked=""
>
  <div
    aria-hidden="true"
  >
    <span
      class=""
      style="display: contents;"
    >
      <span
        class=" _dsp_contents"
      >
        <span
          class=" t_light _dsp_contents is_Theme"
        >
          <div
            tabindex="0"
          />
        </span>
      </span>
    </span>
  </div>
  <reach-portal>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="0"
    />
    <div
      data-focus-lock-disabled="false"
    >
      <div>
        <div
          class="c0"
          data-reach-dialog-overlay=""
          style="opacity: 0;"
        >
          <div
            aria-label="dialog"
            aria-modal="true"
            class="c1"
            data-reach-dialog-content=""
            role="dialog"
            tabindex="-1"
          >
            <div
              class="c2 c3 c4"
            >
              <div
                class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _justifyContent-441309761 _alignItems-center _gap-1481558307 _width-10037 c5"
              >
                <div
                  class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-row _flexGrow-1 _justifyContent-flex-end _alignItems-center _gap-10px"
                >
                  <a
                    class="c6 c7"
                    href="https://support.uniswap.org/hc/en-us"
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    <div
                      class="c8 c9"
                    >
                      <svg
                        fill="none"
                        height="16"
                        viewBox="0 0 16 16"
                        width="16"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M11.3066 8.66699C11.7132 8.66699 12.0533 8.77366 12.3333 8.94033C12.5626 8.80633 12.8332 8.70966 13.1466 8.67766C13.2506 8.667 13.3333 8.58633 13.3333 8.48233V4.66699C13.3333 3.33366 12.6666 2.66699 11.3333 2.66699H3.33325C1.99992 2.66699 1.33325 3.33366 1.33325 4.66699V10.667C1.33325 12.0003 1.99992 12.667 3.33325 12.667H9.06665C9.25132 12.667 9.29996 12.5023 9.26196 12.4163C9.1733 12.213 9.10664 11.997 9.05998 11.767C8.89331 10.8937 9.0733 10.0603 9.5533 9.46699C9.9733 8.95366 10.5932 8.66699 11.3066 8.66699ZM8.01929 8.11966C7.81395 8.26899 7.57325 8.34366 7.33325 8.34366C7.09325 8.34366 6.85188 8.26899 6.64722 8.12032L3.37264 5.73832C3.14931 5.57632 3.09995 5.263 3.26261 5.03966C3.42461 4.81766 3.73585 4.76632 3.96118 4.92966L7.23592 7.31099C7.29459 7.35299 7.37257 7.35366 7.43123 7.31099L10.706 4.92966C10.9306 4.76632 11.2425 4.817 11.4045 5.03966C11.5672 5.263 11.5178 5.57565 11.2945 5.73832L8.01929 8.11966ZM14.6252 11.5697C14.3212 13.1117 12.3359 14.0003 12.3359 14.0003C12.3359 14.0003 10.3506 13.1123 10.0466 11.5697C9.85996 10.6237 10.2679 9.67166 11.3046 9.66699C12.0766 9.66366 12.3359 10.429 12.3359 10.429C12.3359 10.429 12.5953 9.66366 13.3673 9.66699C14.4066 9.67166 14.8119 10.6237 14.6252 11.5697Z"
                          fill="#9B9B9B"
                        />
                      </svg>
                      Get help
                    </div>
                  </a>
                  <svg
                    class="c10"
                    data-testid="Dialog-closeButton"
                    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="18"
                      x2="6"
                      y1="6"
                      y2="18"
                    />
                    <line
                      x1="6"
                      x2="18"
                      y1="6"
                      y2="18"
                    />
                  </svg>
                </div>
              </div>
              <div
                class="c2 c3"
              >
                <div
                  class="c11 c3"
                >
                  <div
                    class="c12"
                  >
                    <svg
                      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"
                    >
                      <circle
                        cx="12"
                        cy="12"
                        r="10"
                      />
                      <line
                        x1="4.93"
                        x2="19.07"
                        y1="4.93"
                        y2="19.07"
                      />
                    </svg>
                  </div>
                  <div
                    class="c13 c3"
                  >
                    <div
                      class="c14 c15 css-4kpdx7"
                    >
                      Cancel order
                    </div>
                    <div
                      class="c16 c17 css-1urox24"
                    >
                      <div
                        class="c18"
                      >
                        Your swap could execute before cancellation is processed. Your network costs cannot be refunded. Do you wish to proceed?
                        <div
                          class="c8 c19 c20"
                        >
                          <div
                            class="c8 c19 c21"
                          >
                            <div
                              class="c14 c22 css-142zc9n"
                              data-testid="swap-li-label"
                            >
                              Network cost
                            </div>
                            <div
                              class="c14 c23 css-142zc9n"
                            >
                              <span>
                                -
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="c8 c24"
                >
                  <button
                    class="c25 c26"
                  >
                    <div
                      class="c27 c28"
                    />
                    Never mind
                  </button>
                  <button
                    class="c29 c30"
                  >
                    <div
                      class="c27 c28"
                    />
                    Proceed
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      data-focus-guard="true"
      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
      tabindex="0"
    />
  </reach-portal>
</body>
`;
