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

exports[`FontScalingPanel renders the font scaling UI 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsSubsection"
    data-testid="mx_FontScalingPanel"
  >
    <div
      class="mx_SettingsSubsectionHeading"
    >
      <h3
        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
      >
        Font size
      </h3>
    </div>
    <div
      class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
    >
      <div
        class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
      >
        <div
          class="mx_Spinner"
        >
          <div
            aria-label="Loading…"
            class="mx_Spinner_icon"
            data-testid="spinner"
            role="progressbar"
            style="width: 32px; height: 32px;"
          />
        </div>
      </div>
      <div
        class="mx_FontScalingPanel_fontSlider"
      >
        <div
          class="mx_FontScalingPanel_fontSlider_smallText"
        >
          Aa
        </div>
        <div
          class="mx_Slider"
        >
          <input
            aria-label="Font size"
            autocomplete="off"
            max="21"
            min="11"
            step="1"
            type="range"
            value="16"
          />
          <output
            class="mx_Slider_selection"
            style="left: calc(2px + 50% + 1.2em - 1.2em);"
          >
            <span
              class="mx_Slider_selection_label"
            >
              16
            </span>
          </output>
        </div>
        <div
          class="mx_FontScalingPanel_fontSlider_largeText"
        >
          Aa
        </div>
      </div>
      <span
        class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
      >
        <input
          id="checkbox_vY7Q4uEh9K"
          type="checkbox"
        />
        <label
          for="checkbox_vY7Q4uEh9K"
        >
          <div
            class="mx_Checkbox_background"
          >
            <div
              class="mx_Checkbox_checkmark"
            />
          </div>
          <div>
            Use custom size
          </div>
        </label>
      </span>
      <div
        class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
      >
        <input
          autocomplete="off"
          disabled=""
          id="font_size_field"
          label="Font size"
          placeholder="16"
          type="number"
          value="16"
        />
        <label
          for="font_size_field"
        >
          Font size
        </label>
      </div>
    </div>
  </div>
</DocumentFragment>
`;