// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`AppearanceUserSettingsTab should render 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsTab"
    data-testid="mx_AppearanceUserSettingsTab"
  >
    <div
      class="mx_SettingsTab_sections"
    >
      <div
        class="mx_SettingsSection"
      >
        <div
          class="mx_SettingsSection_subSections"
        >
          <div
            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
            data-testid="themePanel"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Theme
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
            >
              <form
                class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
              >
                <div
                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                >
                  <div
                    class="_inline-field-control_19upo_44"
                  >
                    <div
                      class="_container_1ug7n_10"
                    >
                      <input
                        class="_input_1ug7n_18"
                        disabled=""
                        id="radix-react-use-id-1"
                        name="themeSelector"
                        title=""
                        type="radio"
                        value="light"
                      />
                      <div
                        class="_ui_1ug7n_19"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_19upo_38"
                  >
                    <label
                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
                      for="radix-react-use-id-1"
                    >
                      Light
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
                >
                  <div
                    class="_inline-field-control_19upo_44"
                  >
                    <div
                      class="_container_1ug7n_10"
                    >
                      <input
                        class="_input_1ug7n_18"
                        disabled=""
                        id="radix-react-use-id-2"
                        name="themeSelector"
                        title=""
                        type="radio"
                        value="dark"
                      />
                      <div
                        class="_ui_1ug7n_19"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_19upo_38"
                  >
                    <label
                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
                      for="radix-react-use-id-2"
                    >
                      Dark
                    </label>
                  </div>
                </div>
                <div
                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                >
                  <div
                    class="_inline-field-control_19upo_44"
                  >
                    <div
                      class="_container_1ug7n_10"
                    >
                      <input
                        class="_input_1ug7n_18"
                        disabled=""
                        id="radix-react-use-id-3"
                        name="themeSelector"
                        title=""
                        type="radio"
                        value="light-high-contrast"
                      />
                      <div
                        class="_ui_1ug7n_19"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_19upo_38"
                  >
                    <label
                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
                      for="radix-react-use-id-3"
                    >
                      High contrast
                    </label>
                  </div>
                </div>
              </form>
            </div>
            <div
              class="_separator_13qwf_8"
              data-kind="primary"
              data-orientation="horizontal"
              role="separator"
            />
          </div>
          <div
            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
            data-testid="layoutPanel"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Message layout
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
            >
              <form
                class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
              >
                <div
                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                >
                  <label
                    aria-label="Modern"
                    class="_label_19upo_59"
                    for="radix-react-use-id-4"
                  >
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                    >
                      <div
                        class="_container_1ug7n_10"
                      >
                        <input
                          checked=""
                          class="_input_1ug7n_18"
                          id="radix-react-use-id-4"
                          name="layout"
                          title=""
                          type="radio"
                          value="group"
                        />
                        <div
                          class="_ui_1ug7n_19"
                        />
                      </div>
                      <span>
                        Modern
                      </span>
                    </div>
                    <hr
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
                    />
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
                      role="presentation"
                    >
                      <div
                        aria-atomic="true"
                        aria-live="off"
                        class="mx_EventTile"
                        data-event-id="$9999999999999999999999999999999999999999999"
                        data-has-reply="false"
                        data-layout="group"
                        data-scroll-tokens="$9999999999999999999999999999999999999999999"
                        data-self="true"
                        tabindex="-1"
                      >
                        <div
                          class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8"
                          role="button"
                          tabindex="0"
                        >
                          <span
                            class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName"
                            dir="auto"
                          >
                            @userId:matrix.org
                          </span>
                        </div>
                        <div
                          class="mx_EventTile_avatar"
                        >
                          <span
                            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                            data-color="2"
                            data-testid="avatar-img"
                            data-type="round"
                            role="presentation"
                            style="--cpd-avatar-size: 30px;"
                            title="@userId:matrix.org"
                          >
                            u
                          </span>
                        </div>
                        <div
                          class="mx_EventTile_line"
                          id="1"
                        >
                          <div
                            class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
                          >
                            <div
                              class="mx_EventTile_body translate"
                              dir="auto"
                            >
                              Hey you. You're the best!
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </label>
                </div>
                <div
                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                >
                  <label
                    aria-label="Message bubbles"
                    class="_label_19upo_59"
                    for="radix-react-use-id-5"
                  >
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                    >
                      <div
                        class="_container_1ug7n_10"
                      >
                        <input
                          class="_input_1ug7n_18"
                          id="radix-react-use-id-5"
                          name="layout"
                          title=""
                          type="radio"
                          value="bubble"
                        />
                        <div
                          class="_ui_1ug7n_19"
                        />
                      </div>
                      <span>
                        Message bubbles
                      </span>
                    </div>
                    <hr
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
                    />
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
                      role="presentation"
                    >
                      <div
                        aria-atomic="true"
                        aria-live="off"
                        class="mx_EventTile"
                        data-event-id="$9999999999999999999999999999999999999999999"
                        data-has-reply="false"
                        data-layout="bubble"
                        data-scroll-tokens="$9999999999999999999999999999999999999999999"
                        data-self="true"
                        tabindex="-1"
                      >
                        <div
                          class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8"
                          role="button"
                          tabindex="0"
                        >
                          <span
                            class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName"
                            dir="auto"
                          >
                            @userId:matrix.org
                          </span>
                        </div>
                        <div
                          class="mx_EventTile_avatar"
                        >
                          <span
                            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                            data-color="2"
                            data-testid="avatar-img"
                            data-type="round"
                            role="presentation"
                            style="--cpd-avatar-size: 30px;"
                            title="@userId:matrix.org"
                          >
                            u
                          </span>
                        </div>
                        <div
                          class="mx_EventTile_line"
                          id="2"
                        >
                          <div
                            class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
                          >
                            <div
                              class="mx_EventTile_body translate"
                              dir="auto"
                            >
                              Hey you. You're the best!
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </label>
                </div>
                <div
                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                >
                  <label
                    aria-label="IRC (experimental)"
                    class="_label_19upo_59"
                    for="radix-react-use-id-6"
                  >
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                    >
                      <div
                        class="_container_1ug7n_10"
                      >
                        <input
                          class="_input_1ug7n_18"
                          id="radix-react-use-id-6"
                          name="layout"
                          title=""
                          type="radio"
                          value="irc"
                        />
                        <div
                          class="_ui_1ug7n_19"
                        />
                      </div>
                      <span>
                        IRC (experimental)
                      </span>
                    </div>
                    <hr
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
                    />
                    <div
                      class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview mx_IRCLayout"
                      role="presentation"
                    >
                      <div
                        aria-atomic="true"
                        aria-live="off"
                        class="mx_EventTile"
                        data-event-id="$9999999999999999999999999999999999999999999"
                        data-has-reply="false"
                        data-layout="irc"
                        data-scroll-tokens="$9999999999999999999999999999999999999999999"
                        data-self="true"
                        tabindex="-1"
                      >
                        <span
                          class="mx_MessageTimestamp"
                        />
                        <div
                          class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8"
                          role="button"
                          tabindex="0"
                        >
                          <span
                            class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName"
                            dir="auto"
                          >
                            @userId:matrix.org
                          </span>
                        </div>
                        <div
                          class="mx_EventTile_avatar"
                        >
                          <span
                            class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
                            data-color="2"
                            data-testid="avatar-img"
                            data-type="round"
                            role="presentation"
                            style="--cpd-avatar-size: 14px;"
                            title="@userId:matrix.org"
                          >
                            u
                          </span>
                        </div>
                        <div
                          class="mx_EventTile_line"
                          id="3"
                        >
                          <div
                            class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
                          >
                            <div
                              class="mx_EventTile_body translate"
                              dir="auto"
                            >
                              Hey you. You're the best!
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </label>
                </div>
              </form>
              <form
                class="_root_19upo_16"
              >
                <div
                  class="_inline-field_19upo_32"
                >
                  <div
                    class="_inline-field-control_19upo_44"
                  >
                    <div
                      class="_container_udcm8_10"
                    >
                      <input
                        aria-describedby="radix-react-use-id-7"
                        class="_input_udcm8_24"
                        id="radix-react-use-id-8"
                        name="compactLayout"
                        role="switch"
                        title=""
                        type="checkbox"
                      />
                      <div
                        class="_ui_udcm8_34"
                      />
                    </div>
                  </div>
                  <div
                    class="_inline-field-body_19upo_38"
                  >
                    <label
                      class="_label_19upo_59"
                      for="radix-react-use-id-8"
                    >
                      Show compact text and messages
                    </label>
                    <span
                      class="_message_19upo_85 _help-message_19upo_91"
                      id="radix-react-use-id-7"
                    >
                      Modern layout must be selected to use this feature.
                    </span>
                  </div>
                </div>
              </form>
            </div>
            <div
              class="_separator_13qwf_8"
              data-kind="primary"
              data-orientation="horizontal"
              role="separator"
            />
          </div>
          <div
            class="mx_SettingsSubsection"
            data-testid="mx_FontScalingPanel"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Font size
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
            >
              <div
                class="mx_Field mx_Field_select mx_FontScalingPanel_Dropdown"
              >
                <select
                  id="mx_Field_1"
                  label="Font size"
                  placeholder="Font size"
                  type="text"
                >
                  <option
                    value="-7"
                  >
                    9
                  </option>
                  <option
                    value="-6"
                  >
                    10
                  </option>
                  <option
                    value="-5"
                  >
                    11
                  </option>
                  <option
                    value="-4"
                  >
                    12
                  </option>
                  <option
                    value="-3"
                  >
                    13
                  </option>
                  <option
                    value="-2"
                  >
                    14
                  </option>
                  <option
                    value="-1"
                  >
                    15
                  </option>
                  <option
                    value="0"
                  >
                    16 (default)
                  </option>
                  <option
                    value="1"
                  >
                    17
                  </option>
                  <option
                    value="2"
                  >
                    18
                  </option>
                  <option
                    value="4"
                  >
                    20
                  </option>
                  <option
                    value="6"
                  >
                    22
                  </option>
                  <option
                    value="8"
                  >
                    24
                  </option>
                  <option
                    value="10"
                  >
                    26
                  </option>
                  <option
                    value="12"
                  >
                    28
                  </option>
                  <option
                    value="14"
                  >
                    30
                  </option>
                  <option
                    value="16"
                  >
                    32
                  </option>
                  <option
                    value="18"
                  >
                    34
                  </option>
                  <option
                    value="20"
                  >
                    36
                  </option>
                </select>
                <label
                  for="mx_Field_1"
                >
                  Font size
                </label>
                <svg
                  class="mx_Field_select_chevron"
                  fill="currentColor"
                  height="1em"
                  viewBox="0 0 24 24"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                  />
                </svg>
              </div>
              <div
                class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
              >
                <div
                  class="mx_Spinner"
                >
                  <svg
                    aria-label="Loading…"
                    class="_icon_1855a_18"
                    data-testid="spinner"
                    fill="currentColor"
                    height="1em"
                    role="progressbar"
                    style="width: 32px; height: 32px;"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      clip-rule="evenodd"
                      d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
                      fill-rule="evenodd"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_noHeading"
            >
              <div
                aria-expanded="false"
                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
                role="button"
                tabindex="0"
              >
                Show advanced
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Image size in the timeline
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_ImageSizePanel_radios"
              >
                <label>
                  <div
                    class="mx_ImageSizePanel_size"
                  />
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
                  >
                    <input
                      checked=""
                      name="image_size"
                      type="radio"
                      value="normal"
                    />
                    <div>
                      <div />
                    </div>
                    <div
                      class="mx_StyledRadioButton_content"
                    >
                      Default
                    </div>
                    <div
                      class="mx_StyledRadioButton_spacer"
                    />
                  </label>
                </label>
                <label>
                  <div
                    class="mx_ImageSizePanel_size"
                  />
                  <label
                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
                  >
                    <input
                      name="image_size"
                      type="radio"
                      value="large"
                    />
                    <div>
                      <div />
                    </div>
                    <div
                      class="mx_StyledRadioButton_content"
                    >
                      Large
                    </div>
                    <div
                      class="mx_StyledRadioButton_spacer"
                    />
                  </label>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
