{
  "namespace": "chat_settings",

  /* Table of Contents
    Common Objects
    Chat Settings Button
    Chat Settings Main Menu
      Chat Settings Main Menu - Top Button
      Chat Settings Main Menu - Section Buttons
      Chat Settings Main Menu - Panel
    Chat Settings Font Section
      Chat Settings Font Section - Top Button
      Chat Settings Font Section - Content
      Chat Settings Font Section - Panel
    Chat Settings Screen
  */

  /////////////////////////////////////////////////////////////////////////////
  // Common Objects
  /////////////////////////////////////////////////////////////////////////////

  "text_fitting_label": {
    "type": "label",
    "size": [ "default", 10 ],
    "text": "$text",
    "color": "$text_color"
  },

  "menu_button_content_left_padding": {
    "type": "panel",
    "size": [ 10, 0 ]
  },

  "menu_button_content_right_padding": {
    "type": "panel",
    "size": [ 5, 0 ]
  },

  "section_content_padding": {
    "type": "panel",
    "size": [ 0, 5 ]
  },

  "symbol_panel": {
    "type": "panel",
    "size": [ "100%y", "100%" ],
    "$text|default": "default text",
    "controls": [ { "label@chat_settings.text_fitting_label": {} } ]
  },

  // Used to get text to visually align correctly
  "align_text_panel": {
    "type": "panel",
    "size": [ "fill", "100%" ],
    "$text|default": "default text",
    "$text_alignment|default": "left",
    "controls": [
      {
        "label@chat_settings.text_fitting_label": {
          "size": [ "100%", 10 ],
          "text_alignment": "$text_alignment"
        }
      }
    ]
  },

  "section_content_panel_template": {
    "type": "input_panel",
    "size": [ "100%", "100%c" ],
    "$section_controls|default": [],
    "controls": [
      {
        "alignment_panel": {
          "type": "image",
          "texture": "textures/ui/legacybanner",
          "size": [ "100% - 16px", "100%c" ],
          "anchor_from": "right_middle",
          "anchor_to": "right_middle",
          "controls": [
            {
              "content_panel": {
                "type": "stack_panel",
                "orientation": "vertical",
                "size": [ "100% - 8px", "100%c" ],
                "layer": 2,
                "controls": "$section_controls"
              }
            }
          ]
        }
      }
    ]
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Button
  /////////////////////////////////////////////////////////////////////////////

  "gamepad_y_centering_panel": {
    "type": "panel",
    "size": [ 24, "100% - 2px" ],
    "controls": [
      {
        "gamepad_helper_y@common.gamepad_helper_y": {
          "$icon_description_bind_type": "none"
        }
      }
    ],
    "bindings": [
      {
        // Hide the centering panel when gamepad helpers are also hidden
        "binding_name": "#gamepad_helper_visible",
        "binding_name_override": "#visible"
      }
    ]
  },

  "chat_settings_button_content": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%c", "100%" ],
    "controls": [
      { "open_indicator@chat_settings.text_fitting_label": { "$text": "<" } },
      { "settings_label@chat_settings.text_fitting_label": { "$text": "chat.settings" } }
    ]
  },

  "chat_settings_button@common_buttons.light_content_button": {
    "$pressed_button_name": "button.open_chat_settings",
    "$focus_id": "settings_button_focus_id",
    "size": [ "100%c", "100% - 2px" ],
    "$anchor": "left_middle",

    // Make the button grow to fit its content
    "$button_state_panel": "common_buttons.new_ui_width_fitting_button_panel",
    "$button_type_panel": "common_buttons.width_fitting_button_content_panel",
    "$button_content": "chat_settings.chat_settings_button_content",
    "$button_size_override": [ "100%c", "100%" ],

    // There are currently no focusable elements alongside the Chat Settings Button
    "$focus_override_right": "FOCUS_OVERRIDE_STOP",
    "$focus_override_left": "FOCUS_OVERRIDE_STOP"
  },

  "chat_settings_button_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%c", "100%" ],
    "controls": [
      { "gamepad_y_icon@chat_settings.gamepad_y_centering_panel": {} },
      { "chat_settings_button@chat_settings.chat_settings_button": {} }
    ],
    "bindings": [
      {
        "binding_name": "#chat_settings_button_enabled",
        "binding_name_override": "#visible"
      }
    ]
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Main Menu
  /////////////////////////////////////////////////////////////////////////////

  // Templates //

  "right_symbol_button_content_template": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "100%" ],
    "$button_text|default": "button text",
    "$right_symbol|default": "~",
    "controls": [
      { "left_padding@chat_settings.menu_button_content_left_padding": {} },
      { "label@chat_settings.align_text_panel": { "$text": "$button_text" } },
      { "symbol@chat_settings.symbol_panel": { "$text": "$right_symbol" } }
    ]
  },

  "left_symbol_button_content_template": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "100%" ],
    "$button_text|default": "button text",
    "$left_symbol|default": "~",
    "controls": [
      { "symbol@chat_settings.symbol_panel": { "$text": "$left_symbol" } },
      { "label@chat_settings.align_text_panel": { "$text": "$button_text" } },
      { "right_padding@chat_settings.menu_button_content_right_padding": {} }
    ]
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Main Menu - Top Button

  "main_menu_top_button_content@chat_settings.right_symbol_button_content_template": {
    "$button_text": "chat.settings",
    "$right_symbol": "x"
  },

  "main_menu_top_button@common_buttons.light_content_button": {
    "size": [ "100%", 30 ],
    "$button_content": "chat_settings.main_menu_top_button_content",
    "$pressed_button_name": "button.close_chat_settings",

    "$focus_override_up": "FOCUS_OVERRIDE_STOP",
    "$focus_override_right": "FOCUS_OVERRIDE_STOP",
    "$focus_override_left": "FOCUS_OVERRIDE_STOP"
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Main Menu - Section Buttons

  // Templates //

  "expand_button_content_template@chat_settings.right_symbol_button_content_template": {
    "$right_symbol": ">"
  },

  "menu_button_template@common_buttons.light_content_button": {
    // Note: Children that inherit this template need to define these variables
    // "$pressed_button_name", "$button_content", "$button_text"
    "type": "button",
    "size": "$menu_button_size",
    "anchor_from": "right_middle",
    "anchor_to": "right_middle",

    "$focus_override_right": "FOCUS_OVERRIDE_STOP",
    "$focus_override_left": "FOCUS_OVERRIDE_STOP"
  },

  // This panel exists so that the button will be right aligned
  "menu_button_panel_template": {
    "type": "panel",
    "size": [ "100%", "100%c" ],
    // The section button to show in the Chat Settings Main Menu
    "$menu_button|default": "font_menu_button",
    // The size of the section button
    "$menu_button_size|default": [ "100% - 16px", 30 ],
    "controls": [ { "button@chat_settings.$menu_button": {} } ]
  },

  // Buttons //

  "font_menu_button@chat_settings.menu_button_template": {
    "$pressed_button_name": "button.open_font_section",
    "$button_content": "chat_settings.expand_button_content_template",
    // Alter the button text for the content template
    "$button_text": "chat.font",

    "$focus_override_down": "FOCUS_OVERRIDE_STOP"
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Main Menu - Panel

  "chat_settings_main_menu": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "40%", "100%" ],
    "anchor_from": "right_middle",
    "anchor_to": "right_middle",
    "controls": [
      { "settings_title_button@chat_settings.main_menu_top_button": {} },
      { "font_section_button@chat_settings.menu_button_panel_template": { "$menu_button": "font_menu_button" } }
    ],
    "bindings": [
      {
        "binding_name": "#chat_settings_main_enabled",
        "binding_name_override": "#visible"
      }
    ]
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Font Section
  /////////////////////////////////////////////////////////////////////////////

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Font Section - Top Button

  "font_section_top_button_content@chat_settings.left_symbol_button_content_template": {
    "$button_text": "chat.font",
    "$left_symbol": "<"
  },

  "font_section_top_button@common_buttons.light_content_button": {
    "size": [ "100%", 30 ],
    "$button_content": "chat_settings.font_section_top_button_content",
    "$pressed_button_name": "button.chat_settings_menu_cancel",

    "$focus_override_up": "FOCUS_OVERRIDE_STOP",
    "$focus_override_right": "FOCUS_OVERRIDE_STOP",
    "$focus_override_left": "FOCUS_OVERRIDE_STOP"
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Font Section - Content

  // Message Spacing //

  "message_spacing_slider@settings_common.option_slider": {
    "$option_label": "#chat_message_spacing_custom_text",
    "$slider_name": "chat_message_spacing",
    "$slider_value_binding_name": "#chat_message_spacing",
    "$option_enabled_binding_name": "#chat_message_spacing_enabled",

    "$focus_override_right": "FOCUS_OVERRIDE_STOP",
    "$focus_override_left": "FOCUS_OVERRIDE_STOP",

    "$label_bindings": [
      {
        "binding_name": "#chat_message_spacing_custom_text"
      }
    ]
  },

  // Content Panel //

  "font_section_content_panel@chat_settings.section_content_panel_template": {
    "$section_controls": [
      { "top_padding@chat_settings.section_content_padding": {} },
      { "message_spacing@chat_settings.message_spacing_slider": {} }
    ]
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Font Section - Panel

  "font_section_panel": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "40%", "100%" ],
    "anchor_from": "right_middle",
    "anchor_to": "right_middle",
    "controls": [
      { "font_title_button@chat_settings.font_section_top_button": {} },
      { "font_section_options@chat_settings.font_section_content_panel": {} }
    ],
    "bindings": [
      {
        "binding_name": "#chat_settings_font_section_enabled",
        "binding_name_override": "#visible"
      }
    ]
  },

  /////////////////////////////////////////////////////////////////////////////
  // Chat Settings Screen
  /////////////////////////////////////////////////////////////////////////////

  "screen_background@common.screen_background": {
    "$screen_background_alpha": 0.35
  },

  // This stops input from reaching buttons underneath, and can have button_mappings
  "chat_settings_screen": {
    "type": "input_panel",
    "modal": true,
    "controls": [
      {
        "background_button@common_buttons.transparent_content_button": {
          "$pressed_button_name": "button.close_chat_settings",
          "$button_content": "chat_settings.screen_background",
          "$button_content_size": [ "100%", "100%" ],
          "$button_image_visible": false,
          "focus_enabled": false,
          "layer": 0
        }
      },
      { "main_menu@chat_settings.chat_settings_main_menu": { "layer": 5 } },
      { "font_section@chat_settings.font_section_panel": { "layer": 5 } }
    ],
    "bindings": [
      {
        "binding_name": "#chat_settings_enabled",
        "binding_name_override": "#visible"
      }
    ],
    "button_mappings": [
      // Original Mappings - defined in common.base_screen //
      {
        "from_button_id": "button.menu_up",
        "to_button_id": "button.menu_up",
        "mapping_type": "global",
        "scope": "view"
      },
      {
        "from_button_id": "button.menu_down",
        "to_button_id": "button.menu_down",
        "mapping_type": "global",
        "scope": "view"
      },
      {
        "from_button_id": "button.menu_left",
        "to_button_id": "button.menu_left",
        "mapping_type": "global",
        "scope": "view"
      },
      {
        "from_button_id": "button.menu_right",
        "to_button_id": "button.menu_right",
        "mapping_type": "global",
        "scope": "view"
      },

      // Extra Mappings //
      {
        "from_button_id": "button.menu_exit",
        "to_button_id": "button.chat_settings_menu_cancel",
        "mapping_type": "global"
      },
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.chat_settings_menu_cancel",
        "mapping_type": "global"
      },

      // Controller Mappings //
      {
        "from_button_id": "button.controller_secondary_select",
        "to_button_id": "button.close_chat_settings",
        "handle_select": false,
        "handle_deselect": false,
        "mapping_type": "global"
      }
    ]
  }
}