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

exports[`Security Tab should match snapshot 1`] = `
<div>
  <div
    class="settings-page__body"
  >
    <div
      class="settings-tab__error"
    >
      warning
    </div>
    <span
      class="settings-page__security-tab-sub-header__bold"
    >
      Security
    </span>
    <div
      class="settings-page__security-tab-sub-header"
    >
      Secret Recovery Phrase
    </div>
    <div
      class="settings-page__content-padded"
    >
      <button
        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
        data-testid="reveal-seed-words"
        type="danger"
      >
        Reveal Secret Recovery Phrase
      </button>
    </div>
    <span
      class="settings-page__security-tab-sub-header__bold"
    >
      Privacy
    </span>
    <div>
      <span
        class="settings-page__security-tab-sub-header"
      >
        Alerts
      </span>
    </div>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="settings-page__content-row"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Use phishing detection
          </span>
          <div
            class="settings-page__content-description"
          >
            Display a warning for phishing domains targeting Ethereum users
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="usePhishingDetection"
          >
            <label
              class="toggle-button toggle-button--on"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="true"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Transactions
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="settings-page__content-row"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Show balance and token price checker
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              We use 
              <a
                href="https://www.coingecko.com/"
                rel="noreferrer"
                target="_blank"
              >
                CoinGecko
              </a>
               and 
              <a
                href="https://www.cryptocompare.com/"
                rel="noreferrer"
                target="_blank"
              >
                CryptoCompare
              </a>
               APIs to display your balance and token price. 
              <a
                href="https://consensys.net/privacy-policy/"
                rel="noreferrer"
                target="_blank"
              >
                Privacy policy
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="currencyRateCheckToggle"
          >
            <label
              class="toggle-button toggle-button--on"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="true"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
      <div
        class="settings-page__content-row"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Show incoming transactions
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              This relies on 
              <a
                href="https://etherscan.io/privacyPolicy"
                rel="noopener noreferrer"
                target="_blank"
              >
                Etherscan
              </a>
               which will have access to your Ethereum address and your IP address. 
              <a
                href="https://consensys.net/privacy-policy/"
                rel="noopener noreferrer"
                target="_blank"
              >
                Privacy policy
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="showIncomingTransactions"
          >
            <label
              class="toggle-button toggle-button--off"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="false"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Network provider
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="settings-page__content-row"
        data-testid="advanced-setting-choose-your-network"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Choose your network
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              We use Infura as our remote procedure call (RPC) provider to offer the most reliable and private access to Ethereum data we can. You can choose your own RPC, but remember that any RPC will receive your IP address and Ethereum wallet to make transactions. Read our 
              <a
                href="https://consensys.net/privacy-policy/"
                rel="noopener noreferrer"
                target="_blank"
              >
                Privacy policy
              </a>
               to learn more about how Infura handles data.
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
          >
            <button
              class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
              type="secondary"
            >
              Add custom network
            </button>
          </div>
        </div>
      </div>
      <div
        class="settings-page__content-row"
        data-testid="setting-ipfs-gateway"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Add custom IPFS gateway
          </span>
          <div
            class="settings-page__content-description"
          >
            The IPFS gateway makes it possible to access and view data hosted by third parties. You can add a custom IPFS gateway or continue using the default.
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <label
            class="toggle-button toggle-button--on"
            tabindex="0"
          >
            <div
              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
            >
              <div
                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
              >
                <div
                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
                />
                <div
                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                />
              </div>
              <div
                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
              >
                <div
                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
                />
              </div>
              <input
                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                type="checkbox"
                value="dweb.link"
              />
            </div>
            <div
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
          >
            <div
              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
            >
              <div
                class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
                  dir="auto"
                  type="text"
                  value="dweb.link"
                />
              </div>
              
            </div>
          </div>
        </div>
        <div
          class="settings-page__content-item"
          id="ens-domains"
        >
          Show ENS domains in address bar
          <div
            class="settings-page__content-description"
          >
            <span
              class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
            >
              MetaMask lets you see ENS domains like "https://metamask.eth" right in your browser's address bar. Here's how it works:
            </span>
            <ul
              class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--padding-inline-start-4"
              style="list-style-type: circle;"
            >
              <li
                class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
              >
                MetaMask checks with Ethereum's ENS contract to find the code connected to the ENS name.
              </li>
              <li
                class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
              >
                If the code is linked to IPFS, it gets the content from the IPFS network.
              </li>
              <li
                class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
              >
                Then, you can see the content, usually a website or something similar.
              </li>
            </ul>
            <span
              class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
            >
              Regular browsers don't usually handle ENS or IPFS addresses, but MetaMask helps with that. Using this feature might share your IP address with IPFS third-party services.
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="ipfs-gateway-resolution-container"
          >
            <label
              class="toggle-button toggle-button--off"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="false"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Token autodetection
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="settings-page__content-row"
        data-testid="advanced-setting-gas-fee-estimation"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Autodetect tokens
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want the app to automatically pull data from those services. 
              <a
                href="https://consensys.net/privacy-policy/"
                rel="noopener noreferrer"
                target="_blank"
              >
                Learn More
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="autoDetectTokens"
          >
            <label
              class="toggle-button toggle-button--on"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="true"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
      <div
        class="settings-page__content-row"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Batch account balance requests
          </span>
          <div
            class="settings-page__content-description"
          >
            Get faster balance updates by batching account balance requests. This lets us fetch your account balances together, so you get quicker updates for an improved experience. When this feature is off, third parties may be less likely to associate your accounts with each other.
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="useMultiAccountBalanceChecker"
          >
            <label
              class="toggle-button toggle-button--off"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="false"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Metrics
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="settings-page__content-row"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Participate in MetaMetrics
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
              Participate in MetaMetrics to help us make MetaMask better
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-item-col"
            data-testid="participateInMetaMetrics"
          >
            <label
              class="toggle-button toggle-button--off"
              tabindex="0"
            >
              <div
                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
              >
                <div
                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
                >
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
                  />
                  <div
                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                  />
                </div>
                <div
                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
                >
                  <div
                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
                  />
                </div>
                <input
                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                  type="checkbox"
                  value="false"
                />
              </div>
              <div
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;