From 4e710c7d2f1df7571bd017599f659595562c63d3 Mon Sep 17 00:00:00 2001
From: Dario <dariosamo@gmail.com>
Date: Wed, 8 Jan 2025 21:14:55 -0300
Subject: [PATCH] Rewrite mod details under new UI system.

---
 CMakeLists.txt                                |    8 +-
 assets/config_menu.rml                        |   10 +-
 assets/config_menu/mods.rml                   |    9 +
 assets/launcher.rml                           |    5 +-
 assets/recomp.rcss                            | 2587 ++++++++++++++++-
 assets/scss/styles/components/ModDetails.scss |   74 -
 assets/scss/styles/components/ModMenu.scss    |   56 +-
 .../scss/styles/components/_components.scss   |    1 -
 include/recomp_ui.h                           |    1 +
 src/ui/elements/ElementModDetailsPanel.cpp    |   72 -
 src/ui/elements/ElementModDetailsPanel.h      |   24 -
 src/ui/elements/ElementModMenu.cpp            |   51 +-
 src/ui/elements/ElementModMenu.h              |    5 +-
 src/ui/elements/ui_button.cpp                 |   69 +
 src/ui/elements/ui_button.h                   |   28 +
 src/ui/elements/ui_container.cpp              |   14 +
 src/ui/elements/ui_container.h                |   12 +
 src/ui/elements/ui_element.cpp                |  415 +++
 src/ui/elements/ui_element.h                  |  211 ++
 src/ui/elements/ui_image.cpp                  |   11 +
 src/ui/elements/ui_image.h                    |   12 +
 src/ui/elements/ui_label.cpp                  |   29 +
 src/ui/elements/ui_label.h                    |   18 +
 src/ui/elements/ui_mod_details_panel.cpp      |   73 +
 src/ui/elements/ui_mod_details_panel.h        |   37 +
 src/ui/elements/ui_toggle.cpp                 |   82 +
 src/ui/elements/ui_toggle.h                   |   27 +
 src/ui/ui_elements.cpp                        |    1 -
 src/ui/ui_elements.h                          |    1 -
 src/ui/ui_launcher.cpp                        |    6 +
 src/ui/ui_renderer.cpp                        |  193 +-
 31 files changed, 3765 insertions(+), 377 deletions(-)
 create mode 100644 assets/config_menu/mods.rml
 delete mode 100644 assets/scss/styles/components/ModDetails.scss
 delete mode 100644 src/ui/elements/ElementModDetailsPanel.cpp
 delete mode 100644 src/ui/elements/ElementModDetailsPanel.h
 create mode 100644 src/ui/elements/ui_button.cpp
 create mode 100644 src/ui/elements/ui_button.h
 create mode 100644 src/ui/elements/ui_container.cpp
 create mode 100644 src/ui/elements/ui_container.h
 create mode 100644 src/ui/elements/ui_element.cpp
 create mode 100644 src/ui/elements/ui_element.h
 create mode 100644 src/ui/elements/ui_image.cpp
 create mode 100644 src/ui/elements/ui_image.h
 create mode 100644 src/ui/elements/ui_label.cpp
 create mode 100644 src/ui/elements/ui_label.h
 create mode 100644 src/ui/elements/ui_mod_details_panel.cpp
 create mode 100644 src/ui/elements/ui_mod_details_panel.h
 create mode 100644 src/ui/elements/ui_toggle.cpp
 create mode 100644 src/ui/elements/ui_toggle.h

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 1713919..37e088f 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -172,8 +172,14 @@ set (SOURCES
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRange.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeTextField.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementModMenu.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementModDetailsPanel.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/presets.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_button.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_container.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_element.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_image.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_label.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_mod_details_panel.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_toggle.cpp
 
     ${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp
     ${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp
diff --git a/assets/config_menu.rml b/assets/config_menu.rml
index c8609bc..d18d254 100644
--- a/assets/config_menu.rml
+++ b/assets/config_menu.rml
@@ -26,7 +26,8 @@
 	<link type="text/template" href="config_menu/general.rml" />
 	<link type="text/template" href="config_menu/controls.rml" />
 	<link type="text/template" href="config_menu/graphics.rml" />
-	<link type="text/template" href="config_menu/sound.rml" />
+  <link type="text/template" href="config_menu/sound.rml" />
+  <link type="text/template" href="config_menu/mods.rml" />
 	<link type="text/template" href="config_menu/debug.rml" />
 	<link type="text/template" href="config_menu/cheats.rml" />
 	<link type="text/template" href="components/prompt.rml" />
@@ -65,6 +66,13 @@
 						<panel class="config" data-model="sound_options_model">
 							<template src="config-menu__sound" />
 						</panel>
+						<tab class="tab" id="tab_mods">
+							<div>Mods</div>
+							<div class="tab__indicator"></div>
+						</tab>
+						<panel class="config">
+							<template src="config-menu__mods" />
+						</panel>
 						<tab class="tab" data-model="debug_model" data-if="debug_enabled" id="tab_debug">
 							<div>Debug</div>
 							<div class="tab__indicator"></div>
diff --git a/assets/config_menu/mods.rml b/assets/config_menu/mods.rml
new file mode 100644
index 0000000..03db0b1
--- /dev/null
+++ b/assets/config_menu/mods.rml
@@ -0,0 +1,9 @@
+<template name="config-menu__mods">
+    <head>
+    </head>
+    <body>
+        <form class="config__form">
+            <recomp-mod-menu />
+        </form>
+    </body>
+</template>
diff --git a/assets/launcher.rml b/assets/launcher.rml
index 805d5be..53cf8e6 100644
--- a/assets/launcher.rml
+++ b/assets/launcher.rml
@@ -51,6 +51,10 @@
 							<div class="menu-list-item__bullet">•</div>
 							<div class="menu-list-item__label">Settings</div>
 						</button>
+						<button onclick="open_mods" class="menu-list-item menu-list-item--right">
+							<div class="menu-list-item__bullet">•</div>
+							<div class="menu-list-item__label">Mods</div>
+						</button>
 						<button onclick="exit_game" class="menu-list-item menu-list-item--right">
 							<div class="menu-list-item__bullet">•</div>
 							<div class="menu-list-item__label">Exit</div>
@@ -61,7 +65,6 @@
 					<label>v{{version_number}}</label>
 				</div>
 			</div>
-			<recomp-mod-menu />
 		</div>
 	</body>
 </rml>
diff --git a/assets/recomp.rcss b/assets/recomp.rcss
index 4f8f2b8..fd21892 100644
--- a/assets/recomp.rcss
+++ b/assets/recomp.rcss
@@ -1 +1,2586 @@
-h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.mod-details__title,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.mod-details__authors,.mod-details__description,.mod-details__version,.mod-menu__list-entry-name,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry-description,.config-description__contents,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.mod-details__title,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.mod-details__authors,.mod-details__description,.mod-details__version,.mod-menu__list-entry-name,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry-description,.config-description__contents,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;padding:1.5dp;background:#08070d}body{color:#fff;font-family:chiaro;font-size:20dp;font-style:normal;font-weight:normal}div#window{position:relative;box-sizing:border-box;width:100%;height:100%;border-color:rgba(255,255,255,.2);background-color:#121018}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;text-align:left;cursor:text}textarea{padding:14dp 12dp 10dp;text-align:left;cursor:text}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;height:auto;margin:0;border-width:1.1dp;border-color:#000;background-color:#fff;font-size:15dp;line-height:1;decorator:none}input.radio{flex:0;width:0dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}input.checkbox{width:20dp;height:20dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}scrollbarvertical,scrollbarhorizontal{margin:0;border:0}scrollbarvertical slidertrack,scrollbarhorizontal slidertrack{background:#dabaf7;opacity:.05}scrollbarvertical sliderbar,scrollbarhorizontal sliderbar{border-radius:5dp;background:#dabaf7;opacity:.1}scrollbarvertical sliderbar:hover:not(:active),scrollbarhorizontal sliderbar:hover:not(:active){opacity:.2}scrollbarvertical sliderbar:active,scrollbarhorizontal sliderbar:active{opacity:.3}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc,scrollbarhorizontal sliderarrowdec,scrollbarhorizontal sliderarrowinc{width:0;height:0}scrollbarvertical{width:12dp}scrollbarvertical slidertrack{width:12dp}scrollbarvertical sliderbar{width:12dp}scrollbarhorizontal{height:12dp}scrollbarhorizontal slidertrack{height:12dp}scrollbarhorizontal sliderbar{height:12dp}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:64dp;background-color:rgba(255,255,255,.1)}.centered-page__modal{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.centered-page__modal>.tabs{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto}.centered-page__modal panels{flex:1 1 100%}.centered-page__controls{display:flex;position:absolute;bottom:24dp;flex-direction:row;align-items:center;justify-content:center;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 auto}.centered-page__controls>label{display:inline-block;align-items:center;justify-content:space-between;width:auto;height:24dp}.centered-page__controls>label:not(:last-child){margin-right:40dp}.centered-page__controls>label>span:first-child{margin-right:4dp}.control-option{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:4dp 16dp 4dp 20dp;border-radius:8dp;background-color:rgba(0,0,0,0)}.control-option svg{image-color:#ccc}.control-option svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.control-option:focus-visible:not(:disabled,[disabled]),.control-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.control-option:focus-visible:not(:disabled,[disabled]) svg,.control-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.control-option:disabled,.control-option[disabled]{opacity:.5}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"]{border-color:#f86039}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon{opacity:0}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording{opacity:1}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"]{border-color:#f86039}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon{opacity:0}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording{opacity:1}.control-option .icon-button{flex:1 1 auto}.control-option__label{flex:2 1 300dp;height:auto;white-space:nowrap}.control-option__bindings{display:flex;position:relative;flex:2 1 400dp;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:56dp;padding:0 12dp 0 4dp}.control-option__binding{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;position:relative;flex:1 1 100%;align-items:center;justify-content:center;width:100%;height:56dp;margin:0 4dp;padding:8dp;border-width:1.1dp;border-radius:8dp;border-color:rgba(190,184,219,.1);background-color:rgba(190,184,219,.1)}.control-option__binding svg{image-color:#ccc}.control-option__binding svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.control-option__binding:focus,.control-option__binding:hover{color:#f2f2f2;border-color:#f2f2f2;background-color:rgba(255,255,255,.1)}.control-option__binding:focus svg,.control-option__binding:hover svg{image-color:#f2f2f2}.control-option__binding:active{color:#f5f5f5}.control-option__binding:active svg{image-color:#f5f5f5}.control-option__binding:disabled,.control-option__binding[disabled]{color:#ccc;opacity:.5}.control-option__binding:disabled svg,.control-option__binding[disabled] svg{image-color:#ccc}.control-option__binding:not([disabled]){cursor:pointer}.control-option__binding-icon{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;opacity:1}@keyframes control-option__binding-recording-scale{0%{transform:scale(1)}50%{transform:scale(0.85)}100%{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale;border-radius:24dp;background-color:#f86039}.control-option__binding-recording .control-option__binding-edge{position:absolute;top:50%;left:50%;width:36dp;height:36dp;transform:translate(-50%, -50%)}.control-option__binding-recording .control-option__binding-edge>svg.control-option__binding-edge-svg{width:36dp;height:36dp;image-color:#f86039}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;margin:0;padding:20dp 24dp;transition:color .05s linear-in-out;opacity:.9;background-color:rgba(0,0,0,0);color:rgba(255,255,255,.6)}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.rmlui-window:not([mouse-active]) .tab:focus{transition:none;animation:blue-pulse .75s infinite}.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator{animation:blue-pulse-background .75s infinite}.tab:focus,.tab:hover{opacity:1;color:#f2f2f2;cursor:pointer}.tab__indicator{position:absolute;right:0;bottom:2dp;left:0;height:2dp;background-color:rgba(0,0,0,0)}.config__icon-buttons{display:flex;position:absolute;top:8dp;right:0dp;flex-direction:row;align-items:center;justify-content:flex-end;width:auto}.config__icon-buttons .icon-button{margin:0 8dp}.config__form{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;width:100%;height:100%;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__wrapper{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config__wrapper p{padding:16dp;line-height:28dp;white-space:pre-line}.config__wrapper p b{color:#b97df2}.config__wrapper p i{color:#e9cd35;font-style:normal}.config__hz-wrapper{display:flex;flex:1 1 100%;flex-direction:row;width:100%;height:100%;border-radius:0dp;text-align:left}.config__header,.config__footer{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);padding:12dp 20dp}.config__footer{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);padding:20dp 20dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__header-left{display:flex;flex:1 1 auto;flex-direction:row}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-group{position:relative}.config-group--scrollable{flex:1 1 100%;width:auto;height:auto;padding:0 0 0 16dp}.config-group--scrollable .config-group__wrapper{max-height:100%;overflow-y:auto}.config-group__title{color:#b97df2}.config-group__title--hidden{display:none}.config-group__wrapper{padding:16dp 0}.config-option{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:16dp 0dp 24dp}.config-option--hz{flex-direction:row-reverse;align-items:center;margin-top:4dp;margin-bottom:4dp}.config-option--hz .config-option__title{flex:1 1 100%}.config-option--hz .config-option__list{flex:1 1 auto;width:auto}.config-option--hz:first-child{margin-top:0}.config-option--hz:last-child{margin-bottom:0}.config-option__title{padding:0 12dp}.config-option__radio-tabs,.config-option__list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;height:auto;padding:0}.config-option__radio-tabs input:first-of-type,.config-option__list input:first-of-type{nav-left:none}.config-option__radio-tabs input:last-of-type,.config-option__list input:last-of-type{nav-right:none}.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:block;position:relative;height:auto;margin:4dp 12dp 0;padding:8dp 0;color:rgba(255,255,255,.6);tab-index:none}.config-option__radio-tabs .config-option__tab-label:hover,.config-option__list .config-option__tab-label:hover{color:#f2f2f2;cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper,.config-option__list .config-option__checkbox-wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;width:32dp;height:32dp;margin:4dp 12dp 0;border-radius:8dp;opacity:.5;background-color:rgba(190,184,219,.1);cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper:hover,.config-option__list .config-option__checkbox-wrapper:hover{opacity:1}.config-option__radio-tabs .config-option__checkbox-wrapper[checked],.config-option__list .config-option__checkbox-wrapper[checked]{background-color:#33f}.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio,.config-option__list input.radio{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label{border-bottom:1dp;border-color:#f2f2f2;color:#f2f2f2}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label:hover,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label:hover{cursor:default}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus+.config-option__tab-label{transition:none;animation:blue-pulse .75s infinite;border-color:#17d6e8;color:#17d6e8}.config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__radio-tabs input.radio:not(:disabled):hover+.config-option__tab-label,.config-option__list input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__list input.radio:not(:disabled):hover+.config-option__tab-label{color:#f2f2f2}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label,.config-option__list input.radio:disabled+.config-option__tab-label{opacity:.5}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label:hover,.config-option__list input.radio:disabled+.config-option__tab-label:hover{cursor:default}.config-option__radio-tabs input.range slidertrack,.config-option__list input.range slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option__radio-tabs input.range sliderbar,.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus,.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option__radio-tabs input.range sliderbar:hover,.config-option__list input.range sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option__radio-tabs input.range sliderbar:active,.config-option__radio-tabs input.range slidertrack:active+sliderbar,.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__radio-tabs input.range sliderarrowdec,.config-option__radio-tabs input.range sliderarrowinc,.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__details{height:18dp;margin:14dp 12dp 0;color:#b97df2}.config-option-color{width:100%;max-width:360dp;height:auto;margin-top:4dp;margin-left:12dp;padding:0}.config-option-color__preview-wrapper{display:flex;flex-direction:row;width:100%;height:72dp}.config-option-color__preview-block{display:block;width:88dp;height:100%;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2)}.config-option-color__hsv-wrapper{display:flex;flex:1 1 100%;flex-direction:column;width:auto;height:auto;padding-left:8dp}.config-option-color__hsv-wrapper .config-option-range{flex:1 1 auto}.config-option-color__hsv-wrapper .config-option-range label{min-width:72dp}.config-option-color__hsv-wrapper .config-option-range input{flex:1 1 auto}.config-option-range{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:360dp;height:auto;margin-top:4dp;padding:0}.config-option-range__label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-range__range-input{flex:1}.config-option-range__range-input slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option-range__range-input sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option-range__range-input sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option-range__range-input sliderbar:active,.config-option-range__range-input slidertrack:active+sliderbar{background-color:#17d6e8}.config-option-range__range-input sliderarrowdec,.config-option-range__range-input sliderarrowinc{display:none}.config-option__range-wrapper{max-width:360dp;margin-top:4dp}.config-option__range-label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-dropdown,.config-option-textfield{display:flex;position:relative;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;height:auto;padding:8dp 24dp 8dp 12dp}.config-option-dropdown__select,.config-option-textfield__select{display:block;height:48dp;padding:14dp;cursor:pointer}.config-option-dropdown__wrapper,.config-option-textfield__wrapper{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;padding:2dp 0 12dp;cursor:text}.config-option-dropdown__wrapper input,.config-option-textfield__wrapper input{width:100%;height:auto;vertical-align:middle}.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-width:1.1dp;border-color:rgba(255,255,255,.5);position:relative;box-sizing:border-box;flex:1 1 100%;width:auto;border-radius:12dp;background-color:rgba(255,255,255,.05)}.config-option-dropdown__select svg,.config-option-dropdown__wrapper svg,.config-option-textfield__select svg,.config-option-textfield__wrapper svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-option-dropdown__select:hover,.config-option-dropdown__select:focus,.config-option-dropdown__wrapper:hover,.config-option-dropdown__wrapper:focus,.config-option-textfield__select:hover,.config-option-textfield__select:focus,.config-option-textfield__wrapper:hover,.config-option-textfield__wrapper:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-option-dropdown__select selectvalue,.config-option-dropdown__wrapper selectvalue,.config-option-textfield__select selectvalue,.config-option-textfield__wrapper selectvalue{display:inline;height:auto;margin:auto 0}.config-option-dropdown__select selectbox,.config-option-dropdown__wrapper selectbox,.config-option-textfield__select selectbox,.config-option-textfield__wrapper selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.2);margin-top:2dp;padding:4dp 0;border-radius:12dp;background-color:#191622}.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-option-dropdown__select selectbox option:hover,.config-option-dropdown__select selectbox option:focus,.config-option-dropdown__wrapper selectbox option:hover,.config-option-dropdown__wrapper selectbox option:focus,.config-option-textfield__select selectbox option:hover,.config-option-textfield__select selectbox option:focus,.config-option-textfield__wrapper selectbox option:hover,.config-option-textfield__wrapper selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-option-dropdown__select selectbox option:hover:not(:checked),.config-option-dropdown__wrapper selectbox option:hover:not(:checked),.config-option-textfield__select selectbox option:hover:not(:checked),.config-option-textfield__wrapper selectbox option:hover:not(:checked){cursor:pointer}.config-option-dropdown__select selectbox option:checked,.config-option-dropdown__wrapper selectbox option:checked,.config-option-textfield__select selectbox option:checked,.config-option-textfield__wrapper selectbox option:checked{background-color:rgba(255,255,255,.05);color:#fff}.config-description{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config-description__contents{padding:16dp;line-height:28dp;white-space:pre-line}.config-description__contents b{color:#b97df2}.config-description__contents i{color:#e9cd35;font-style:normal}.input-config{padding:0}.input-config__horizontal-split{display:flex;position:relative;flex-direction:row;height:100%}.input-config__mappings{display:block;flex:1 1 auto;min-width:640dp;height:100%}.input-config__mappings-scroll{display:block;width:100%;max-height:100%;overflow-y:auto}.input-config__mappings-wrapper{padding:8dp}.input-config__visual-wrapper{display:block;flex:1 1 100%;width:auto;max-width:1040.4444444444dp;height:auto;max-height:780.3333333333dp;margin:auto 0}.input-config__visual-aspect{position:relative;width:100%;margin:auto 0;padding-bottom:75%;background-color:rgba(0,0,0,.35)}.input-config__visual{display:flex;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;flex-direction:column;border-radius:108dp;background-color:rgba(255,255,255,.05)}.input-config__visual-half{display:flex;position:relative;flex:1 1 100%;flex-direction:row;padding:6%}.input-config__visual-half--bottom{align-items:flex-end;justify-content:space-between}.input-config__visual-quarter-left{display:flex;flex:1 1 50%;align-items:flex-start;justify-content:flex-start;width:auto}.input-config__visual-quarter-right{display:flex;flex:1 1 100%;align-items:flex-start;justify-content:flex-end}.input-config__visual-stick-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.input-viz{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:relative;align-items:center;justify-content:center}.input-viz>svg:not(.input-viz__dpad-arrow){position:absolute;top:0;right:0;bottom:0;left:0}[cur-input=NONE] .input-viz[visual-input]{opacity:1}.input-viz[visual-input~=A]{opacity:.25}[cur-input=A] .input-viz[visual-input~=A]{opacity:1}.input-viz[visual-input~=B]{opacity:.25}[cur-input=B] .input-viz[visual-input~=B]{opacity:1}.input-viz[visual-input~=Z]{opacity:.25}[cur-input=Z] .input-viz[visual-input~=Z]{opacity:1}.input-viz[visual-input~=START]{opacity:.25}[cur-input=START] .input-viz[visual-input~=START]{opacity:1}.input-viz[visual-input~=DPAD_UP]{opacity:.25}[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP]{opacity:1}.input-viz[visual-input~=DPAD_DOWN]{opacity:.25}[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN]{opacity:1}.input-viz[visual-input~=DPAD_LEFT]{opacity:.25}[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT]{opacity:1}.input-viz[visual-input~=DPAD_RIGHT]{opacity:.25}[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT]{opacity:1}.input-viz[visual-input~=L]{opacity:.25}[cur-input=L] .input-viz[visual-input~=L]{opacity:1}.input-viz[visual-input~=R]{opacity:.25}[cur-input=R] .input-viz[visual-input~=R]{opacity:1}.input-viz[visual-input~=C_UP]{opacity:.25}[cur-input=C_UP] .input-viz[visual-input~=C_UP]{opacity:1}.input-viz[visual-input~=C_DOWN]{opacity:.25}[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN]{opacity:1}.input-viz[visual-input~=C_LEFT]{opacity:.25}[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT]{opacity:1}.input-viz[visual-input~=C_RIGHT]{opacity:.25}[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT]{opacity:1}.input-viz[visual-input~=X_AXIS_NEG]{opacity:.25}[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG]{opacity:1}.input-viz[visual-input~=X_AXIS_POS]{opacity:.25}[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS]{opacity:1}.input-viz[visual-input~=Y_AXIS_NEG]{opacity:.25}[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input~=Y_AXIS_POS]{opacity:.25}[cur-input=Y_AXIS_POS] .input-viz[visual-input~=Y_AXIS_POS]{opacity:1}.input-viz__button{color:#f2f2f2}.input-viz__button svg{image-color:#f2f2f2}.input-viz__button--sm{width:64dp;height:64dp}.input-viz__button--sm>svg{width:64dp;height:64dp}.input-viz__button--md{width:76dp;height:76dp}.input-viz__button--md>svg{width:76dp;height:76dp}.input-viz__button--lg{width:84dp;height:84dp}.input-viz__button--lg>svg{width:84dp;height:84dp}.input-viz__button--C svg{image-color:#e9cd35}.input-viz__button--A{margin-top:auto}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__button--Start svg{image-color:#f86039}.input-viz__Z{width:136dp;height:136dp}.input-viz__Z svg{image-color:#e9cd35}.input-viz__Z>svg{width:136dp;height:136dp}.input-viz.input-viz__dpad{width:192dp;height:192dp;position:relative}.input-viz.input-viz__dpad svg{image-color:#f2f2f2}.input-viz.input-viz__dpad>svg{width:192dp;height:192dp}.input-config__visual-stick{display:flex;position:relative;align-items:center;justify-content:center;width:200dp;height:200dp;border-radius:100dp;background-color:rgba(255,255,255,.05)}.input-viz__dpad-split,.input-viz__stick-split{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%}.input-viz__dpad-split--vertical,.input-viz__stick-split--vertical{flex-direction:column;align-items:center;justify-content:space-between}.input-viz__dpad-split--horizontal,.input-viz__stick-split--horizontal{flex-direction:row;align-items:center;justify-content:space-between}.input-viz__dpad-split>div,.input-viz__stick-split>div{display:flex;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:center}.input-viz__dpad-split>div{width:64dp;height:64dp}.input-viz__stick-split>div{width:66.6666666667dp;height:66.6666666667dp}.input-viz__dpad-arrow{position:absolute;width:60dp;height:60dp}.input-viz__dpad-arrow--up{top:4dp;margin:0 auto}.input-viz__dpad-arrow--down{bottom:4dp;margin:0 auto;transform:rotate(180deg)}.input-viz__dpad-arrow--left{left:4dp;margin:auto 0;transform:rotate(-90deg)}.input-viz__dpad-arrow--right{right:4dp;margin:auto 0;transform:rotate(90deg)}.input-viz__R{width:96dp;height:96dp}.input-viz__R svg{image-color:#fff}.input-viz__R>svg{width:96dp;height:96dp}.input-viz__L{width:136dp;height:136dp}.input-viz__L svg{image-color:#17d6e8}.input-viz__L>svg{width:136dp;height:136dp}.input-config__c-buttons{position:relative;width:208dp;height:132dp}.input-config__c-buttons-lr,.input-config__c-buttons-du{display:flex;position:absolute;top:0;right:0;bottom:0;left:0}.input-config__c-buttons-lr{flex-direction:row;align-items:flex-start;justify-content:space-between}.input-config__c-buttons-du{flex-direction:column-reverse;align-items:center;justify-content:space-between}.input-config__c-buttons .input-viz[visual-input=C_UP]{margin-top:-32dp}.input-config__main-buttons{display:flex;position:relative;flex-direction:row;justify-content:space-between;width:268dp;height:128dp;margin-right:10dp}.button{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;width:auto;height:auto;padding:23dp;border-width:1.1dp;border-radius:12dp}.button:focus,.button:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--primary{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc}.button--primary:focus,.button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button--primary:disabled,.button--primary[disabled]{color:rgba(255,255,255,.6)}.button--primary:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05);color:#ccc}.button--secondary:focus,.button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3);color:#f2f2f2}.button--secondary:disabled,.button--secondary[disabled]{color:rgba(255,255,255,.6)}.button--secondary:active{background-color:rgba(23,214,232,.2);color:#f5f5f5}.button--tertiary{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);color:#ccc}.button--tertiary:focus,.button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3);color:#f2f2f2}.button--tertiary:disabled,.button--tertiary[disabled]{color:rgba(255,255,255,.6)}.button--tertiary:active{background-color:rgba(242,242,242,.2);color:#f5f5f5}.button--success{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05);color:#ccc}.button--success:focus,.button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3);color:#f2f2f2}.button--success:disabled,.button--success[disabled]{color:rgba(255,255,255,.6)}.button--success:active{background-color:rgba(69,208,67,.2);color:#f5f5f5}.button--error{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05);color:#ccc}.button--error:focus,.button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3);color:#f2f2f2}.button--error:disabled,.button--error[disabled]{color:rgba(255,255,255,.6)}.button--error:active{background-color:rgba(248,96,57,.2);color:#f5f5f5}.button--warning{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05);color:#ccc}.button--warning:focus,.button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3);color:#f2f2f2}.button--warning:disabled,.button--warning[disabled]{color:rgba(255,255,255,.6)}.button--warning:active{background-color:rgba(233,205,53,.2);color:#f5f5f5}.button:not([disabled]){cursor:pointer}.button:disabled,.button[disabled]{opacity:.5}.button__label{width:auto;height:auto}.icon-button{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;width:53.8dp;min-width:53.8dp;max-width:53.8dp;height:53.8dp;min-height:53.8dp;max-height:53.8dp;border-width:1.1dp;border-radius:26.9dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.icon-button svg{image-color:#ccc}.icon-button svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.icon-button:focus,.icon-button:hover{color:#f2f2f2;background-color:rgba(255,255,255,.2)}.icon-button:focus svg,.icon-button:hover svg{image-color:#f2f2f2}.icon-button:active{color:#f5f5f5;background-color:rgba(255,255,255,.1)}.icon-button:active svg{image-color:#f5f5f5}.icon-button:disabled,.icon-button[disabled]{color:#ccc;opacity:.5}.icon-button:disabled svg,.icon-button[disabled] svg{image-color:#ccc}.icon-button:not([disabled]){cursor:pointer}.icon-button svg{width:32dp;height:32dp}.icon-button--primary{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05)}.icon-button--primary:focus,.icon-button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3)}.icon-button--primary:active{background-color:rgba(185,125,242,.2)}.icon-button--secondary{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05)}.icon-button--secondary:focus,.icon-button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.icon-button--secondary:active{background-color:rgba(23,214,232,.2)}.icon-button--tertiary{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05)}.icon-button--tertiary:focus,.icon-button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.icon-button--tertiary:active{background-color:rgba(242,242,242,.2)}.icon-button--success{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05)}.icon-button--success:focus,.icon-button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3)}.icon-button--success:active{background-color:rgba(69,208,67,.2)}.icon-button--error{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05)}.icon-button--error:focus,.icon-button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--error:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05)}.icon-button--warning:focus,.icon-button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.icon-button--warning:active{background-color:rgba(233,205,53,.2)}.launcher{display:block;position:relative;flex-direction:row;justify-content:space-between;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;top:0;right:50%;bottom:0;left:0;flex-direction:column;align-items:flex-start;justify-content:space-between}.launcher__vertical-split--right{right:0;left:50%;align-items:flex-end}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}100%{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;position:absolute;top:-55vw;right:-100%;bottom:-50vw;left:-70vw;align-items:center;justify-content:flex-start;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}100%{opacity:.1}}.launcher__background-mm{position:absolute;top:0;bottom:0;left:0;width:auto;height:100%;animation:2.5s cubic-in-out 1 fade-mm-in;opacity:.1}.launcher__title-quadrant{flex:1 1 auto;width:auto;height:auto;padding-top:96dp;padding-left:96dp}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex:1 1 100%;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:100%;height:auto;padding:32dp}.menu-list-item{color:#ccc;display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);cursor:pointer}.menu-list-item svg{image-color:#ccc}.menu-list-item--right{flex-direction:row-reverse;align-content:flex-end}.menu-list-item--right .menu-list-item__bullet{margin-left:12dp;opacity:1}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:horizontal-gradient(#7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:horizontal-gradient(#7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) svg,.menu-list-item:hover:not(:disabled,[disabled]) svg{image-color:#b97df2}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{margin-right:12dp;opacity:0}.subtitle-title{display:block;position:relative;flex-direction:column;align-content:flex-start;align-items:flex-start;width:auto;height:auto;padding:0;background-color:rgba(0,0,0,0);color:#ccc;text-align:left;cursor:pointer}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}.toggle{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:162dp;height:72dp;border-radius:36dp;opacity:.9;background:rgba(0,0,0,0);cursor:pointer}.toggle:hover,.toggle:focus-visible,.toggle:focus{opacity:1;background-color:rgba(23,214,232,.3)}.toggle:active{opacity:1;background-color:rgba(23,214,232,.05)}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-width:1.1dp;border-color:#a2eff6;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;top:50%;left:4dp;width:80dp;height:64dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{opacity:.9;color:#a2eff6}.toggle--checked .toggle__icon.toggle__icon--right{opacity:1;color:#f2f2f2}.toggle__icons{display:flex;position:absolute;top:50%;right:16dp;left:16dp;align-items:center;justify-content:space-between;height:56dp;transform:translateY(-50%)}.toggle__icon{transition:color .05s linear-in-out,background-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;width:56dp;height:56dp;color:#f2f2f2}.toggle__icon--right{opacity:1;color:#a2eff6}.bottom-left{display:flex;position:absolute;bottom:4dp;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 4dp}.prompt__overlay{background-color:rgba(190,184,219,.1);pointer-events:auto}.prompt__overlay,.prompt__content-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}.prompt__content-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.prompt__content{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:700dp;height:auto;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.prompt__content h3,.prompt__content p{margin:24dp}.prompt__content p{margin-top:0}.prompt__controls{display:flex;flex-direction:row;justify-content:center;padding:24dp 12dp;border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1)}.prompt__controls .button{min-width:233.3333333333dp;margin:0 12dp;text-align:center;nav-up:none;nav-down:none}.mod-menu{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:row;align-items:center;justify-content:center;padding:64dp;background-color:rgba(8,7,13,.9)}.mod-menu__modal-wrapper{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(0,0,0,.35)}.mod-menu__modal-header{display:flex;position:relative;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:16dp;border-bottom-width:1.1dp;border-top-left-radius:16dp;border-top-right-radius:16dp;border-bottom-color:rgba(255,255,255,.2);background-color:rgba(190,184,219,.1)}.mod-menu__modal-body{display:flex;position:relative;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:center;width:100%;height:auto}.mod-menu__list{display:block;position:relative;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;height:100%;margin:0;padding:0;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35)}.mod-menu__list-scroll{flex:1 1 100%;width:100%;height:100%;max-height:100%;overflow-y:auto}.mod-menu__list-entry{display:flex;position:relative;flex-direction:row;width:100%;height:auto;padding:4dp 8dp 4dp 8dp;border-width:1.1dp;border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);border-color:rgba(242,242,242,.05)}.mod-menu__list-entry:focus,.mod-menu__list-entry:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.mod-menu__list-entry:active{background-color:rgba(242,242,242,.2)}.mod-menu__list-entry:hover,.mod-menu__list-entry:focus{cursor:pointer}.mod-menu__list-entry[is_selected]{border-color:#fff}.mod-menu__list-entry-thumbnail{height:100dp;width:100dp;min-width:100dp;min-height:100dp;background-color:rgba(190,184,219,.1)}.mod-menu__list-entry-body{display:flex;position:relative;flex-direction:column;width:auto;height:100dp;margin-left:16dp;overflow:hidden}.mod-menu__list-entry-description{padding-top:8dp}.mod-details{display:block;position:relative;flex:1 1 200%;height:100%;flex-direction:column;border-bottom-right-radius:16dp;background-color:rgba(190,184,219,.1)}.mod-details__header{display:flex;position:relative;flex-direction:row;width:100%;height:auto;padding:16dp;background:rgba(0,0,0,.35)}.mod-details__thumbnail-container{height:auto;width:auto}.mod-details__thumbnail{height:100dp;width:100dp;background-color:rgba(190,184,219,.1)}.mod-details__header-details{display:flex;position:relative;flex-direction:column;justify-content:space-evenly;width:auto;height:auto;margin-left:16dp;overflow:hidden}.mod-details__body{display:flex;position:relative;flex-direction:column;width:100%;height:auto;padding-left:16dp}.mod-details__authors,.mod-details__description{margin-top:16dp}.config-debug{display:block;position:relative;width:100%;max-height:100%;padding:8dp}.config-debug__scroll{display:block;position:relative;width:100%;max-height:100%;overflow-y:auto}.config-debug-option{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);display:block;position:relative;flex-direction:column;width:100%;height:auto;padding:12dp 4dp;background-color:rgba(0,0,0,0)}.config-debug-option svg{image-color:#ccc}.config-debug-option svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug-option:focus:not(:disabled,[disabled]),.config-debug-option:focus-visible:not(:disabled,[disabled]),.config-debug-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.config-debug-option:focus:not(:disabled,[disabled]) svg,.config-debug-option:focus-visible:not(:disabled,[disabled]) svg,.config-debug-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.config-debug-option:disabled,.config-debug-option[disabled]{opacity:.5}.config-debug-option .icon-button{margin-left:8dp}.config-debug__option-split{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.config-debug-option__label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:4dp 16dp 12dp;width:auto;height:auto;white-space:nowrap}.config-debug__option-controls{display:block;position:relative;flex:1 1 auto;height:auto;width:auto;max-width:800dp;padding:0 12dp}.config-debug__option-trigger{flex:1 1 auto}.config-debug__select-wrapper{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 100%;width:auto;max-width:800dp;height:auto;padding:4dp}.config-debug__select-wrapper .config-debug__select-label{padding-right:16dp;flex:auto;width:196dp}.config-debug__select-wrapper .config-debug__select-label>div{display:inline;width:auto;height:auto}.config-debug__select-wrapper input{display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:20dp;margin:auto 0}.config-debug__select-wrapper select{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-width:1.1dp;border-color:rgba(255,255,255,.5);display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:48dp;border-radius:12dp;background-color:rgba(255,255,255,.05);cursor:pointer;align-items:center;justify-content:flex-start;padding:14dp}.config-debug__select-wrapper select svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug__select-wrapper select:hover,.config-debug__select-wrapper select:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectvalue{display:inline;margin:auto 0;height:auto}.config-debug__select-wrapper select selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:#191622;padding:4dp 0;margin-top:2dp;border-radius:12dp}.config-debug__select-wrapper select selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-debug__select-wrapper select selectbox option:hover,.config-debug__select-wrapper select selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectbox option:hover:not(:checked){cursor:pointer}.config-debug__select-wrapper select selectbox option:checked{color:#fff;background-color:rgba(255,255,255,.05)}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}.rmlui-window{opacity:1}.rmlui-window--hidden{opacity:0}.rmlui-window:not([mouse-active]){pointer-events:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}@keyframes blue-pulse{0%{color:#17d6e8}50%{color:#a2eff6}100%{color:#17d6e8}}@keyframes blue-pulse-with-border{0%{border-color:#17d6e8;color:#17d6e8}50%{border-color:#a2eff6;color:#a2eff6}100%{border-color:#17d6e8;color:#17d6e8}}@keyframes blue-pulse-background{0%{background-color:#17d6e8}50%{background-color:#a2eff6}100%{background-color:#17d6e8}}
+/* stylelint-disable color-no-hex, color-hex-length */
+h1 {
+  font-size: 68dp;
+  letter-spacing: 4.76dp;
+  line-height: 68dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 52dp;
+  letter-spacing: 3.64dp;
+  line-height: 52dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+h3, .tab {
+  font-size: 36dp;
+  letter-spacing: 2.52dp;
+  line-height: 36dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.label-lg, .menu-list-item__label, .button--large {
+  font-size: 36dp;
+  letter-spacing: 3.96dp;
+  line-height: 36dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.label-md, .config-debug-option__label, .mod-menu__list-entry-name, .button, .config-option__title, .config-option--hz .config-option__title, .config-group__title, .control-option__label {
+  font-size: 28dp;
+  letter-spacing: 3.08dp;
+  line-height: 28dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.label-sm, .config-debug__select-wrapper .config-debug__select-label, .subtitle-title__disclaimer, .config-option__range-label, .config-option-range__label, .config-option__radio-tabs .config-option__tab-label,
+.config-option__list .config-option__tab-label, .centered-page__controls > label {
+  font-size: 20dp;
+  letter-spacing: 2.8dp;
+  line-height: 20dp;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.config-option__details {
+  font-size: 18dp;
+  letter-spacing: 2.52dp;
+  line-height: 18dp;
+  font-style: normal;
+  font-weight: 400;
+}
+
+body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry-description, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p {
+  font-size: 20dp;
+  letter-spacing: 0dp;
+  line-height: 20dp;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.toggle__icon {
+  font-family: promptfont;
+  font-size: 56dp;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56dp;
+}
+
+.prompt-font {
+  font-family: promptfont;
+  font-size: 40dp;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40dp;
+}
+
+.prompt-font-sm, .input-viz__mappings div {
+  font-family: promptfont;
+  font-size: 32dp;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32dp;
+}
+
+/*
+@include trans-colors;
+*/
+/*
+@include trans-colors-opa;
+*/
+/*
+@include trans-colors-svg;
+*/
+/*
+@include trans-colors-border;
+*/
+.nav-vert, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
+.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
+  nav-up: auto;
+  nav-down: auto;
+}
+
+.nav-horiz, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
+.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
+  nav-right: auto;
+  nav-left: auto;
+}
+
+.nav-foc, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
+.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
+  focus: auto;
+  tab-index: auto;
+}
+
+/*
+@include set-color(COLOR);
+*/
+/* stylelint-disable color-no-hex, color-hex-length */
+h1 {
+  font-size: 68dp;
+  letter-spacing: 4.76dp;
+  line-height: 68dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 52dp;
+  letter-spacing: 3.64dp;
+  line-height: 52dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+h3, .tab {
+  font-size: 36dp;
+  letter-spacing: 2.52dp;
+  line-height: 36dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.label-lg, .menu-list-item__label, .button--large {
+  font-size: 36dp;
+  letter-spacing: 3.96dp;
+  line-height: 36dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.label-md, .config-debug-option__label, .mod-menu__list-entry-name, .button, .config-option__title, .config-option--hz .config-option__title, .config-group__title, .control-option__label {
+  font-size: 28dp;
+  letter-spacing: 3.08dp;
+  line-height: 28dp;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.label-sm, .config-debug__select-wrapper .config-debug__select-label, .subtitle-title__disclaimer, .config-option__range-label, .config-option-range__label, .config-option__radio-tabs .config-option__tab-label,
+.config-option__list .config-option__tab-label, .centered-page__controls > label {
+  font-size: 20dp;
+  letter-spacing: 2.8dp;
+  line-height: 20dp;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.config-option__details {
+  font-size: 18dp;
+  letter-spacing: 2.52dp;
+  line-height: 18dp;
+  font-style: normal;
+  font-weight: 400;
+}
+
+body, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry-description, .config-description__contents, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config__wrapper p {
+  font-size: 20dp;
+  letter-spacing: 0dp;
+  line-height: 20dp;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.toggle__icon {
+  font-family: promptfont;
+  font-size: 56dp;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56dp;
+}
+
+.prompt-font {
+  font-family: promptfont;
+  font-size: 40dp;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 40dp;
+}
+
+.prompt-font-sm, .input-viz__mappings div {
+  font-family: promptfont;
+  font-size: 32dp;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32dp;
+}
+
+/*
+@include trans-colors;
+*/
+/*
+@include trans-colors-opa;
+*/
+/*
+@include trans-colors-svg;
+*/
+/*
+@include trans-colors-border;
+*/
+.nav-vert, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
+.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
+  nav-up: auto;
+  nav-down: auto;
+}
+
+.nav-horiz, .nav-dir, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
+.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
+  nav-right: auto;
+  nav-left: auto;
+}
+
+.nav-foc, .nav-all, .config-debug__select-wrapper select selectbox option, .config-debug__select-wrapper select, .config-debug__select-wrapper input, .mod-menu__list-entry, .toggle, .subtitle-title:not(:disabled, [disabled]), .menu-list-item:not(:disabled, [disabled]), .icon-button:not([disabled]), .button:not([disabled]), .button, .config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option, .config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper, .config-option__radio-tabs input.radio,
+.config-option__list input.radio, .config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox, .tab, .control-option__binding:not([disabled]) {
+  focus: auto;
+  tab-index: auto;
+}
+
+/*
+@include set-color(COLOR);
+*/
+/* stylelint-disable color-no-hex */
+/* stylelint-disable selector-max-id */
+* {
+  box-sizing: border-box;
+}
+
+hr {
+  display: block;
+  padding: 1.5dp;
+  background: #08070D;
+}
+
+body {
+  color: #fff;
+  font-family: chiaro;
+  font-size: 20dp;
+  font-style: normal;
+  font-weight: normal;
+}
+
+/* div { 
+    focus:none;
+    tab-index:none;
+} */
+div#window {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-color: rgba(255, 255, 255, 0.2);
+  background-color: #121018;
+}
+
+div#content {
+  z-index: 2;
+  width: auto;
+  height: 100%;
+  overflow: hidden auto;
+  text-align: center;
+}
+
+p {
+  text-align: left;
+}
+
+input.submit {
+  margin-left: 0;
+}
+
+input.text,
+input.password {
+  box-sizing: border-box;
+  height: 31dp;
+  padding: 11dp 10dp 0;
+  text-align: left;
+  cursor: text;
+}
+
+textarea {
+  padding: 14dp 12dp 10dp;
+  text-align: left;
+  cursor: text;
+}
+
+input.text,
+input.password,
+select,
+textarea {
+  /* color: #333; */
+  /* font-size: 13dp */
+  height: auto;
+}
+
+table input.text {
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+  /* height: 18dp; */
+  margin: 0;
+  border-width: 1.1dp;
+  border-color: #000;
+  background-color: #fff;
+  font-size: 15dp;
+  /* padding: 0 5dp; */
+  line-height: 1;
+  decorator: none;
+  /* vertical-align: center; */
+}
+
+input.radio {
+  flex: 0;
+  width: 0dp;
+  nav-up: auto;
+  nav-right: auto;
+  nav-down: auto;
+  nav-left: auto;
+  tab-index: auto;
+  focus: auto;
+}
+
+input.checkbox {
+  width: 20dp;
+  height: 20dp;
+  nav-up: auto;
+  nav-right: auto;
+  nav-down: auto;
+  nav-left: auto;
+  tab-index: auto;
+  focus: auto;
+}
+
+scrollbarvertical, scrollbarhorizontal {
+  margin: 0;
+  border: 0;
+}
+scrollbarvertical slidertrack, scrollbarhorizontal slidertrack {
+  background: #DABAF7;
+  opacity: 0.05;
+}
+scrollbarvertical sliderbar, scrollbarhorizontal sliderbar {
+  border-radius: 5dp;
+  background: #DABAF7;
+  opacity: 0.1;
+}
+scrollbarvertical sliderbar:hover:not(:active), scrollbarhorizontal sliderbar:hover:not(:active) {
+  opacity: 0.2;
+}
+scrollbarvertical sliderbar:active, scrollbarhorizontal sliderbar:active {
+  opacity: 0.3;
+}
+scrollbarvertical sliderarrowdec, scrollbarvertical sliderarrowinc, scrollbarhorizontal sliderarrowdec, scrollbarhorizontal sliderarrowinc {
+  width: 0;
+  height: 0;
+}
+
+scrollbarvertical {
+  width: 12dp;
+}
+scrollbarvertical slidertrack {
+  width: 12dp;
+}
+scrollbarvertical sliderbar {
+  width: 12dp;
+}
+
+scrollbarhorizontal {
+  height: 12dp;
+}
+scrollbarhorizontal slidertrack {
+  height: 12dp;
+}
+scrollbarhorizontal sliderbar {
+  height: 12dp;
+}
+
+.centered-page {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 64dp;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.centered-page__modal {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1692.4444444444dp;
+  height: 100%;
+  margin: auto;
+  border-width: 1.1dp;
+  border-radius: 16dp;
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(8, 7, 13, 0.9);
+}
+.centered-page__modal > .tabs {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1692.4444444444dp;
+  height: 100%;
+  margin: auto;
+}
+.centered-page__modal panels {
+  flex: 1 1 100%;
+}
+
+.centered-page__controls {
+  display: flex;
+  position: absolute;
+  bottom: 24dp;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 1692.4444444444dp;
+  height: auto;
+  margin: 0 auto;
+}
+.centered-page__controls > label {
+  display: inline-block;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  height: 24dp;
+}
+.centered-page__controls > label:not(:last-child) {
+  margin-right: 40dp;
+}
+.centered-page__controls > label > span:first-child {
+  margin-right: 4dp;
+}
+
+.control-option {
+  color: #CCCCCC;
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: auto;
+  padding: 4dp 16dp 4dp 20dp;
+  border-radius: 8dp;
+  background-color: rgba(0, 0, 0, 0);
+}
+.control-option svg {
+  image-color: #CCCCCC;
+}
+.control-option svg {
+  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+}
+.control-option:focus-visible:not(:disabled, [disabled]), .control-option:hover:not(:disabled, [disabled]) {
+  color: #F2F2F2;
+  background-color: rgba(190, 184, 219, 0.1);
+}
+.control-option:focus-visible:not(:disabled, [disabled]) svg, .control-option:hover:not(:disabled, [disabled]) svg {
+  image-color: #F2F2F2;
+}
+.control-option:disabled, .control-option[disabled] {
+  opacity: 0.5;
+}
+[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] {
+  border-color: #F86039;
+}
+[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon {
+  opacity: 0;
+}
+[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording {
+  opacity: 1;
+}
+[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] {
+  border-color: #F86039;
+}
+[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon {
+  opacity: 0;
+}
+[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording {
+  opacity: 1;
+}
+.control-option .icon-button {
+  flex: 1 1 auto;
+}
+
+.control-option__label {
+  flex: 2 1 300dp;
+  height: auto;
+  white-space: nowrap;
+}
+
+.control-option__bindings {
+  display: flex;
+  position: relative;
+  flex: 2 1 400dp;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 56dp;
+  padding: 0 12dp 0 4dp;
+}
+
+.control-option__binding {
+  color: #CCCCCC;
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 56dp;
+  margin: 0 4dp;
+  padding: 8dp;
+  border-width: 1.1dp;
+  border-radius: 8dp;
+  border-color: rgba(190, 184, 219, 0.1);
+  background-color: rgba(190, 184, 219, 0.1);
+}
+.control-option__binding svg {
+  image-color: #CCCCCC;
+}
+.control-option__binding svg {
+  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+}
+.control-option__binding:focus, .control-option__binding:hover {
+  color: #F2F2F2;
+  border-color: #F2F2F2;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.control-option__binding:focus svg, .control-option__binding:hover svg {
+  image-color: #F2F2F2;
+}
+.control-option__binding:active {
+  color: rgb(244.6, 244.6, 244.6);
+}
+.control-option__binding:active svg {
+  image-color: rgb(244.6, 244.6, 244.6);
+}
+.control-option__binding:disabled, .control-option__binding[disabled] {
+  color: #CCCCCC;
+  opacity: 0.5;
+}
+.control-option__binding:disabled svg, .control-option__binding[disabled] svg {
+  image-color: #CCCCCC;
+}
+.control-option__binding:not([disabled]) {
+  cursor: pointer;
+}
+
+.control-option__binding-icon {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  opacity: 1;
+}
+
+@keyframes control-option__binding-recording-scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.85);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.control-option__binding-recording {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+.control-option__binding-recording .control-option__binding-circle {
+  width: 24dp;
+  height: 24dp;
+  animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
+  border-radius: 24dp;
+  background-color: #F86039;
+}
+.control-option__binding-recording .control-option__binding-edge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 36dp;
+  height: 36dp;
+  transform: translate(-50%, -50%);
+}
+.control-option__binding-recording .control-option__binding-edge > svg.control-option__binding-edge-svg {
+  width: 36dp;
+  height: 36dp;
+  image-color: #F86039;
+}
+
+/*
+    Example:
+        <tab class="tab">
+            <div>Graphics</div>
+            <div class="tab__indicator"></div>
+        </tab>
+*/
+.tabs tabs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.tab {
+  display: block;
+  position: relative;
+  margin: 0;
+  padding: 20dp 24dp;
+  transition: color 0.05s linear-in-out;
+  opacity: 0.9;
+  background-color: rgba(0, 0, 0, 0);
+  color: rgba(255, 255, 255, 0.6);
+}
+.tab:selected {
+  color: #F2F2F2;
+}
+.tab:selected .tab__indicator {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+.tab:selected:hover {
+  cursor: default;
+}
+.rmlui-window:not([mouse-active]) .tab:focus {
+  transition: none;
+  animation: blue-pulse 0.75s infinite;
+}
+.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator {
+  animation: blue-pulse-background 0.75s infinite;
+}
+.tab:focus, .tab:hover {
+  opacity: 1;
+  color: #F2F2F2;
+  cursor: pointer;
+}
+
+.tab__indicator {
+  position: absolute;
+  right: 0;
+  bottom: 2dp;
+  left: 0;
+  height: 2dp;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.config__icon-buttons {
+  display: flex;
+  position: absolute;
+  top: 8dp;
+  right: 0dp;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+}
+.config__icon-buttons .icon-button {
+  margin: 0 8dp;
+}
+
+.config__form {
+  border-top-width: 1.1dp;
+  border-top-color: rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  border-bottom-right-radius: 16dp;
+  border-bottom-left-radius: 16dp;
+}
+
+.config__wrapper {
+  flex: 1 1 100%;
+  width: auto;
+  height: auto;
+  padding: 16dp;
+  border-radius: 0dp;
+  border-bottom-right-radius: 16dp;
+  border-bottom-left-radius: 16dp;
+  background-color: rgba(0, 0, 0, 0.35);
+  text-align: left;
+}
+.config__wrapper p {
+  padding: 16dp;
+  line-height: 28dp;
+  white-space: pre-line;
+}
+.config__wrapper p b {
+  color: #B97DF2;
+}
+.config__wrapper p i {
+  color: #E9CD35;
+  font-style: normal;
+}
+
+.config__hz-wrapper {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  border-radius: 0dp;
+  text-align: left;
+}
+
+.config__header, .config__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.config__header {
+  border-bottom-width: 1.1dp;
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+  padding: 12dp 20dp;
+}
+
+.config__footer {
+  border-top-width: 1.1dp;
+  border-top-color: rgba(255, 255, 255, 0.1);
+  padding: 20dp 20dp;
+  border-bottom-right-radius: 16dp;
+  border-bottom-left-radius: 16dp;
+}
+
+.config__header-left {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.config__header-left > :not(:first-child) {
+  margin-left: 8dp;
+}
+
+.config__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.config-group {
+  position: relative;
+}
+.config-group--scrollable {
+  flex: 1 1 100%;
+  width: auto;
+  height: auto;
+  padding: 0 0 0 16dp;
+}
+.config-group--scrollable .config-group__wrapper {
+  max-height: 100%;
+  overflow-y: auto;
+}
+.config-group__title {
+  color: #B97DF2;
+}
+.config-group__title--hidden {
+  display: none;
+}
+.config-group__wrapper {
+  padding: 16dp 0;
+}
+
+.config-option {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 16dp 0dp 24dp;
+}
+.config-option--hz {
+  flex-direction: row-reverse;
+  align-items: center;
+  margin-top: 4dp;
+  margin-bottom: 4dp;
+}
+.config-option--hz .config-option__title {
+  flex: 1 1 100%;
+}
+.config-option--hz .config-option__list {
+  flex: 1 1 auto;
+  width: auto;
+}
+.config-option--hz:first-child {
+  margin-top: 0;
+}
+.config-option--hz:last-child {
+  margin-bottom: 0;
+}
+
+.config-option__title {
+  padding: 0 12dp;
+}
+
+.config-option__radio-tabs,
+.config-option__list {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  padding: 0;
+}
+.config-option__radio-tabs input:first-of-type,
+.config-option__list input:first-of-type {
+  nav-left: none;
+}
+.config-option__radio-tabs input:last-of-type,
+.config-option__list input:last-of-type {
+  nav-right: none;
+}
+.config-option__radio-tabs .config-option__tab-label,
+.config-option__list .config-option__tab-label {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  display: block;
+  position: relative;
+  height: auto;
+  margin: 4dp 12dp 0;
+  padding: 8dp 0;
+  color: rgba(255, 255, 255, 0.6);
+  tab-index: none;
+}
+.config-option__radio-tabs .config-option__tab-label:hover,
+.config-option__list .config-option__tab-label:hover {
+  color: #F2F2F2;
+  cursor: pointer;
+}
+.config-option__radio-tabs .config-option__checkbox-wrapper,
+.config-option__list .config-option__checkbox-wrapper {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  width: 32dp;
+  height: 32dp;
+  margin: 4dp 12dp 0;
+  border-radius: 8dp;
+  opacity: 0.5;
+  background-color: rgba(190, 184, 219, 0.1);
+  cursor: pointer;
+}
+.config-option__radio-tabs .config-option__checkbox-wrapper:hover,
+.config-option__list .config-option__checkbox-wrapper:hover {
+  opacity: 1;
+}
+.config-option__radio-tabs .config-option__checkbox-wrapper[checked],
+.config-option__list .config-option__checkbox-wrapper[checked] {
+  background-color: #3333FF;
+}
+.config-option__radio-tabs .config-option__checkbox,
+.config-option__list .config-option__checkbox {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  visibility: visible;
+  width: 0;
+  height: 0;
+}
+.config-option__radio-tabs input.radio,
+.config-option__list input.radio {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  visibility: visible;
+  width: 0;
+  height: 0;
+}
+.config-option__radio-tabs input.radio:not(:disabled):checked + .config-option__tab-label,
+.config-option__list input.radio:not(:disabled):checked + .config-option__tab-label {
+  border-bottom: 1dp;
+  border-color: #F2F2F2;
+  color: #F2F2F2;
+}
+.config-option__radio-tabs input.radio:not(:disabled):checked + .config-option__tab-label:hover,
+.config-option__list input.radio:not(:disabled):checked + .config-option__tab-label:hover {
+  cursor: default;
+}
+.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.radio:not(:disabled):focus + .config-option__tab-label,
+.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus + .config-option__tab-label {
+  transition: none;
+  animation: blue-pulse 0.75s infinite;
+  border-color: #17D6E8;
+  color: #17D6E8;
+}
+.config-option__radio-tabs input.radio:not(:disabled):focus + .config-option__tab-label, .config-option__radio-tabs input.radio:not(:disabled):hover + .config-option__tab-label,
+.config-option__list input.radio:not(:disabled):focus + .config-option__tab-label,
+.config-option__list input.radio:not(:disabled):hover + .config-option__tab-label {
+  color: #F2F2F2;
+}
+.config-option__radio-tabs input.radio:disabled + .config-option__tab-label,
+.config-option__list input.radio:disabled + .config-option__tab-label {
+  opacity: 0.5;
+}
+.config-option__radio-tabs input.radio:disabled + .config-option__tab-label:hover,
+.config-option__list input.radio:disabled + .config-option__tab-label:hover {
+  cursor: default;
+}
+.config-option__radio-tabs input.range slidertrack,
+.config-option__list input.range slidertrack {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  height: 2dp;
+  margin-top: 8dp;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.config-option__radio-tabs input.range sliderbar,
+.config-option__list input.range sliderbar {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  width: 16dp;
+  height: 16dp;
+  margin-top: 1dp;
+  margin-right: -8dp;
+  margin-left: -8dp;
+  transition: background-color 0.05s linear-in-out;
+  border-radius: 8dp;
+  background-color: #CCCCCC;
+}
+.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus,
+.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus {
+  border-width: 1.1dp;
+  border-color: #3333FF;
+  animation: blue-pulse-background 0.75s infinite;
+}
+.config-option__radio-tabs input.range sliderbar:hover,
+.config-option__list input.range sliderbar:hover {
+  background-color: #F2F2F2;
+  cursor: pointer;
+}
+.config-option__radio-tabs input.range sliderbar:active,
+.config-option__radio-tabs input.range slidertrack:active + sliderbar,
+.config-option__list input.range sliderbar:active,
+.config-option__list input.range slidertrack:active + sliderbar {
+  background-color: #17D6E8;
+}
+.config-option__radio-tabs input.range sliderarrowdec,
+.config-option__radio-tabs input.range sliderarrowinc,
+.config-option__list input.range sliderarrowdec,
+.config-option__list input.range sliderarrowinc {
+  display: none;
+}
+
+.config-option__details {
+  height: 18dp;
+  margin: 14dp 12dp 0;
+  color: #B97DF2;
+}
+
+.config-option-color {
+  width: 100%;
+  max-width: 360dp;
+  height: auto;
+  margin-top: 4dp;
+  margin-left: 12dp;
+  padding: 0;
+}
+.config-option-color__preview-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 72dp;
+}
+.config-option-color__preview-block {
+  display: block;
+  width: 88dp;
+  height: 100%;
+  border-width: 1.1dp;
+  border-radius: 16dp;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.config-option-color__hsv-wrapper {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  width: auto;
+  height: auto;
+  padding-left: 8dp;
+}
+.config-option-color__hsv-wrapper .config-option-range {
+  flex: 1 1 auto;
+}
+.config-option-color__hsv-wrapper .config-option-range label {
+  min-width: 72dp;
+}
+.config-option-color__hsv-wrapper .config-option-range input {
+  flex: 1 1 auto;
+}
+
+.config-option-range {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 360dp;
+  height: auto;
+  margin-top: 4dp;
+  padding: 0;
+}
+.config-option-range__label {
+  display: block;
+  width: 56dp;
+  margin: 0 12dp;
+  margin-right: 16dp;
+  padding: 0;
+  color: #F2F2F2;
+  tab-index: none;
+}
+.config-option-range__range-input {
+  flex: 1;
+}
+.config-option-range__range-input slidertrack {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  height: 2dp;
+  margin-top: 8dp;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.config-option-range__range-input sliderbar {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  width: 16dp;
+  height: 16dp;
+  margin-top: 1dp;
+  margin-right: -8dp;
+  margin-left: -8dp;
+  transition: background-color 0.05s linear-in-out;
+  border-radius: 8dp;
+  background-color: #CCCCCC;
+}
+.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus {
+  border-width: 1.1dp;
+  border-color: #3333FF;
+  animation: blue-pulse-background 0.75s infinite;
+}
+.config-option-range__range-input sliderbar:hover {
+  background-color: #F2F2F2;
+  cursor: pointer;
+}
+.config-option-range__range-input sliderbar:active,
+.config-option-range__range-input slidertrack:active + sliderbar {
+  background-color: #17D6E8;
+}
+.config-option-range__range-input sliderarrowdec,
+.config-option-range__range-input sliderarrowinc {
+  display: none;
+}
+
+.config-option__range-wrapper {
+  max-width: 360dp;
+  margin-top: 4dp;
+}
+
+.config-option__range-label {
+  display: block;
+  width: 56dp;
+  margin: 0 12dp;
+  margin-right: 16dp;
+  padding: 0;
+  color: #F2F2F2;
+  tab-index: none;
+}
+
+.config-option-dropdown, .config-option-textfield {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+  height: auto;
+  padding: 8dp 24dp 8dp 12dp;
+}
+.config-option-dropdown__select, .config-option-textfield__select {
+  display: block;
+  height: 48dp;
+  padding: 14dp;
+  cursor: pointer;
+}
+.config-option-dropdown__wrapper, .config-option-textfield__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  padding: 2dp 0 12dp;
+  cursor: text;
+}
+.config-option-dropdown__wrapper input, .config-option-textfield__wrapper input {
+  width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+.config-option-dropdown__select, .config-option-dropdown__wrapper, .config-option-textfield__select, .config-option-textfield__wrapper {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
+  border-width: 1.1dp;
+  border-color: rgba(255, 255, 255, 0.5);
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 100%;
+  width: auto;
+  border-radius: 12dp;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.config-option-dropdown__select svg, .config-option-dropdown__wrapper svg, .config-option-textfield__select svg, .config-option-textfield__wrapper svg {
+  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+}
+.config-option-dropdown__select:hover, .config-option-dropdown__select:focus, .config-option-dropdown__wrapper:hover, .config-option-dropdown__wrapper:focus, .config-option-textfield__select:hover, .config-option-textfield__select:focus, .config-option-textfield__wrapper:hover, .config-option-textfield__wrapper:focus {
+  border-width: 1.1dp;
+  border-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.config-option-dropdown__select selectvalue, .config-option-dropdown__wrapper selectvalue, .config-option-textfield__select selectvalue, .config-option-textfield__wrapper selectvalue {
+  display: inline;
+  height: auto;
+  margin: auto 0;
+}
+.config-option-dropdown__select selectbox, .config-option-dropdown__wrapper selectbox, .config-option-textfield__select selectbox, .config-option-textfield__wrapper selectbox {
+  border-width: 1.1dp;
+  border-color: rgba(255, 255, 255, 0.2);
+  margin-top: 2dp;
+  padding: 4dp 0;
+  border-radius: 12dp;
+  background-color: #191622;
+}
+.config-option-dropdown__select selectbox option, .config-option-dropdown__wrapper selectbox option, .config-option-textfield__select selectbox option, .config-option-textfield__wrapper selectbox option {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  padding: 8dp 12dp;
+  background-color: rgba(0, 0, 0, 0);
+  color: #CCCCCC;
+  font-weight: 400;
+}
+.config-option-dropdown__select selectbox option:hover, .config-option-dropdown__select selectbox option:focus, .config-option-dropdown__wrapper selectbox option:hover, .config-option-dropdown__wrapper selectbox option:focus, .config-option-textfield__select selectbox option:hover, .config-option-textfield__select selectbox option:focus, .config-option-textfield__wrapper selectbox option:hover, .config-option-textfield__wrapper selectbox option:focus {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.config-option-dropdown__select selectbox option:hover:not(:checked), .config-option-dropdown__wrapper selectbox option:hover:not(:checked), .config-option-textfield__select selectbox option:hover:not(:checked), .config-option-textfield__wrapper selectbox option:hover:not(:checked) {
+  cursor: pointer;
+}
+.config-option-dropdown__select selectbox option:checked, .config-option-dropdown__wrapper selectbox option:checked, .config-option-textfield__select selectbox option:checked, .config-option-textfield__wrapper selectbox option:checked {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: #FFFFFF;
+}
+
+.config-description {
+  flex: 1 1 100%;
+  width: auto;
+  height: auto;
+  padding: 16dp;
+  border-radius: 0dp;
+  border-bottom-right-radius: 16dp;
+  border-bottom-left-radius: 16dp;
+  background-color: rgba(0, 0, 0, 0.35);
+  text-align: left;
+}
+.config-description__contents {
+  padding: 16dp;
+  line-height: 28dp;
+  white-space: pre-line;
+}
+.config-description__contents b {
+  color: #B97DF2;
+}
+.config-description__contents i {
+  color: #E9CD35;
+  font-style: normal;
+}
+
+.input-config {
+  padding: 0;
+}
+
+.input-config__horizontal-split {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  height: 100%;
+}
+
+.input-config__mappings {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 640dp;
+  height: 100%;
+}
+
+.input-config__mappings-scroll {
+  display: block;
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.input-config__mappings-wrapper {
+  padding: 8dp;
+}
+
+.input-config__visual-wrapper {
+  display: block;
+  flex: 1 1 100%;
+  width: auto;
+  max-width: 1040.4444444444dp;
+  height: auto;
+  max-height: 780.3333333333dp;
+  margin: auto 0;
+}
+
+.input-config__visual-aspect {
+  position: relative;
+  width: 100%;
+  margin: auto 0;
+  padding-bottom: 75%;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.input-config__visual {
+  display: flex;
+  position: absolute;
+  top: 16dp;
+  right: 16dp;
+  bottom: 16dp;
+  left: 16dp;
+  flex-direction: column;
+  border-radius: 108dp;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.input-config__visual-half {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: row;
+  padding: 6%;
+}
+.input-config__visual-half--bottom {
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.input-config__visual-quarter-left {
+  display: flex;
+  flex: 1 1 50%;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: auto;
+}
+
+.input-config__visual-quarter-right {
+  display: flex;
+  flex: 1 1 100%;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.input-config__visual-stick-wrapper {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-viz {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+}
+.input-viz > svg:not(.input-viz__dpad-arrow) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+[cur-input=NONE] .input-viz[visual-input] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=A] {
+  opacity: 0.25;
+}
+[cur-input=A] .input-viz[visual-input~=A] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=B] {
+  opacity: 0.25;
+}
+[cur-input=B] .input-viz[visual-input~=B] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=Z] {
+  opacity: 0.25;
+}
+[cur-input=Z] .input-viz[visual-input~=Z] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=START] {
+  opacity: 0.25;
+}
+[cur-input=START] .input-viz[visual-input~=START] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=DPAD_UP] {
+  opacity: 0.25;
+}
+[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=DPAD_DOWN] {
+  opacity: 0.25;
+}
+[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=DPAD_LEFT] {
+  opacity: 0.25;
+}
+[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=DPAD_RIGHT] {
+  opacity: 0.25;
+}
+[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=L] {
+  opacity: 0.25;
+}
+[cur-input=L] .input-viz[visual-input~=L] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=R] {
+  opacity: 0.25;
+}
+[cur-input=R] .input-viz[visual-input~=R] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=C_UP] {
+  opacity: 0.25;
+}
+[cur-input=C_UP] .input-viz[visual-input~=C_UP] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=C_DOWN] {
+  opacity: 0.25;
+}
+[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=C_LEFT] {
+  opacity: 0.25;
+}
+[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=C_RIGHT] {
+  opacity: 0.25;
+}
+[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=X_AXIS_NEG] {
+  opacity: 0.25;
+}
+[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=X_AXIS_POS] {
+  opacity: 0.25;
+}
+[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=Y_AXIS_NEG] {
+  opacity: 0.25;
+}
+[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG] {
+  opacity: 1;
+}
+
+.input-viz[visual-input~=Y_AXIS_POS] {
+  opacity: 0.25;
+}
+[cur-input=Y_AXIS_POS] .input-viz[visual-input~=Y_AXIS_POS] {
+  opacity: 1;
+}
+
+.input-viz__button {
+  color: #F2F2F2;
+}
+.input-viz__button svg {
+  image-color: #F2F2F2;
+}
+.input-viz__button--sm {
+  width: 64dp;
+  height: 64dp;
+}
+.input-viz__button--sm > svg {
+  width: 64dp;
+  height: 64dp;
+}
+.input-viz__button--md {
+  width: 76dp;
+  height: 76dp;
+}
+.input-viz__button--md > svg {
+  width: 76dp;
+  height: 76dp;
+}
+.input-viz__button--lg {
+  width: 84dp;
+  height: 84dp;
+}
+.input-viz__button--lg > svg {
+  width: 84dp;
+  height: 84dp;
+}
+.input-viz__button--C svg {
+  image-color: #E9CD35;
+}
+.input-viz__button--A {
+  margin-top: auto;
+}
+.input-viz__button--A svg {
+  image-color: #3333FF;
+}
+.input-viz__button--B svg {
+  image-color: #45D043;
+}
+.input-viz__button--Start svg {
+  image-color: #F86039;
+}
+
+.input-viz__Z {
+  width: 136dp;
+  height: 136dp;
+}
+.input-viz__Z svg {
+  image-color: #E9CD35;
+}
+.input-viz__Z > svg {
+  width: 136dp;
+  height: 136dp;
+}
+
+.input-viz.input-viz__dpad {
+  width: 192dp;
+  height: 192dp;
+  position: relative;
+}
+.input-viz.input-viz__dpad svg {
+  image-color: #F2F2F2;
+}
+.input-viz.input-viz__dpad > svg {
+  width: 192dp;
+  height: 192dp;
+}
+
+.input-config__visual-stick {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 200dp;
+  height: 200dp;
+  border-radius: 100dp;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.input-viz__dpad-split,
+.input-viz__stick-split {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.input-viz__dpad-split--vertical,
+.input-viz__stick-split--vertical {
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.input-viz__dpad-split--horizontal,
+.input-viz__stick-split--horizontal {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.input-viz__dpad-split > div,
+.input-viz__stick-split > div {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-viz__dpad-split > div {
+  width: 64dp;
+  height: 64dp;
+}
+
+.input-viz__stick-split > div {
+  width: 66.6666666667dp;
+  height: 66.6666666667dp;
+}
+
+.input-viz__dpad-arrow {
+  position: absolute;
+  width: 60dp;
+  height: 60dp;
+}
+.input-viz__dpad-arrow--up {
+  top: 4dp;
+  margin: 0 auto;
+}
+.input-viz__dpad-arrow--down {
+  bottom: 4dp;
+  margin: 0 auto;
+  transform: rotate(180deg);
+}
+.input-viz__dpad-arrow--left {
+  left: 4dp;
+  margin: auto 0;
+  transform: rotate(-90deg);
+}
+.input-viz__dpad-arrow--right {
+  right: 4dp;
+  margin: auto 0;
+  transform: rotate(90deg);
+}
+
+.input-viz__R {
+  width: 96dp;
+  height: 96dp;
+}
+.input-viz__R svg {
+  image-color: #FFFFFF;
+}
+.input-viz__R > svg {
+  width: 96dp;
+  height: 96dp;
+}
+
+.input-viz__L {
+  width: 136dp;
+  height: 136dp;
+}
+.input-viz__L svg {
+  image-color: #17D6E8;
+}
+.input-viz__L > svg {
+  width: 136dp;
+  height: 136dp;
+}
+
+.input-config__c-buttons {
+  position: relative;
+  width: 208dp;
+  height: 132dp;
+}
+.input-config__c-buttons-lr, .input-config__c-buttons-du {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.input-config__c-buttons-lr {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.input-config__c-buttons-du {
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: space-between;
+}
+.input-config__c-buttons .input-viz[visual-input=C_UP] {
+  margin-top: -32dp;
+}
+
+.input-config__main-buttons {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 268dp;
+  height: 128dp;
+  margin-right: 10dp;
+}
+
+.button {
+  border-color: rgba(185, 125, 242, 0.8);
+  background-color: rgba(185, 125, 242, 0.05);
+  color: #CCCCCC;
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  display: block;
+  width: auto;
+  height: auto;
+  padding: 23dp;
+  border-width: 1.1dp;
+  border-radius: 12dp;
+}
+.button:focus, .button:hover {
+  border-color: #B97DF2;
+  background-color: rgba(185, 125, 242, 0.3);
+  color: #F2F2F2;
+}
+.button:disabled, .button[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button:active {
+  background-color: rgba(185, 125, 242, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button--primary {
+  border-color: rgba(185, 125, 242, 0.8);
+  background-color: rgba(185, 125, 242, 0.05);
+  color: #CCCCCC;
+}
+.button--primary:focus, .button--primary:hover {
+  border-color: #B97DF2;
+  background-color: rgba(185, 125, 242, 0.3);
+  color: #F2F2F2;
+}
+.button--primary:disabled, .button--primary[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button--primary:active {
+  background-color: rgba(185, 125, 242, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button--secondary {
+  border-color: rgba(23, 214, 232, 0.8);
+  background-color: rgba(23, 214, 232, 0.05);
+  color: #CCCCCC;
+}
+.button--secondary:focus, .button--secondary:hover {
+  border-color: #17D6E8;
+  background-color: rgba(23, 214, 232, 0.3);
+  color: #F2F2F2;
+}
+.button--secondary:disabled, .button--secondary[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button--secondary:active {
+  background-color: rgba(23, 214, 232, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button--tertiary {
+  border-color: rgba(242, 242, 242, 0.8);
+  background-color: rgba(242, 242, 242, 0.05);
+  color: #CCCCCC;
+}
+.button--tertiary:focus, .button--tertiary:hover {
+  border-color: #F2F2F2;
+  background-color: rgba(242, 242, 242, 0.3);
+  color: #F2F2F2;
+}
+.button--tertiary:disabled, .button--tertiary[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button--tertiary:active {
+  background-color: rgba(242, 242, 242, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button--success {
+  border-color: rgba(69, 208, 67, 0.8);
+  background-color: rgba(69, 208, 67, 0.05);
+  color: #CCCCCC;
+}
+.button--success:focus, .button--success:hover {
+  border-color: #45D043;
+  background-color: rgba(69, 208, 67, 0.3);
+  color: #F2F2F2;
+}
+.button--success:disabled, .button--success[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button--success:active {
+  background-color: rgba(69, 208, 67, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button--error {
+  border-color: rgba(248, 96, 57, 0.8);
+  background-color: rgba(248, 96, 57, 0.05);
+  color: #CCCCCC;
+}
+.button--error:focus, .button--error:hover {
+  border-color: #F86039;
+  background-color: rgba(248, 96, 57, 0.3);
+  color: #F2F2F2;
+}
+.button--error:disabled, .button--error[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button--error:active {
+  background-color: rgba(248, 96, 57, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button--warning {
+  border-color: rgba(233, 205, 53, 0.8);
+  background-color: rgba(233, 205, 53, 0.05);
+  color: #CCCCCC;
+}
+.button--warning:focus, .button--warning:hover {
+  border-color: #E9CD35;
+  background-color: rgba(233, 205, 53, 0.3);
+  color: #F2F2F2;
+}
+.button--warning:disabled, .button--warning[disabled] {
+  color: rgba(255, 255, 255, 0.6);
+}
+.button--warning:active {
+  background-color: rgba(233, 205, 53, 0.2);
+  color: rgb(244.6, 244.6, 244.6);
+}
+.button:not([disabled]) {
+  cursor: pointer;
+}
+.button:disabled, .button[disabled] {
+  opacity: 0.5;
+}
+.button__label {
+  width: auto;
+  height: auto;
+}
+
+/*
+    <button
+        class="icon-button icon-button--error"
+    >
+        <svg src="icons/Trash.svg" />
+    </button>
+*/
+.icon-button {
+  color: #CCCCCC;
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 53.8dp;
+  min-width: 53.8dp;
+  max-width: 53.8dp;
+  height: 53.8dp;
+  min-height: 53.8dp;
+  max-height: 53.8dp;
+  border-width: 1.1dp;
+  border-radius: 26.9dp;
+  border-color: rgba(0, 0, 0, 0);
+  background-color: rgba(0, 0, 0, 0);
+}
+.icon-button svg {
+  image-color: #CCCCCC;
+}
+.icon-button svg {
+  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+}
+.icon-button:focus, .icon-button:hover {
+  color: #F2F2F2;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.icon-button:focus svg, .icon-button:hover svg {
+  image-color: #F2F2F2;
+}
+.icon-button:active {
+  color: rgb(244.6, 244.6, 244.6);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.icon-button:active svg {
+  image-color: rgb(244.6, 244.6, 244.6);
+}
+.icon-button:disabled, .icon-button[disabled] {
+  color: #CCCCCC;
+  opacity: 0.5;
+}
+.icon-button:disabled svg, .icon-button[disabled] svg {
+  image-color: #CCCCCC;
+}
+.icon-button:not([disabled]) {
+  cursor: pointer;
+}
+.icon-button svg {
+  width: 32dp;
+  height: 32dp;
+}
+.icon-button--primary {
+  border-color: rgba(185, 125, 242, 0.8);
+  background-color: rgba(185, 125, 242, 0.05);
+}
+.icon-button--primary:focus, .icon-button--primary:hover {
+  border-color: #B97DF2;
+  background-color: rgba(185, 125, 242, 0.3);
+}
+.icon-button--primary:active {
+  background-color: rgba(185, 125, 242, 0.2);
+}
+.icon-button--secondary {
+  border-color: rgba(23, 214, 232, 0.8);
+  background-color: rgba(23, 214, 232, 0.05);
+}
+.icon-button--secondary:focus, .icon-button--secondary:hover {
+  border-color: #17D6E8;
+  background-color: rgba(23, 214, 232, 0.3);
+}
+.icon-button--secondary:active {
+  background-color: rgba(23, 214, 232, 0.2);
+}
+.icon-button--tertiary {
+  border-color: rgba(242, 242, 242, 0.8);
+  background-color: rgba(242, 242, 242, 0.05);
+}
+.icon-button--tertiary:focus, .icon-button--tertiary:hover {
+  border-color: #F2F2F2;
+  background-color: rgba(242, 242, 242, 0.3);
+}
+.icon-button--tertiary:active {
+  background-color: rgba(242, 242, 242, 0.2);
+}
+.icon-button--success {
+  border-color: rgba(69, 208, 67, 0.8);
+  background-color: rgba(69, 208, 67, 0.05);
+}
+.icon-button--success:focus, .icon-button--success:hover {
+  border-color: #45D043;
+  background-color: rgba(69, 208, 67, 0.3);
+}
+.icon-button--success:active {
+  background-color: rgba(69, 208, 67, 0.2);
+}
+.icon-button--error {
+  border-color: rgba(248, 96, 57, 0.8);
+  background-color: rgba(248, 96, 57, 0.05);
+}
+.icon-button--error:focus, .icon-button--error:hover {
+  border-color: #F86039;
+  background-color: rgba(248, 96, 57, 0.3);
+}
+.icon-button--error:active {
+  background-color: rgba(248, 96, 57, 0.2);
+}
+.icon-button--warning {
+  border-color: rgba(233, 205, 53, 0.8);
+  background-color: rgba(233, 205, 53, 0.05);
+}
+.icon-button--warning:focus, .icon-button--warning:hover {
+  border-color: #E9CD35;
+  background-color: rgba(233, 205, 53, 0.3);
+}
+.icon-button--warning:active {
+  background-color: rgba(233, 205, 53, 0.2);
+}
+
+.launcher {
+  display: block;
+  position: relative;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  background-color: #08070D;
+}
+
+.launcher__vertical-split {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 50%;
+  bottom: 0;
+  left: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.launcher__vertical-split--right {
+  right: 0;
+  left: 50%;
+  align-items: flex-end;
+}
+
+@keyframes slide-mm-bg-over {
+  0% {
+    transform: translateX(100dp);
+  }
+  100% {
+    transform: translateX(0dp);
+  }
+}
+.launcher__background-wrapper {
+  display: flex;
+  position: absolute;
+  top: -55vw;
+  right: -100%;
+  bottom: -50vw;
+  left: -70vw;
+  align-items: center;
+  justify-content: flex-start;
+  transform: translateX(0dp);
+  animation: 25s cubic-out 1 slide-mm-bg-over;
+}
+
+@keyframes fade-mm-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
+.launcher__background-mm {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: 100%;
+  animation: 2.5s cubic-in-out 1 fade-mm-in;
+  opacity: 0.1;
+}
+
+.launcher__title-quadrant {
+  flex: 1 1 auto;
+  width: auto;
+  height: auto;
+  padding-top: 96dp;
+  padding-left: 96dp;
+}
+.launcher__title-quadrant--right {
+  padding-right: 96dp;
+  padding-left: 0;
+}
+
+.launcher__content-quadrant {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  width: 100%;
+  height: auto;
+  padding: 32dp;
+}
+
+/*
+    Example layout:
+        <button class="menu-list-item menu-list-item--right">
+            <div class="menu-list-item__bullet">•</div>
+            <div class="menu-list-item__label">Setup controls</div>
+        </button>
+    - Variants:
+        .menu-list-item--right (align to right side)
+    - Optional:
+        - <div class="subtitle-title__disclaimer">Coming Soon™</div>
+
+*/
+.menu-list-item {
+  color: #CCCCCC;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  padding: 16dp;
+  border-radius: 8dp;
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+.menu-list-item svg {
+  image-color: #CCCCCC;
+}
+.menu-list-item--right {
+  flex-direction: row-reverse;
+  align-content: flex-end;
+}
+.menu-list-item--right .menu-list-item__bullet {
+  margin-left: 12dp;
+  opacity: 1;
+}
+.menu-list-item--right.menu-list-item:focus:not(:disabled, [disabled]), .menu-list-item--right.menu-list-item:hover:not(:disabled, [disabled]) {
+  decorator: horizontal-gradient(#7A2AC600 #DABAF714);
+}
+.menu-list-item:focus:not(:disabled, [disabled]), .menu-list-item:hover:not(:disabled, [disabled]) {
+  color: #B97DF2;
+  decorator: horizontal-gradient(#7A2AC614 #DABAF700);
+}
+.menu-list-item:focus:not(:disabled, [disabled]) svg, .menu-list-item:hover:not(:disabled, [disabled]) svg {
+  image-color: #B97DF2;
+}
+.menu-list-item:focus:not(:disabled, [disabled]) .menu-list-item__bullet, .menu-list-item:hover:not(:disabled, [disabled]) .menu-list-item__bullet {
+  opacity: 1;
+}
+.menu-list-item:disabled, .menu-list-item[disabled] {
+  opacity: 0.5;
+  tab-index: none;
+  cursor: default;
+}
+
+.menu-list-item__bullet {
+  margin-right: 12dp;
+  opacity: 0;
+}
+
+/*
+    Example layout:
+
+        <button class="subtitle-title" disabled>
+            <h3>Zelda 64: Recompiled</h3>
+            <h1>Ocarina of Time</h1>
+            <div class="subtitle-title__disclaimer">Coming Soon™</div>
+        </button>
+    - Variants:
+        .subtitle-title--right (align to right side)
+    - Optional:
+        - <div class="subtitle-title__disclaimer">Coming Soon™</div>
+
+*/
+.subtitle-title {
+  display: block;
+  position: relative;
+  flex-direction: column;
+  align-content: flex-start;
+  align-items: flex-start;
+  width: auto;
+  height: auto;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0);
+  color: #CCCCCC;
+  text-align: left;
+  cursor: pointer;
+}
+.subtitle-title--right {
+  align-content: flex-end;
+}
+.subtitle-title--right, .subtitle-title--right > * {
+  text-align: right;
+}
+.subtitle-title[selected] {
+  color: #F2F2F2;
+  cursor: default;
+}
+.subtitle-title:focus:not(:disabled, [disabled]), .subtitle-title:hover:not(:disabled, [disabled], [selected]) {
+  color: #B97DF2;
+}
+.subtitle-title:disabled, .subtitle-title[disabled] {
+  opacity: 0.5;
+  cursor: default;
+  tab-index: none;
+}
+.subtitle-title h3 {
+  margin-bottom: 6dp;
+}
+.subtitle-title h1 {
+  margin-top: 6dp;
+}
+.subtitle-title__disclaimer {
+  margin-top: 16dp;
+}
+
+.toggle {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 162dp;
+  height: 72dp;
+  border-radius: 36dp;
+  opacity: 0.9;
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+.toggle:hover, .toggle:focus-visible, .toggle:focus {
+  opacity: 1;
+  background-color: rgba(23, 214, 232, 0.3);
+}
+.toggle:active {
+  opacity: 1;
+  background-color: rgba(23, 214, 232, 0.05);
+}
+.toggle .toggle__border {
+  position: absolute;
+  top: 1.1dp;
+  right: 1.1dp;
+  bottom: 1.1dp;
+  left: 1.1dp;
+  border-width: 1.1dp;
+  border-color: #A2EFF6;
+  display: block;
+  border-radius: 36dp;
+}
+.toggle .toggle__floater {
+  position: absolute;
+  top: 50%;
+  left: 4dp;
+  width: 80dp;
+  height: 64dp;
+  transform: translateY(-50%);
+  border-radius: 32dp;
+  background: #25A1AD;
+}
+.toggle--checked .toggle__floater {
+  left: 78dp;
+}
+.toggle--checked .toggle__icon.toggle__icon--left {
+  opacity: 0.9;
+  color: #A2EFF6;
+}
+.toggle--checked .toggle__icon.toggle__icon--right {
+  opacity: 1;
+  color: #F2F2F2;
+}
+
+.toggle__icons {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: 16dp;
+  left: 16dp;
+  align-items: center;
+  justify-content: space-between;
+  height: 56dp;
+  transform: translateY(-50%);
+}
+
+.toggle__icon {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56dp;
+  height: 56dp;
+  color: #F2F2F2;
+}
+.toggle__icon--right {
+  opacity: 1;
+  color: #A2EFF6;
+}
+
+.bottom-left {
+  display: flex;
+  position: absolute;
+  bottom: 4dp;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 1692.4444444444dp;
+  height: auto;
+  margin: 0 4dp;
+}
+
+.prompt__overlay {
+  background-color: rgba(190, 184, 219, 0.1);
+  pointer-events: auto;
+}
+.prompt__overlay, .prompt__content-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.prompt__content-wrapper {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+}
+.prompt__content {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: column;
+  width: 100%;
+  max-width: 700dp;
+  height: auto;
+  margin: auto;
+  border-width: 1.1dp;
+  border-radius: 16dp;
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(8, 7, 13, 0.9);
+}
+.prompt__content h3, .prompt__content p {
+  margin: 24dp;
+}
+.prompt__content p {
+  margin-top: 0;
+}
+.prompt__controls {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 24dp 12dp;
+  border-top-width: 1.1dp;
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+.prompt__controls .button {
+  min-width: 233.3333333333dp;
+  margin: 0 12dp;
+  text-align: center;
+  nav-up: none;
+  nav-down: none;
+}
+
+.mod-menu {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.mod-menu__list {
+  display: block;
+  position: relative;
+  flex: 1 1 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border-bottom-left-radius: 16dp;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+.mod-menu__list-scroll {
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+.mod-menu__list-entry {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  width: 100%;
+  height: auto;
+  padding: 4dp 8dp 4dp 8dp;
+  border-width: 1.1dp;
+  border-color: rgba(242, 242, 242, 0.8);
+  background-color: rgba(242, 242, 242, 0.05);
+  border-color: rgba(242, 242, 242, 0.05);
+}
+.mod-menu__list-entry:focus, .mod-menu__list-entry:hover {
+  border-color: #F2F2F2;
+  background-color: rgba(242, 242, 242, 0.3);
+}
+.mod-menu__list-entry:active {
+  background-color: rgba(242, 242, 242, 0.2);
+}
+.mod-menu__list-entry:hover, .mod-menu__list-entry:focus {
+  cursor: pointer;
+}
+.mod-menu__list-entry[is_selected] {
+  border-color: rgb(255, 255, 255);
+}
+.mod-menu__list-entry-thumbnail {
+  height: 100dp;
+  width: 100dp;
+  min-width: 100dp;
+  min-height: 100dp;
+  background-color: rgba(190, 184, 219, 0.1);
+}
+.mod-menu__list-entry-body {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  width: auto;
+  height: 100dp;
+  margin-left: 16dp;
+  overflow: hidden;
+}
+.mod-menu__list-entry-description {
+  padding-top: 8dp;
+}
+
+.config-debug {
+  display: block;
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+  padding: 8dp;
+}
+
+.config-debug__scroll {
+  display: block;
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.config-debug-option {
+  color: #CCCCCC;
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
+  border-bottom-width: 1.1dp;
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+  display: block;
+  position: relative;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  padding: 12dp 4dp;
+  background-color: rgba(0, 0, 0, 0);
+}
+.config-debug-option svg {
+  image-color: #CCCCCC;
+}
+.config-debug-option svg {
+  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+}
+.config-debug-option:focus:not(:disabled, [disabled]), .config-debug-option:focus-visible:not(:disabled, [disabled]), .config-debug-option:hover:not(:disabled, [disabled]) {
+  color: #F2F2F2;
+  background-color: rgba(190, 184, 219, 0.1);
+}
+.config-debug-option:focus:not(:disabled, [disabled]) svg, .config-debug-option:focus-visible:not(:disabled, [disabled]) svg, .config-debug-option:hover:not(:disabled, [disabled]) svg {
+  image-color: #F2F2F2;
+}
+.config-debug-option:disabled, .config-debug-option[disabled] {
+  opacity: 0.5;
+}
+.config-debug-option .icon-button {
+  margin-left: 8dp;
+}
+
+.config-debug__option-split {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.config-debug-option__label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 4dp 16dp 12dp;
+  width: auto;
+  height: auto;
+  white-space: nowrap;
+}
+
+.config-debug__option-controls {
+  display: block;
+  position: relative;
+  flex: 1 1 auto;
+  height: auto;
+  width: auto;
+  max-width: 800dp;
+  padding: 0 12dp;
+}
+
+.config-debug__option-trigger {
+  flex: 1 1 auto;
+}
+
+.config-debug__select-wrapper {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1 1 100%;
+  width: auto;
+  max-width: 800dp;
+  height: auto;
+  padding: 4dp;
+}
+.config-debug__select-wrapper .config-debug__select-label {
+  padding-right: 16dp;
+  flex: auto;
+  width: 196dp;
+}
+.config-debug__select-wrapper .config-debug__select-label > div {
+  display: inline;
+  width: auto;
+  height: auto;
+}
+.config-debug__select-wrapper input {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0;
+  flex: 1 1 100%;
+  width: auto;
+  height: 20dp;
+  margin: auto 0;
+}
+.config-debug__select-wrapper select {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
+  border-width: 1.1dp;
+  border-color: rgba(255, 255, 255, 0.5);
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0;
+  flex: 1 1 100%;
+  width: auto;
+  height: 48dp;
+  border-radius: 12dp;
+  background-color: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 14dp;
+}
+.config-debug__select-wrapper select svg {
+  transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+}
+.config-debug__select-wrapper select:hover, .config-debug__select-wrapper select:focus {
+  border-width: 1.1dp;
+  border-color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.config-debug__select-wrapper select selectvalue {
+  display: inline;
+  margin: auto 0;
+  height: auto;
+}
+.config-debug__select-wrapper select selectbox {
+  border-width: 1.1dp;
+  border-color: rgba(255, 255, 255, 0.8);
+  background-color: #191622;
+  padding: 4dp 0;
+  margin-top: 2dp;
+  border-radius: 12dp;
+}
+.config-debug__select-wrapper select selectbox option {
+  transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+  padding: 8dp 12dp;
+  background-color: rgba(0, 0, 0, 0);
+  color: #CCCCCC;
+  font-weight: 400;
+}
+.config-debug__select-wrapper select selectbox option:hover, .config-debug__select-wrapper select selectbox option:focus {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.config-debug__select-wrapper select selectbox option:hover:not(:checked) {
+  cursor: pointer;
+}
+.config-debug__select-wrapper select selectbox option:checked {
+  color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+body {
+  box-sizing: border-box;
+  color: #F2F2F2;
+  font-family: chiaro;
+}
+
+.rmlui-window {
+  opacity: 1;
+}
+.rmlui-window--hidden {
+  opacity: 0;
+}
+.rmlui-window:not([mouse-active]) {
+  pointer-events: none;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+button {
+  background-color: #7A2AC6;
+}
+
+@keyframes blue-pulse {
+  0% {
+    color: #17D6E8;
+  }
+  50% {
+    color: #A2EFF6;
+  }
+  100% {
+    color: #17D6E8;
+  }
+}
+@keyframes blue-pulse-with-border {
+  0% {
+    border-color: #17D6E8;
+    color: #17D6E8;
+  }
+  50% {
+    border-color: #A2EFF6;
+    color: #A2EFF6;
+  }
+  100% {
+    border-color: #17D6E8;
+    color: #17D6E8;
+  }
+}
+@keyframes blue-pulse-background {
+  0% {
+    background-color: #17D6E8;
+  }
+  50% {
+    background-color: #A2EFF6;
+  }
+  100% {
+    background-color: #17D6E8;
+  }
+}
diff --git a/assets/scss/styles/components/ModDetails.scss b/assets/scss/styles/components/ModDetails.scss
deleted file mode 100644
index 7c0f0fe..0000000
--- a/assets/scss/styles/components/ModDetails.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.mod-details {
-    display: block;
-    position: relative;
-    flex: 1 1 200%;
-    height: 100%;
-    flex-direction: column;
-    border-bottom-right-radius: $border-radius-modal;
-    background-color: $color-bg-overlay;
-
-    &__header {
-        display: flex;
-        position: relative;
-        flex-direction: row;
-        width: 100%;
-        height: auto;
-        padding: space(16);
-        // border-width: $border-width-thickness;
-        // border-radius: $border-radius-modal;
-        // border-color: $color-border;
-        background: $color-bg-shadow;
-    }
-
-    &__thumbnail-container {
-        height: auto;
-        width: auto;
-    }
-
-    &__thumbnail {
-        height: 100dp;
-        width: 100dp;
-        // max-width: 100dp;
-        // max-height: 100dp;
-        // padding: space(16);
-        // border-bottom-width: $border-width-thickness;
-        // border-top-left-radius: $border-radius-modal;
-        // border-top-right-radius: $border-radius-modal;
-        // border-bottom-color: $color-border;
-        background-color: $color-bg-overlay;
-    }
-
-    &__header-details {
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        justify-content:space-evenly;
-        width: auto;
-        height: auto;
-        margin-left: space(16);
-        overflow: hidden;
-    }
-
-    &__title {
-        @extend %header-3;
-    }
-
-    &__version {
-        @extend %label-md;
-    }
-
-    &__body {
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        width: 100%;
-        height: auto;
-        padding-left: space(16);
-    }
-
-    &__authors, &__description {
-        @extend %label-md;
-        margin-top: space(16);
-    }
-}
-
diff --git a/assets/scss/styles/components/ModMenu.scss b/assets/scss/styles/components/ModMenu.scss
index 655e04a..9101f27 100644
--- a/assets/scss/styles/components/ModMenu.scss
+++ b/assets/scss/styles/components/ModMenu.scss
@@ -1,58 +1,11 @@
 .mod-menu {
     display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    flex-direction: row;
+    position: relative;
+    flex: 1 1 100%;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: space($page-margin);
-    background-color: $color-modal-overlay;
-
-    &__modal-wrapper {
-        display: flex;
-        position: relative;
-        flex: 1 1 100%;
-        flex-direction: column;
-        width: 100%;
-        max-width: space($base-modal-max-width);
-        height: 100%;
-        margin: auto;
-        border-width: $border-width-thickness;
-        border-radius: $border-radius-modal;
-        border-color: $color-border;
-        background: $color-bg-shadow;
-    }
-
-    &__modal-header {
-        display: flex;
-        position: relative;
-        flex: 1 1 auto;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        height: auto;
-        padding: space(16);
-        border-bottom-width: $border-width-thickness;
-        border-top-left-radius: $border-radius-modal;
-        border-top-right-radius: $border-radius-modal;
-        border-bottom-color: $color-border;
-        background-color: $color-bg-overlay;
-    }
-
-    &__modal-body {
-        display: flex;
-        position: relative;
-        flex: 1 1 auto;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: auto;
-    }
+    height: 100%;
 
     &__list {
         display: block;
@@ -91,6 +44,7 @@
         &:hover, &:focus {
             cursor: pointer;
         }
+
         &[is_selected] {
             border-color: rgb(255,255,255);
         }
diff --git a/assets/scss/styles/components/_components.scss b/assets/scss/styles/components/_components.scss
index 977672d..1d7a78f 100644
--- a/assets/scss/styles/components/_components.scss
+++ b/assets/scss/styles/components/_components.scss
@@ -15,4 +15,3 @@
 @import "./BottomLeft";
 @import "./Prompt";
 @import "./ModMenu";
-@import "./ModDetails";
diff --git a/include/recomp_ui.h b/include/recomp_ui.h
index 7714f6b..dac3a9c 100644
--- a/include/recomp_ui.h
+++ b/include/recomp_ui.h
@@ -53,6 +53,7 @@ namespace recompui {
 		Controls,
 		Graphics,
 		Audio,
+        Mods,
 		Debug,
 		Count
 	};
diff --git a/src/ui/elements/ElementModDetailsPanel.cpp b/src/ui/elements/ElementModDetailsPanel.cpp
deleted file mode 100644
index 7de11ee..0000000
--- a/src/ui/elements/ElementModDetailsPanel.cpp
+++ /dev/null
@@ -1,72 +0,0 @@
-#include "ElementModDetailsPanel.h"
-#include "presets.h"
-#include "librecomp/mods.hpp"
-
-#include <string>
-
-#define MOD_DETAILS_BEM "mod-details"
-
-namespace recompui {
-
-static const std::string cls_base = BLOCK(MOD_DETAILS_BEM);
-static const std::string cls_header = EL(MOD_DETAILS_BEM, "header");
-static const std::string cls_thumbnail_container = EL(MOD_DETAILS_BEM, "thumbnail-container");
-static const std::string cls_thumbnail = EL(MOD_DETAILS_BEM, "thumbnail");
-static const std::string cls_header_details = EL(MOD_DETAILS_BEM, "header-details");
-static const std::string cls_title = EL(MOD_DETAILS_BEM, "title");
-static const std::string cls_version = EL(MOD_DETAILS_BEM, "version");
-static const std::string cls_body = EL(MOD_DETAILS_BEM, "body");
-static const std::string cls_authors = EL(MOD_DETAILS_BEM, "authors");
-static const std::string cls_description = EL(MOD_DETAILS_BEM, "description");
-
-ElementModDetailsPanel::ElementModDetailsPanel(const Rml::String& tag) : Rml::Element(tag)
-{
-    SetAttribute("recomp-store-element", true);
-    Rml::ElementDocument *doc = GetOwnerDocument();
-    SetClass(cls_base, true);
-
-    {
-        Rml::Element *header_el = add_div_with_class(doc, this, cls_header);
-        {
-            Rml::Element *thumbnail_container_el = add_div_with_class(doc, header_el, cls_thumbnail_container);
-            {
-                Rml::Element *thumbnail_el = add_div_with_class(doc, thumbnail_container_el, cls_thumbnail);
-            } // thumbnail_container_el
-
-            Rml::Element *header_details_el = add_div_with_class(doc, header_el, cls_header_details);
-            {
-                title_el = add_div_with_class(doc, header_details_el, cls_title);
-                version_el = add_div_with_class(doc, header_details_el, cls_version);
-            } // header_details_el
-        }
-        Rml::Element* body_el = add_div_with_class(doc, this, cls_body);
-        {
-            description_el = add_div_with_class(doc, body_el, cls_description);
-            authors_el = add_div_with_class(doc, body_el, cls_authors);
-        } // body_el
-    }
-}
-
-ElementModDetailsPanel::~ElementModDetailsPanel()
-{
-}
-
-void ElementModDetailsPanel::SetModDetails(const recomp::mods::ModDetails& details) {
-    cur_details = details;
-
-    title_el->SetInnerRML(cur_details.mod_id);
-    version_el->SetInnerRML(cur_details.version.to_string());
-
-    std::string authors_str = "<i>Authors</i>:";
-    bool first = true;
-    for (const std::string& author : details.authors) {
-        authors_str += (first ? " " : ", ") + author;
-        first = false;
-    }
-    authors_el->SetInnerRML(authors_str);
-    description_el->SetInnerRML("Placeholder description. Some long text to make sure that wrapping is working correctly. Yet more text and so on.");
-
-    DirtyLayout();
-}
-
-} // namespace Rml
diff --git a/src/ui/elements/ElementModDetailsPanel.h b/src/ui/elements/ElementModDetailsPanel.h
deleted file mode 100644
index 78cdd3e..0000000
--- a/src/ui/elements/ElementModDetailsPanel.h
+++ /dev/null
@@ -1,24 +0,0 @@
-#ifndef RECOMPUI_ELEMENT_MOD_DETAILS_PANEL_H
-#define RECOMPUI_ELEMENT_MOD_DETAILS_PANEL_H
-
-#include "common.h"
-#include "librecomp/mods.hpp"
-
-namespace recompui {
-
-class ElementModDetailsPanel : public Rml::Element {
-public:
-	ElementModDetailsPanel(const Rml::String& tag);
-	virtual ~ElementModDetailsPanel();
-    void SetModDetails(const recomp::mods::ModDetails& details);
-private:
-    recomp::mods::ModDetails cur_details;
-    Rml::Element* thumbnail_el;
-    Rml::Element* title_el;
-    Rml::Element* authors_el;
-    Rml::Element* version_el;
-    Rml::Element* description_el;
-};
-
-} // namespace recompui
-#endif
diff --git a/src/ui/elements/ElementModMenu.cpp b/src/ui/elements/ElementModMenu.cpp
index f2f557e..217f6a4 100644
--- a/src/ui/elements/ElementModMenu.cpp
+++ b/src/ui/elements/ElementModMenu.cpp
@@ -1,5 +1,4 @@
 #include "ElementModMenu.h"
-#include "ElementModDetailsPanel.h"
 #include "presets.h"
 #include "librecomp/mods.hpp"
 
@@ -10,9 +9,6 @@
 namespace recompui {
 
 static const std::string cls_base = BLOCK(MOD_MENU_BEM);
-static const std::string cls_modal_wrapper = EL(MOD_MENU_BEM, "modal-wrapper");
-static const std::string cls_modal_header = EL(MOD_MENU_BEM, "modal-header");
-static const std::string cls_modal_body = EL(MOD_MENU_BEM, "modal-body");
 static const std::string cls_list = EL(MOD_MENU_BEM, "list");
 static const std::string cls_list_scroll = EL(MOD_MENU_BEM, "list-scroll");
 static const std::string cls_list_entry = EL(MOD_MENU_BEM, "list-entry");
@@ -30,10 +26,6 @@ void ElementModMenu::ProcessEvent(Rml::Event& event) {
             // Refresh
             if (event_element == refresh_button) {
                 RefreshMods();
-            }
-            // Close
-            else if (event_element == close_button) {
-
             }
             break;
         case Rml::EventId::Focus:
@@ -41,7 +33,7 @@ void ElementModMenu::ProcessEvent(Rml::Event& event) {
                 size_t mod_index;
                 Rml::Variant *val = event_element->GetAttribute("mod_index");
                 if (val->GetInto(mod_index) && mod_index < mod_details.size()) {
-                    details_el->SetModDetails(mod_details[mod_index]);
+                    mod_details_panel->set_mod_details(mod_details[mod_index]);
                 }
                 if (active_list_entry_el != nullptr) {
                     active_list_entry_el->RemoveAttribute("is_selected");
@@ -49,6 +41,8 @@ void ElementModMenu::ProcessEvent(Rml::Event& event) {
                 event_element->SetAttribute("is_selected", true);
                 active_list_entry_el = event_element;
             }
+        default:
+            break;
     }
 }
 
@@ -111,7 +105,7 @@ void ElementModMenu::RefreshMods() {
     recomp::mods::scan_mods();
     mod_details = recomp::mods::get_mod_details(game_mod_id);
 
-    details_el->SetModDetails(mod_details[0]);
+    mod_details_panel->set_mod_details(mod_details[0]);
 
     CreateModList();
 }
@@ -122,34 +116,23 @@ ElementModMenu::ElementModMenu(const Rml::String& tag) : Rml::Element(tag) {
     Rml::ElementDocument *doc = GetOwnerDocument();
     SetClass(cls_base, true);
 
+    Rml::Element *body_el = add_div_with_class(doc, this, "config__hz-wrapper");
     {
-        Rml::Element *modal_wrapper_el = add_div_with_class(doc, this, cls_modal_wrapper);
+        list_el = add_div_with_class(doc, body_el, cls_list);
         {
-            Rml::Element *header_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_header);
-            {
-                refresh_button = add_button(doc, header_el, "Refresh", ButtonVariant::Primary);
-                refresh_button->AddEventListener(Rml::EventId::Click, this, false);
-                refresh_button->SetId("refresh-button");
-                close_button = add_icon_button(doc, header_el, "icons/X.svg", ButtonVariant::Tertiary);
-                close_button->AddEventListener(Rml::EventId::Click, this, false);
-                close_button->SetId("close-button");
+            list_el_scroll = add_div_with_class(doc, list_el, cls_list_scroll);
+        } // list_el
 
-                refresh_button->SetProperty("nav-right", "#" + close_button->GetId());
-                close_button->SetProperty("nav-left", "#" + refresh_button->GetId());
-            } // header_el
+        recompui::Element body_el_compat(body_el);
+        mod_details_panel = std::make_unique<ModDetailsPanel>(&body_el_compat);
+    } // body_el
 
-            Rml::Element *body_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_body);
-            {
-                list_el = add_div_with_class(doc, body_el, cls_list);
-                {
-                    list_el_scroll = add_div_with_class(doc, list_el, cls_list_scroll);
-                } // list_el
-
-                details_el =
-                    static_cast<ElementModDetailsPanel*>(body_el->AppendChild(doc->CreateElement("recomp-mod-details-panel")));
-            } // body_el
-        } // modal_wrapper_el
-    }
+    Rml::Element *footer_el = add_div_with_class(doc, this, "config__footer");
+    {
+        refresh_button = add_button(doc, footer_el, "Refresh", ButtonVariant::Primary);
+        refresh_button->AddEventListener(Rml::EventId::Click, this, false);
+        refresh_button->SetId("refresh-button");
+    } // footer_el
 
     RefreshMods();
 }
diff --git a/src/ui/elements/ElementModMenu.h b/src/ui/elements/ElementModMenu.h
index c004e07..fa3b8fb 100644
--- a/src/ui/elements/ElementModMenu.h
+++ b/src/ui/elements/ElementModMenu.h
@@ -3,7 +3,7 @@
 
 #include "common.h"
 #include "librecomp/mods.hpp"
-#include "ElementModDetailsPanel.h"
+#include "ui_mod_details_panel.h"
 
 namespace recompui {
 
@@ -17,10 +17,9 @@ private:
 	void CreateModList();
 	Rml::ElementPtr CreateModListEntry(const recomp::mods::ModDetails& details, size_t index);
 	Rml::Element *refresh_button;
-	Rml::Element *close_button;
 	Rml::Element *list_el; // The root mod list element.
 	Rml::Element *list_el_scroll; // The scroll within the root mod list element.
-	ElementModDetailsPanel *details_el; // The details panel.
+	std::unique_ptr<ModDetailsPanel> mod_details_panel;
 	Rml::Element *active_list_entry_el = nullptr;
 	std::vector<recomp::mods::ModDetails> mod_details{};
 	std::string game_mod_id;
diff --git a/src/ui/elements/ui_button.cpp b/src/ui/elements/ui_button.cpp
new file mode 100644
index 0000000..4b6a8fb
--- /dev/null
+++ b/src/ui/elements/ui_button.cpp
@@ -0,0 +1,69 @@
+#include "ui_button.h"
+
+#include <cassert>
+
+namespace recompui {
+
+    Button::Button(const std::string &text, ButtonStyle style, Element *parent) : Element(parent, Events(EventType::Click, EventType::Hover), "button") {
+        this->style = style;
+
+        set_text(text);
+        set_display(Display::Block);
+        set_padding(23.0f);
+        set_border_width(1.1f);
+        set_border_radius(12.0f);
+        set_font_size(28.0f);
+        set_letter_spacing(3.08f);
+        set_line_height(28.0f);
+        set_font_style(FontStyle::Normal);
+        set_font_weight(700);
+        set_cursor(Cursor::Pointer);
+
+        // transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
+
+        update_properties();
+    }
+
+    void Button::update_properties() {
+        uint8_t border_opacity = hovered ? 255 : 204;
+        uint8_t background_opacity = hovered ? 76 : 13;
+        set_color(hovered ? Color{ 242, 242, 242, 255 } : Color{ 204, 204, 204, 255 });
+
+        switch (style) {
+        case ButtonStyle::Primary: {
+            set_border_color({ 185, 125, 242, border_opacity });
+            set_background_color({ 185, 125, 242, background_opacity });
+            break;
+        }
+        case ButtonStyle::Secondary: {
+            set_border_color({ 23, 214, 232, border_opacity });
+            set_background_color({ 23, 214, 232, background_opacity });
+            break;
+        }
+        default:
+            assert(false && "Unknown button style.");
+            break;
+        }
+    }
+
+    void Button::process_event(const Event &e) {
+        switch (e.type) {
+        case EventType::Click:
+            for (const auto &function : pressed_callbacks) {
+                function();
+            }
+            break;
+        case EventType::Hover:
+            hovered = e.hover.active;
+            update_properties();
+            break;
+        default:
+            assert(false && "Unknown event type.");
+            break;
+        }
+    }
+
+    void Button::add_pressed_callback(std::function<void()> callback) {
+        pressed_callbacks.emplace_back(callback);
+    }
+};
\ No newline at end of file
diff --git a/src/ui/elements/ui_button.h b/src/ui/elements/ui_button.h
new file mode 100644
index 0000000..b44ad4e
--- /dev/null
+++ b/src/ui/elements/ui_button.h
@@ -0,0 +1,28 @@
+#pragma once
+
+#include "ui_element.h"
+
+namespace recompui {
+
+    enum class ButtonStyle {
+        Primary,
+        Secondary
+    };
+
+    class Button : public Element {
+    protected:
+        ButtonStyle style = ButtonStyle::Primary;
+        std::unique_ptr<Element> floater;
+        std::list<std::function<void()>> pressed_callbacks;
+        bool hovered = false;
+
+        void update_properties();
+
+        // Element overrides.
+        virtual void process_event(const Event &e) override;
+    public:
+        Button(const std::string &text, ButtonStyle style, Element *parent);
+        void add_pressed_callback(std::function<void()> callback);
+    };
+
+} // namespace recompui
\ No newline at end of file
diff --git a/src/ui/elements/ui_container.cpp b/src/ui/elements/ui_container.cpp
new file mode 100644
index 0000000..6828d87
--- /dev/null
+++ b/src/ui/elements/ui_container.cpp
@@ -0,0 +1,14 @@
+#include "ui_container.h"
+
+#include <cassert>
+
+namespace recompui {
+
+    Container::Container(FlexDirection direction, JustifyContent justify_content, Element *parent) : Element(parent) {
+        set_display(Display::Flex);
+        set_flex(1.0f, 1.0f);
+        set_flex_direction(direction);
+        set_justify_content(justify_content);
+    }
+
+};
\ No newline at end of file
diff --git a/src/ui/elements/ui_container.h b/src/ui/elements/ui_container.h
new file mode 100644
index 0000000..289dd3c
--- /dev/null
+++ b/src/ui/elements/ui_container.h
@@ -0,0 +1,12 @@
+#pragma once
+
+#include "ui_element.h"
+
+namespace recompui {
+
+    class Container : public Element {
+    public:
+        Container(FlexDirection direction, JustifyContent justify_content, Element *parent);
+    };
+
+} // namespace recompui
diff --git a/src/ui/elements/ui_element.cpp b/src/ui/elements/ui_element.cpp
new file mode 100644
index 0000000..ba57b75
--- /dev/null
+++ b/src/ui/elements/ui_element.cpp
@@ -0,0 +1,415 @@
+#include "ui_element.h"
+
+#include <cassert>
+
+namespace recompui {
+
+static Rml::Unit to_rml(Unit unit) {
+    switch (unit) {
+    case Unit::Float:
+        return Rml::Unit::NUMBER;
+    case Unit::Dp:
+        return Rml::Unit::DP;
+    case Unit::Percent:
+        return Rml::Unit::PERCENT;
+    default:
+        return Rml::Unit::UNKNOWN;
+    }
+}
+
+static Rml::Style::Overflow to_rml(Overflow overflow) {
+    switch (overflow) {
+    case Overflow::Visible:
+        return Rml::Style::Overflow::Visible;
+    case Overflow::Hidden:
+        return Rml::Style::Overflow::Hidden;
+    case Overflow::Auto:
+        return Rml::Style::Overflow::Auto;
+    case Overflow::Scroll:
+        return Rml::Style::Overflow::Scroll;
+    default:
+        assert(false && "Unknown overflow.");
+        return Rml::Style::Overflow::Visible;
+    }
+}
+
+Element::Element(Rml::Element *base) {
+    assert(base != nullptr);
+
+    this->base = base;
+    this->parent = nullptr;
+    this->owner = false;
+}
+
+Element::Element(Element *parent, uint32_t events_enabled, Rml::String base_class) {
+    assert(parent != nullptr);
+
+    this->parent = parent;
+    this->owner = true;
+
+    base = parent->base->AppendChild(parent->base->GetOwnerDocument()->CreateElement(base_class));
+
+    register_event_listeners(events_enabled);
+}
+
+Element::~Element() {
+    if (owner) {
+        base->GetParentNode()->RemoveChild(base);
+    }
+}
+
+void Element::set_property(Rml::PropertyId property_id, const Rml::Property &property, Animation animation) {
+    assert(base != nullptr);
+
+    if (animation.type == AnimationType::None) {
+        base->SetProperty(property_id, property);
+    }
+    else {
+        const Rml::String property_name = Rml::StyleSheetSpecification::GetPropertyName(property_id);
+        base->Animate(property_name, property, animation.duration);
+    }
+}
+
+void Element::register_event_listeners(uint32_t events_enabled) {
+    assert(base != nullptr);
+
+    if (events_enabled & Events(EventType::Click)) {
+        base->AddEventListener(Rml::EventId::Mousedown, this);
+    }
+
+    if (events_enabled & Events(EventType::Focus)) {
+        base->AddEventListener(Rml::EventId::Focus, this);
+        base->AddEventListener(Rml::EventId::Blur, this);
+    }
+
+    if (events_enabled & Events(EventType::Hover)) {
+        base->AddEventListener(Rml::EventId::Mouseover, this);
+        base->AddEventListener(Rml::EventId::Mouseout, this);
+    }
+}
+
+void Element::ProcessEvent(Rml::Event &event) {
+    // Events that are processed during any phase.
+    switch (event.GetId()) {
+    case Rml::EventId::Mousedown:
+        process_event(Event::click_event(event.GetParameter("mouse_x", 0.0f), event.GetParameter("mouse_y", 0.0f)));
+        break;
+    default:
+        break;
+    }
+
+    // Events that are only processed during the Target phase.
+    if (event.GetPhase() == Rml::EventPhase::Target) {
+        switch (event.GetId()) {
+        case Rml::EventId::Mouseover:
+            process_event(Event::hover_event(true));
+            break;
+        case Rml::EventId::Mouseout:
+            process_event(Event::hover_event(false));
+            break;
+        case Rml::EventId::Focus:
+            process_event(Event::focus_event(true));
+            break;
+        case Rml::EventId::Blur:
+            process_event(Event::focus_event(false));
+            break;
+        default:
+            break;
+        }
+    }
+}
+
+void Element::process_event(const Event &) {
+    // Does nothing by default.
+}
+
+void Element::set_position(Position position) {
+    switch (position) {
+    case Position::Absolute:
+        set_property(Rml::PropertyId::Position, Rml::Style::Position::Absolute);
+        break;
+    case Position::Relative:
+        set_property(Rml::PropertyId::Position, Rml::Style::Position::Relative);
+        break;
+    default:
+        assert(false && "Unknown position.");
+        break;
+    }
+}
+
+void Element::set_left(float left, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::Left, Rml::Property(left, to_rml(unit)), animation);
+}
+
+void Element::set_top(float top, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::Top, Rml::Property(top, to_rml(unit)), animation);
+}
+
+void Element::set_right(float right, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::Right, Rml::Property(right, to_rml(unit)), animation);
+}
+
+void Element::set_bottom(float bottom, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::Bottom, Rml::Property(bottom, to_rml(unit)), animation);
+}
+
+void Element::set_width(float width, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::Width, Rml::Property(width, to_rml(unit)), animation);
+}
+
+void Element::set_width_auto() {
+    set_property(Rml::PropertyId::Width, Rml::Property(Rml::Style::FlexBasis::Type::Auto, Rml::Unit::KEYWORD));
+}
+
+void Element::set_height(float height, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::Height, Rml::Property(height, to_rml(unit)), animation);
+}
+
+void Element::set_height_auto() {
+    set_property(Rml::PropertyId::Height, Rml::Property(Rml::Style::FlexBasis::Type::Auto, Rml::Unit::KEYWORD));
+}
+
+void Element::set_padding(float padding, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::PaddingLeft, Rml::Property(padding, to_rml(unit)), animation);
+    set_property(Rml::PropertyId::PaddingTop, Rml::Property(padding, to_rml(unit)), animation);
+    set_property(Rml::PropertyId::PaddingRight, Rml::Property(padding, to_rml(unit)), animation);
+    set_property(Rml::PropertyId::PaddingBottom, Rml::Property(padding, to_rml(unit)), animation);
+}
+
+void Element::set_padding_left(float padding, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::PaddingLeft, Rml::Property(padding, to_rml(unit)), animation);
+}
+
+void Element::set_padding_top(float padding, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::PaddingTop, Rml::Property(padding, to_rml(unit)), animation);
+}
+
+void Element::set_padding_right(float padding, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::PaddingRight, Rml::Property(padding, to_rml(unit)), animation);
+}
+
+void Element::set_padding_bottom(float padding, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::PaddingBottom, Rml::Property(padding, to_rml(unit)), animation);
+}
+
+void Element::set_margin(float margin, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::MarginLeft, Rml::Property(margin, to_rml(unit)), animation);
+    set_property(Rml::PropertyId::MarginTop, Rml::Property(margin, to_rml(unit)), animation);
+    set_property(Rml::PropertyId::MarginRight, Rml::Property(margin, to_rml(unit)), animation);
+    set_property(Rml::PropertyId::MarginBottom, Rml::Property(margin, to_rml(unit)), animation);
+}
+
+void Element::set_margin_left(float margin, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::MarginLeft, Rml::Property(margin, to_rml(unit)), animation);
+}
+
+void Element::set_margin_top(float margin, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::MarginTop, Rml::Property(margin, to_rml(unit)), animation);
+}
+
+void Element::set_margin_right(float margin, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::MarginRight, Rml::Property(margin, to_rml(unit)), animation);
+}
+
+void Element::set_margin_bottom(float margin, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::MarginBottom, Rml::Property(margin, to_rml(unit)), animation);
+}
+
+void Element::set_border_width(float width, Unit unit, Animation animation) {
+    Rml::Property property(width, to_rml(unit));
+    set_property(Rml::PropertyId::BorderTopWidth, property, animation);
+    set_property(Rml::PropertyId::BorderBottomWidth, property, animation);
+    set_property(Rml::PropertyId::BorderLeftWidth, property, animation);
+    set_property(Rml::PropertyId::BorderRightWidth, property, animation);
+}
+
+void Element::set_border_radius(float radius, Unit unit, Animation animation) {
+    Rml::Property property(radius, to_rml(unit));
+    set_property(Rml::PropertyId::BorderTopLeftRadius, property, animation);
+    set_property(Rml::PropertyId::BorderTopRightRadius, property, animation);
+    set_property(Rml::PropertyId::BorderBottomLeftRadius, property, animation);
+    set_property(Rml::PropertyId::BorderBottomRightRadius, property, animation);
+}
+
+void Element::set_border_top_left_radius(float radius, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::BorderTopLeftRadius, Rml::Property(radius, to_rml(unit)), animation);
+}
+
+void Element::set_border_top_right_radius(float radius, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::BorderTopRightRadius, Rml::Property(radius, to_rml(unit)), animation);
+}
+
+void Element::set_border_bottom_left_radius(float radius, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::BorderBottomLeftRadius, Rml::Property(radius, to_rml(unit)), animation);
+}
+
+void Element::set_border_bottom_right_radius(float radius, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::BorderBottomRightRadius, Rml::Property(radius, to_rml(unit)), animation);
+}
+
+void Element::set_background_color(const Color &color, Animation animation) {
+    Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
+    set_property(Rml::PropertyId::BackgroundColor, property, animation);
+}
+
+void Element::set_border_color(const Color &color, Animation animation) {
+    Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
+    set_property(Rml::PropertyId::BorderTopColor, property, animation);
+    set_property(Rml::PropertyId::BorderBottomColor, property, animation);
+    set_property(Rml::PropertyId::BorderLeftColor, property, animation);
+    set_property(Rml::PropertyId::BorderRightColor, property, animation);
+}
+
+void Element::set_color(const Color &color, Animation animation) {
+    Rml::Property property(Rml::Colourb(color.r, color.g, color.b, color.a), Rml::Unit::COLOUR);
+    set_property(Rml::PropertyId::Color, property, animation);
+}
+
+void Element::set_cursor(Cursor cursor) {
+    switch (cursor) {
+    case Cursor::None:
+        assert(false && "Unimplemented.");
+        break;
+    case Cursor::Pointer:
+        set_property(Rml::PropertyId::Cursor, Rml::Property("pointer", Rml::Unit::STRING));
+        break;
+    default:
+        assert(false && "Unknown cursor.");
+        break;
+    }
+}
+
+void Element::set_opacity(float opacity, Animation animation) {
+    set_property(Rml::PropertyId::Opacity, Rml::Property(opacity, Rml::Unit::NUMBER), animation);
+}
+
+void Element::set_display(Display display) {
+    switch (display) {
+    case Display::Block:
+        set_property(Rml::PropertyId::Display, Rml::Style::Display::Block);
+        break;
+    case Display::Flex:
+        set_property(Rml::PropertyId::Display, Rml::Style::Display::Flex);
+        break;
+    default:
+        assert(false && "Unknown display.");
+        break;
+    }
+}
+
+void Element::set_justify_content(JustifyContent justify_content) {
+    switch (justify_content) {
+    case JustifyContent::FlexStart:
+        set_property(Rml::PropertyId::JustifyContent, Rml::Style::JustifyContent::FlexStart);
+        break;
+    case JustifyContent::FlexEnd:
+        set_property(Rml::PropertyId::JustifyContent, Rml::Style::JustifyContent::FlexEnd);
+        break;
+    case JustifyContent::Center:
+        set_property(Rml::PropertyId::JustifyContent, Rml::Style::JustifyContent::Center);
+        break;
+    case JustifyContent::SpaceBetween:
+        set_property(Rml::PropertyId::JustifyContent, Rml::Style::JustifyContent::SpaceBetween);
+        break;
+    case JustifyContent::SpaceAround:
+        set_property(Rml::PropertyId::JustifyContent, Rml::Style::JustifyContent::SpaceAround);
+        break;
+    case JustifyContent::SpaceEvenly:
+        set_property(Rml::PropertyId::JustifyContent, Rml::Style::JustifyContent::SpaceEvenly);
+        break;
+    default:
+        assert(false && "Unknown justify content.");
+        break;
+    }
+}
+
+void Element::set_flex_grow(float grow, Animation animation) {
+    set_property(Rml::PropertyId::FlexGrow, Rml::Property(grow, Rml::Unit::NUMBER), animation);
+}
+
+void Element::set_flex_shrink(float shrink, Animation animation) {
+    set_property(Rml::PropertyId::FlexShrink, Rml::Property(shrink, Rml::Unit::NUMBER), animation);
+}
+
+void Element::set_flex_basis_auto() {
+    set_property(Rml::PropertyId::FlexBasis, Rml::Property(Rml::Style::FlexBasis::Type::Auto, Rml::Unit::KEYWORD));
+}
+
+void Element::set_flex_basis_percentage(float basis, Animation animation) {
+    set_property(Rml::PropertyId::FlexBasis, Rml::Property(basis, Rml::Unit::PERCENT), animation);
+}
+
+void Element::set_flex(float grow, float shrink, Animation animation) {
+    set_flex_grow(grow, animation);
+    set_flex_shrink(shrink, animation);
+    set_flex_basis_auto();
+}
+
+void Element::set_flex(float grow, float shrink, float basis_percentage, Animation animation) {
+    set_flex_grow(grow, animation);
+    set_flex_shrink(shrink, animation);
+    set_flex_basis_percentage(basis_percentage, animation);
+}
+
+void Element::set_flex_direction(FlexDirection flex_direction) {
+    switch (flex_direction) {
+        case FlexDirection::Row:
+            set_property(Rml::PropertyId::FlexDirection, Rml::Style::FlexDirection::Row);
+            break;
+        case FlexDirection::Column:
+            set_property(Rml::PropertyId::FlexDirection, Rml::Style::FlexDirection::Column);
+            break;
+        default:
+            assert(false && "Unknown flex direction.");
+            break;
+    }
+}
+
+void Element::set_overflow(Overflow overflow) {
+    set_property(Rml::PropertyId::OverflowX, to_rml(overflow));
+    set_property(Rml::PropertyId::OverflowY, to_rml(overflow));
+}
+
+void Element::set_overflow_x(Overflow overflow) {
+    set_property(Rml::PropertyId::OverflowX, to_rml(overflow));
+}
+
+void Element::set_overflow_y(Overflow overflow) {
+    set_property(Rml::PropertyId::OverflowY, to_rml(overflow));
+}
+
+void Element::set_font_size(float size, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::FontSize, Rml::Property(size, to_rml(unit)), animation);
+}
+
+void Element::set_letter_spacing(float spacing, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::LetterSpacing, Rml::Property(spacing, to_rml(unit)), animation);
+}
+
+void Element::set_line_height(float height, Unit unit, Animation animation) {
+    set_property(Rml::PropertyId::LineHeight, Rml::Property(height, to_rml(unit)), animation);
+}
+
+void Element::set_font_style(FontStyle style) {
+    switch (style) {
+    case FontStyle::Normal:
+        set_property(Rml::PropertyId::FontStyle, Rml::Style::FontStyle::Normal);
+        break;
+    case FontStyle::Italic:
+        set_property(Rml::PropertyId::FontStyle, Rml::Style::FontStyle::Italic);
+        break;
+    default:
+        assert(false && "Unknown font style.");
+        break;
+    }
+}
+
+void Element::set_font_weight(uint32_t weight, Animation animation) {
+    set_property(Rml::PropertyId::FontWeight, Rml::Style::FontWeight(weight), animation);
+}
+
+void Element::set_text(const std::string &text) {
+    base->SetInnerRML(text);
+}
+
+};
\ No newline at end of file
diff --git a/src/ui/elements/ui_element.h b/src/ui/elements/ui_element.h
new file mode 100644
index 0000000..296fdd6
--- /dev/null
+++ b/src/ui/elements/ui_element.h
@@ -0,0 +1,211 @@
+#pragma once
+
+#include "RmlUi/Core.h"
+
+namespace recompui {
+
+struct Color {
+    uint8_t r = 255;
+    uint8_t g = 255;
+    uint8_t b = 255;
+    uint8_t a = 255;
+};
+
+enum class Cursor {
+    None,
+    Pointer
+};
+
+enum class EventType {
+    None,
+    Click,
+    Focus,
+    Hover,
+    Count
+};
+
+template <typename Enum, typename = std::enable_if_t<std::is_enum_v<Enum>>>
+constexpr uint32_t Events(Enum first) {
+    return 1u << static_cast<uint32_t>(first);
+}
+
+template <typename Enum, typename... Enums, typename = std::enable_if_t<std::is_enum_v<Enum>>>
+constexpr uint32_t Events(Enum first, Enums... rest) {
+    return Events(first) | Events(rest...);
+}
+
+struct Event {
+    struct Mouse {
+        float x;
+        float y;
+    };
+
+    EventType type;
+
+    union {
+        struct {
+            Mouse mouse;
+        } click;
+
+        struct {
+            bool active;
+        } focus;
+
+        struct {
+            bool active;
+        } hover;
+    };
+
+    static Event click_event(float x, float y) {
+        Event e = {};
+        e.type = EventType::Click;
+        e.click.mouse.x = x;
+        e.click.mouse.y = y;
+        return e;
+    }
+
+    static Event focus_event(bool active) {
+        Event e = {};
+        e.type = EventType::Focus;
+        e.focus.active = active;
+        return e;
+    }
+
+    static Event hover_event(bool active) {
+        Event e = {};
+        e.type = EventType::Hover;
+        e.focus.active = active;
+        return e;
+    }
+};
+
+enum class Display {
+    Block,
+    Flex
+};
+
+enum class Position {
+    Absolute,
+    Relative
+};
+
+enum class JustifyContent {
+    FlexStart,
+    FlexEnd,
+    Center,
+    SpaceBetween,
+    SpaceAround,
+    SpaceEvenly
+};
+
+enum class FlexDirection {
+    Row,
+    Column
+};
+
+enum class Overflow {
+    Visible,
+    Hidden,
+    Auto,
+    Scroll
+};
+
+enum class Unit {
+    Float,
+    Dp,
+    Percent
+};
+
+enum class AnimationType {
+    None,
+    Tween
+};
+
+enum class FontStyle {
+    Normal,
+    Italic
+};
+
+struct Animation {
+    AnimationType type = AnimationType::None;
+    float duration = 0.0f;
+
+    static Animation tween(float duration) {
+        Animation a;
+        a.type = AnimationType::Tween;
+        a.duration = duration;
+        return a;
+    }
+};
+
+class Element : public Rml::EventListener {
+private:
+    void set_property(Rml::PropertyId property_id, const Rml::Property &property, Animation animation = Animation());
+    void register_event_listeners(uint32_t events_enabled);
+
+    // Rml::EventListener overrides.
+    virtual void ProcessEvent(Rml::Event &event) override;
+protected:
+    Element *parent;
+    Rml::Element *base;
+    bool owner;
+
+    virtual void process_event(const Event &e);
+public:
+    // Used for backwards compatibility with legacy UI elements.
+    Element(Rml::Element *base);
+
+    // Used to actually construct elements.
+    Element(Element *parent, uint32_t events_enabled = 0, Rml::String base_class = "div");
+    virtual ~Element();
+    void set_position(Position position);
+    void set_left(float left, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_top(float top, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_right(float right, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_bottom(float bottom, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_width(float width, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_width_auto();
+    void set_height(float height, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_height_auto();
+    void set_padding(float padding, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_padding_left(float padding, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_padding_top(float padding, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_padding_right(float padding, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_padding_bottom(float padding, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_margin(float margin, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_margin_left(float margin, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_margin_top(float margin, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_margin_right(float margin, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_margin_bottom(float margin, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_border_width(float width, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_border_radius(float radius, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_border_top_left_radius(float radius, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_border_top_right_radius(float radius, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_border_bottom_left_radius(float radius, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_border_bottom_right_radius(float radius, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_background_color(const Color &color, Animation animation = Animation());
+    void set_border_color(const Color &color, Animation animation = Animation());
+    void set_color(const Color &color, Animation animation = Animation());
+    void set_cursor(Cursor cursor);
+    void set_opacity(float opacity, Animation animation = Animation());
+    void set_display(Display display);
+    void set_justify_content(JustifyContent justify_content);
+    void set_flex_grow(float grow, Animation animation = Animation());
+    void set_flex_shrink(float shrink, Animation animation = Animation());
+    void set_flex_basis_auto();
+    void set_flex_basis_percentage(float basis_percentage, Animation animation = Animation());
+    void set_flex(float grow, float shrink, Animation animation = Animation());
+    void set_flex(float grow, float shrink, float basis_percentage, Animation animation = Animation());
+    void set_flex_direction(FlexDirection flex_direction);
+    void set_overflow(Overflow overflow);
+    void set_overflow_x(Overflow overflow);
+    void set_overflow_y(Overflow overflow);
+    void set_font_size(float size, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_letter_spacing(float spacing, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_line_height(float height, Unit unit = Unit::Dp, Animation animation = Animation());
+    void set_font_style(FontStyle style);
+    void set_font_weight(uint32_t weight, Animation animation = Animation());
+    void set_text(const std::string &text);
+};
+
+} // namespace recompui
\ No newline at end of file
diff --git a/src/ui/elements/ui_image.cpp b/src/ui/elements/ui_image.cpp
new file mode 100644
index 0000000..1b326ae
--- /dev/null
+++ b/src/ui/elements/ui_image.cpp
@@ -0,0 +1,11 @@
+#include "ui_image.h"
+
+#include <cassert>
+
+namespace recompui {
+
+    Image::Image(Element *parent) : Element(parent) {
+
+    }
+
+};
\ No newline at end of file
diff --git a/src/ui/elements/ui_image.h b/src/ui/elements/ui_image.h
new file mode 100644
index 0000000..7e2049e
--- /dev/null
+++ b/src/ui/elements/ui_image.h
@@ -0,0 +1,12 @@
+#pragma once
+
+#include "ui_element.h"
+
+namespace recompui {
+
+    class Image : public Element {
+    public:
+        Image(Element *parent);
+    };
+
+} // namespace recompui
\ No newline at end of file
diff --git a/src/ui/elements/ui_label.cpp b/src/ui/elements/ui_label.cpp
new file mode 100644
index 0000000..8d8453c
--- /dev/null
+++ b/src/ui/elements/ui_label.cpp
@@ -0,0 +1,29 @@
+#include "ui_label.h"
+
+#include <cassert>
+
+namespace recompui {
+
+    Label::Label(LabelStyle label_style, Element *parent) : Element(parent) {
+        switch (label_style) {
+        case LabelStyle::Normal:
+            set_font_size(28.0f);
+            set_letter_spacing(3.08f);
+            set_line_height(28.0f);
+            break;
+        case LabelStyle::Large:
+            set_font_size(36.0f);
+            set_letter_spacing(2.52f);
+            set_line_height(36.0f);
+            break;
+        }
+        
+        set_font_style(FontStyle::Normal);
+        set_font_weight(700);
+    }
+
+    Label::Label(const std::string &text, LabelStyle label_style, Element *parent) : Label(label_style, parent) {
+        set_text(text);
+    }
+
+};
\ No newline at end of file
diff --git a/src/ui/elements/ui_label.h b/src/ui/elements/ui_label.h
new file mode 100644
index 0000000..72a761d
--- /dev/null
+++ b/src/ui/elements/ui_label.h
@@ -0,0 +1,18 @@
+#pragma once
+
+#include "ui_element.h"
+
+namespace recompui {
+
+    enum class LabelStyle {
+        Normal,
+        Large
+    };
+
+    class Label : public Element {
+    public:
+        Label(LabelStyle label_style, Element *parent);
+        Label(const std::string &text, LabelStyle label_style, Element *parent);
+    };
+
+} // namespace recompui
\ No newline at end of file
diff --git a/src/ui/elements/ui_mod_details_panel.cpp b/src/ui/elements/ui_mod_details_panel.cpp
new file mode 100644
index 0000000..bac5af7
--- /dev/null
+++ b/src/ui/elements/ui_mod_details_panel.cpp
@@ -0,0 +1,73 @@
+#include "ui_mod_details_panel.h"
+
+#include "presets.h"
+#include "librecomp/mods.hpp"
+
+namespace recompui {
+
+ModDetailsPanel::ModDetailsPanel(Element *parent) : Element(parent) {
+    set_flex(1.0f, 1.0f, 200.0f);
+    set_height(100.0f, Unit::Percent);
+    set_flex_direction(FlexDirection::Column);
+    set_border_bottom_right_radius(16.0f);
+    set_background_color(Color{ 190, 184, 219, 25 });
+
+    header_container = std::make_unique<recompui::Container>(FlexDirection::Row, JustifyContent::FlexStart, this);
+    header_container->set_padding(16.0f);
+    header_container->set_background_color(Color{ 0, 0, 0, 89 });
+    {
+        thumbnail_container = std::make_unique<recompui::Container>(FlexDirection::Column, JustifyContent::SpaceEvenly, header_container.get());
+        {
+            thumbnail_image = std::make_unique<recompui::Image>(thumbnail_container.get());
+            thumbnail_image->set_width(100.0f);
+            thumbnail_image->set_height(100.0f);
+            thumbnail_image->set_background_color(Color{ 190, 184, 219, 25 });
+        }
+
+        header_details_container = std::make_unique<recompui::Container>(FlexDirection::Column, JustifyContent::SpaceEvenly, header_container.get());
+        header_details_container->set_width(100.0f, Unit::Percent);
+        header_details_container->set_margin_left(32.0f);
+        header_details_container->set_overflow(Overflow::Hidden);
+
+        {
+            title_label = std::make_unique<recompui::Label>(LabelStyle::Large, header_details_container.get());
+            version_label = std::make_unique<recompui::Label>(LabelStyle::Normal, header_details_container.get());
+        }
+    }
+
+    body_container = std::make_unique<recompui::Container>(FlexDirection::Column, JustifyContent::FlexStart, this);
+    body_container->set_padding_left(16.0f);
+    {
+        description_label = std::make_unique<recompui::Label>(LabelStyle::Normal, body_container.get());
+        authors_label = std::make_unique<recompui::Label>(LabelStyle::Normal, body_container.get());
+        buttons_container = std::make_unique<recompui::Container>(FlexDirection::Row, JustifyContent::SpaceAround, body_container.get());
+        buttons_container->set_padding_left(16.0f);
+        {
+            enable_toggle = std::make_unique<recompui::Toggle>(buttons_container.get());
+            configure_button = std::make_unique<recompui::Button>("Configure", recompui::ButtonStyle::Secondary, buttons_container.get());
+            erase_button = std::make_unique<recompui::Button>("Erase", recompui::ButtonStyle::Secondary, buttons_container.get());
+        }
+    }
+}
+
+ModDetailsPanel::~ModDetailsPanel() {
+}
+
+void ModDetailsPanel::set_mod_details(const recomp::mods::ModDetails& details) {
+    cur_details = details;
+
+    title_label->set_text(cur_details.mod_id);
+    version_label->set_text(cur_details.version.to_string());
+
+    std::string authors_str = "<i>Authors</i>:";
+    bool first = true;
+    for (const std::string& author : details.authors) {
+        authors_str += (first ? " " : ", ") + author;
+        first = false;
+    }
+
+    authors_label->set_text(authors_str);
+    description_label->set_text("Placeholder description. Some long text to make sure that wrapping is working correctly. Yet more text and so on.");
+}
+
+} // namespace recompui
diff --git a/src/ui/elements/ui_mod_details_panel.h b/src/ui/elements/ui_mod_details_panel.h
new file mode 100644
index 0000000..90517da
--- /dev/null
+++ b/src/ui/elements/ui_mod_details_panel.h
@@ -0,0 +1,37 @@
+#ifndef RECOMPUI_ELEMENT_MOD_DETAILS_PANEL_H
+#define RECOMPUI_ELEMENT_MOD_DETAILS_PANEL_H
+
+#include "common.h"
+#include "librecomp/mods.hpp"
+#include "ui_button.h"
+#include "ui_container.h"
+#include "ui_image.h"
+#include "ui_label.h"
+#include "ui_toggle.h"
+
+namespace recompui {
+
+class ModDetailsPanel : public Element {
+public:
+    ModDetailsPanel(Element *parent);
+	virtual ~ModDetailsPanel();
+    void set_mod_details(const recomp::mods::ModDetails& details);
+private:
+    recomp::mods::ModDetails cur_details;
+    std::unique_ptr<recompui::Container> thumbnail_container;
+    std::unique_ptr<recompui::Image> thumbnail_image;
+    std::unique_ptr<recompui::Container> header_container;
+    std::unique_ptr<recompui::Container> header_details_container;
+    std::unique_ptr<recompui::Label> title_label;
+    std::unique_ptr<recompui::Label> version_label;
+    std::unique_ptr<recompui::Container> body_container;
+    std::unique_ptr<recompui::Label> description_label;
+    std::unique_ptr<recompui::Label> authors_label;
+    std::unique_ptr<recompui::Container> buttons_container;
+    std::unique_ptr<recompui::Toggle> enable_toggle;
+    std::unique_ptr<recompui::Button> configure_button;
+    std::unique_ptr<recompui::Button> erase_button;
+};
+
+} // namespace recompui
+#endif
diff --git a/src/ui/elements/ui_toggle.cpp b/src/ui/elements/ui_toggle.cpp
new file mode 100644
index 0000000..a7e4a71
--- /dev/null
+++ b/src/ui/elements/ui_toggle.cpp
@@ -0,0 +1,82 @@
+#include "ui_toggle.h"
+
+#include <cassert>
+
+namespace recompui {
+
+    Toggle::Toggle(Element *parent) : Element(parent, Events(EventType::Click, EventType::Hover), "button") {
+        set_width(162.0f);
+        set_height(72.0f);
+        set_border_radius(36.0f);
+        set_opacity(0.9f);
+        set_cursor(Cursor::Pointer);
+        set_border_width(2.0f);
+
+        floater = std::make_unique<Element>(this);
+        floater->set_position(Position::Relative);
+        floater->set_top(2.0f);
+        floater->set_width(80.0f);
+        floater->set_height(64.0f);
+        floater->set_border_radius(32.0f);
+
+        set_checked_internal(false, false, true);
+        update_properties();
+    }
+
+    void Toggle::set_checked_internal(bool checked, bool animate, bool setup) {
+        if (this->checked != checked || setup) {
+            this->checked = checked;
+
+            floater->set_left(floater_left_target(), Unit::Dp, animate ? Animation::tween(0.1f) : Animation());
+
+            if (!setup) {
+                update_properties();
+
+                for (const auto &function : checked_callbacks) {
+                    function(checked);
+                }
+            }
+        }
+    }
+
+    void Toggle::update_properties() {
+        Color border_color = checked ? Color{ 34, 177, 76, 255 } : Color{ 177, 76, 34, 255 };
+        Color main_color = checked ? Color{ 68, 206, 120, 255 } : Color{ 206, 120, 68, 255 };
+        main_color.a = hovered ? 76 : 0;
+
+        set_border_color(border_color);
+        set_background_color(main_color);
+        floater->set_background_color(border_color);
+    }
+
+    float Toggle::floater_left_target() const {
+        return checked ? 4.0f : 78.0f;
+    }
+
+    void Toggle::process_event(const Event &e) {
+        switch (e.type) {
+        case EventType::Click:
+            set_checked_internal(!checked, true, false);
+            break;
+        case EventType::Hover:
+            hovered = e.hover.active;
+            update_properties();
+            break;
+        default:
+            assert(false && "Unknown event type.");
+            break;
+        }
+    }
+
+    void Toggle::set_checked(bool checked) {
+        set_checked_internal(checked, false, false);
+    }
+
+    bool Toggle::is_checked() const {
+        return checked;
+    }
+
+    void Toggle::add_checked_callback(std::function<void(bool)> callback) {
+        checked_callbacks.emplace_back(callback);
+    }
+};
\ No newline at end of file
diff --git a/src/ui/elements/ui_toggle.h b/src/ui/elements/ui_toggle.h
new file mode 100644
index 0000000..242af2c
--- /dev/null
+++ b/src/ui/elements/ui_toggle.h
@@ -0,0 +1,27 @@
+#pragma once
+
+#include "ui_element.h"
+
+namespace recompui {
+
+    class Toggle : public Element {
+    protected:
+        std::unique_ptr<Element> floater;
+        std::list<std::function<void(bool)>> checked_callbacks;
+        bool checked = false;
+        bool hovered = false;
+
+        void set_checked_internal(bool checked, bool animate, bool setup);
+        void update_properties();
+        float floater_left_target() const;
+
+        // Element overrides.
+        virtual void process_event(const Event &e) override;
+    public:
+        Toggle(Element *parent);
+        void set_checked(bool checked);
+        bool is_checked() const;
+        void add_checked_callback(std::function<void(bool)> callback);
+    };
+
+} // namespace recompui
\ No newline at end of file
diff --git a/src/ui/ui_elements.cpp b/src/ui/ui_elements.cpp
index 59a8109..da37998 100644
--- a/src/ui/ui_elements.cpp
+++ b/src/ui/ui_elements.cpp
@@ -20,7 +20,6 @@ static RecompElementConfig custom_elements[] = {
     CUSTOM_ELEMENT("recomp-option-type-radio-tabs", recompui::ElementOptionTypeRadioTabs),
     CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange),
     CUSTOM_ELEMENT("recomp-mod-menu", recompui::ElementModMenu),
-    CUSTOM_ELEMENT("recomp-mod-details-panel", recompui::ElementModDetailsPanel),
 };
 
 void recompui::register_custom_elements() {
diff --git a/src/ui/ui_elements.h b/src/ui/ui_elements.h
index f7dc96b..8ec01cf 100644
--- a/src/ui/ui_elements.h
+++ b/src/ui/ui_elements.h
@@ -15,7 +15,6 @@
 #include "elements/ElementOptionTypeTextField.h"
 #include "elements/ElementDescription.h"
 #include "elements/ElementModMenu.h"
-#include "elements/ElementModDetailsPanel.h"
 
 namespace recompui {
     void register_custom_elements();
diff --git a/src/ui/ui_launcher.cpp b/src/ui/ui_launcher.cpp
index f699eb7..3733c69 100644
--- a/src/ui/ui_launcher.cpp
+++ b/src/ui/ui_launcher.cpp
@@ -93,6 +93,12 @@ public:
                 recompui::set_config_submenu(recompui::ConfigSubmenu::General);
 			}
 		);
+        recompui::register_event(listener, "open_mods",
+            [](const std::string &param, Rml::Event &event) {
+                recompui::set_current_menu(recompui::Menu::Config);
+                recompui::set_config_submenu(recompui::ConfigSubmenu::Mods);
+            }
+        );
         recompui::register_event(listener, "exit_game",
 			[](const std::string& param, Rml::Event& event) {
 				ultramodern::quit();
diff --git a/src/ui/ui_renderer.cpp b/src/ui/ui_renderer.cpp
index 1e2bdaf..d550d3f 100644
--- a/src/ui/ui_renderer.cpp
+++ b/src/ui/ui_renderer.cpp
@@ -105,6 +105,14 @@ T from_bytes_le(const char* input) {
 void load_document();
 
 class RmlRenderInterface_RT64 : public Rml::RenderInterfaceCompatibility {
+    struct DynamicBuffer {
+        std::unique_ptr<RT64::RenderBuffer> buffer_{};
+        uint32_t size_ = 0;
+        uint32_t bytes_used_ = 0;
+        uint8_t* mapped_data_ = nullptr;
+        RT64::RenderBufferFlags flags_ = RT64::RenderBufferFlag::NONE;
+    };
+
     static constexpr uint32_t per_frame_descriptor_set = 0;
     static constexpr uint32_t per_draw_descriptor_set = 1;
 
@@ -129,9 +137,9 @@ class RmlRenderInterface_RT64 : public Rml::RenderInterfaceCompatibility {
     Rml::Matrix4f mvp_ = Rml::Matrix4f::Identity();
     std::unordered_map<Rml::TextureHandle, TextureHandle> textures_{};
     Rml::TextureHandle texture_count_ = 1; // Start at 1 to reserve texture 0 as the 1x1 pixel white texture
-    std::unique_ptr<RT64::RenderBuffer> upload_buffer_{};
-    std::unique_ptr<RT64::RenderBuffer> vertex_buffer_{};
-    std::unique_ptr<RT64::RenderBuffer> index_buffer_{};
+    DynamicBuffer upload_buffer_;
+    DynamicBuffer vertex_buffer_;
+    DynamicBuffer index_buffer_;
     std::unique_ptr<RT64::RenderSampler> nearestSampler_{};
     std::unique_ptr<RT64::RenderSampler> linearSampler_{};
     std::unique_ptr<RT64::RenderShader> vertex_shader_{};
@@ -147,11 +155,6 @@ class RmlRenderInterface_RT64 : public Rml::RenderInterfaceCompatibility {
     std::unique_ptr<RT64::RenderDescriptorSet> screen_descriptor_set_{};
     std::unique_ptr<RT64::RenderBuffer> screen_vertex_buffer_{};
     uint64_t screen_vertex_buffer_size_ = 0;
-    uint32_t upload_buffer_size_ = 0;
-    uint32_t upload_buffer_bytes_used_ = 0;
-    uint8_t* upload_buffer_mapped_data_ = nullptr;
-    uint32_t vertex_buffer_size_ = 0;
-    uint32_t index_buffer_size_ = 0;
     uint32_t gTexture_descriptor_index;
     RT64::RenderInputSlot vertex_slot_{ 0, sizeof(Rml::Vertex) };
     RT64::RenderCommandList* list_ = nullptr;
@@ -167,10 +170,13 @@ public:
             multisampling_.sampleCount = desired_sample_count;
         }
 
+        vertex_buffer_.flags_ = RT64::RenderBufferFlag::VERTEX;
+        index_buffer_.flags_ = RT64::RenderBufferFlag::INDEX;
+
         // Create the texture upload buffer, vertex buffer and index buffer
-        resize_upload_buffer(initial_upload_buffer_size, false);
-        resize_vertex_buffer(initial_vertex_buffer_size);
-        resize_index_buffer(initial_index_buffer_size);
+        resize_dynamic_buffer(upload_buffer_, initial_upload_buffer_size, false);
+        resize_dynamic_buffer(vertex_buffer_, initial_vertex_buffer_size, false);
+        resize_dynamic_buffer(index_buffer_, initial_index_buffer_size, false);
 
         // Describe the vertex format
         std::vector<RT64::RenderInputElement> vertex_elements{};
@@ -260,90 +266,78 @@ public:
         }
     }
 
-    void resize_upload_buffer(uint32_t new_size, bool map = true) {
-        // Unmap the upload buffer if it's mapped
-        if (upload_buffer_mapped_data_ != nullptr) {
-            upload_buffer_->unmap();
+    void reset_dynamic_buffer(DynamicBuffer &dynamic_buffer) {
+        assert(dynamic_buffer.mapped_data_ == nullptr);
+        dynamic_buffer.bytes_used_ = 0;
+        dynamic_buffer.mapped_data_ = reinterpret_cast<uint8_t*>(dynamic_buffer.buffer_->map());
+    }
+
+    void end_dynamic_buffer(DynamicBuffer &dynamic_buffer) {
+        assert(dynamic_buffer.mapped_data_ != nullptr);
+        dynamic_buffer.buffer_->unmap();
+        dynamic_buffer.mapped_data_ = nullptr;
+    }
+
+    void resize_dynamic_buffer(DynamicBuffer &dynamic_buffer, uint32_t new_size, bool map = true) {
+        // Unmap the buffer if it's mapped
+        if (dynamic_buffer.mapped_data_ != nullptr) {
+            dynamic_buffer.buffer_->unmap();
         }
         
-        // If there's already an upload buffer, move it into the stale buffers so it persists until the start of next frame.
-        if (upload_buffer_) {
-            stale_buffers_.emplace_back(std::move(upload_buffer_));
+        // If there's already a buffer, move it into the stale buffers so it persists until the start of next frame.
+        if (dynamic_buffer.buffer_ != nullptr) {
+            stale_buffers_.emplace_back(std::move(dynamic_buffer.buffer_));
         }
 
-        // Create the new upload buffer, update the size and map it.
-        upload_buffer_ = render_context_->device->createBuffer(RT64::RenderBufferDesc::UploadBuffer(new_size));
-        upload_buffer_size_ = new_size;
-        upload_buffer_bytes_used_ = 0;
+        // Create the new buffer, update the size and map it.
+        dynamic_buffer.buffer_ = render_context_->device->createBuffer(RT64::RenderBufferDesc::UploadBuffer(new_size, dynamic_buffer.flags_));
+        dynamic_buffer.size_ = new_size;
+        dynamic_buffer.bytes_used_ = 0;
+
         if (map) {
-            upload_buffer_mapped_data_ = reinterpret_cast<uint8_t*>(upload_buffer_->map());
-        }
-        else {
-            upload_buffer_mapped_data_ = nullptr;
+            dynamic_buffer.mapped_data_ = reinterpret_cast<uint8_t*>(dynamic_buffer.buffer_->map());
         }
     }
 
-    uint32_t allocate_upload_data(uint32_t num_bytes) {
-        // Check if there's enough remaining room in the upload buffer to allocate the requested bytes.
-        uint32_t total_bytes = num_bytes + upload_buffer_bytes_used_;
+    uint32_t allocate_dynamic_data(DynamicBuffer &dynamic_buffer, uint32_t num_bytes) {
+        // Check if there's enough remaining room in the buffer to allocate the requested bytes.
+        uint32_t total_bytes = num_bytes + dynamic_buffer.bytes_used_;
 
-        if (total_bytes > upload_buffer_size_) {
-            // There isn't, so mark the current upload buffer as stale and allocate a new one with 50% more space than the required amount.
-            resize_upload_buffer(total_bytes + total_bytes / 2);
+        if (total_bytes > dynamic_buffer.size_) {
+            // There isn't, so mark the current buffer as stale and allocate a new one with 50% more space than the required amount.
+            resize_dynamic_buffer(dynamic_buffer, total_bytes + total_bytes / 2);
         }
 
-        // Record the current end of the upload buffer to return.
-        uint32_t offset = upload_buffer_bytes_used_;
+        // Record the current end of the buffer to return.
+        uint32_t offset = dynamic_buffer.bytes_used_;
 
-        // Bump the upload buffer's end forward by the number of bytes allocated.
-        upload_buffer_bytes_used_ += num_bytes;
+        // Bump the buffer's end forward by the number of bytes allocated.
+        dynamic_buffer.bytes_used_ += num_bytes;
 
         return offset;
     }
 
-    uint32_t allocate_upload_data_aligned(uint32_t num_bytes, uint32_t alignment) {
-        // Check if there's enough remaining room in the upload buffer to allocate the requested bytes.
-        uint32_t total_bytes = num_bytes + upload_buffer_bytes_used_;
+    uint32_t allocate_dynamic_data_aligned(DynamicBuffer &dynamic_buffer, uint32_t num_bytes, uint32_t alignment) {
+        // Check if there's enough remaining room in the buffer to allocate the requested bytes.
+        uint32_t total_bytes = num_bytes + dynamic_buffer.bytes_used_;
 
         // Determine the amount of padding needed to meet the target alignment.
-        uint32_t padding_bytes = ((upload_buffer_bytes_used_ + alignment - 1) / alignment) * alignment - upload_buffer_bytes_used_;
+        uint32_t padding_bytes = ((dynamic_buffer.bytes_used_ + alignment - 1) / alignment) * alignment - dynamic_buffer.bytes_used_;
 
-        // If there isn't enough room to allocate the required bytes plus the padding then resize the upload buffer and allocate from the start of the new one.
-        if (total_bytes + padding_bytes > upload_buffer_size_) {
-            resize_upload_buffer(total_bytes + total_bytes / 2);
+        // If there isn't enough room to allocate the required bytes plus the padding then resize the buffer and allocate from the start of the new one.
+        if (total_bytes + padding_bytes > dynamic_buffer.size_) {
+            resize_dynamic_buffer(dynamic_buffer, total_bytes + total_bytes / 2);
 
-            upload_buffer_bytes_used_ += num_bytes;
+            dynamic_buffer.bytes_used_ += num_bytes;
 
             return 0;
         }
 
         // Otherwise allocate the padding and required bytes and offset the allocated position by the padding size.
-        return allocate_upload_data(padding_bytes + num_bytes) + padding_bytes;
-    }
-
-    void resize_vertex_buffer(uint32_t new_size) {
-        if (vertex_buffer_) {
-            stale_buffers_.emplace_back(std::move(vertex_buffer_));
-        }
-        vertex_buffer_ = render_context_->device->createBuffer(RT64::RenderBufferDesc::VertexBuffer(new_size, RT64::RenderHeapType::DEFAULT));
-        vertex_buffer_size_ = new_size;
-    }
-
-    void resize_index_buffer(uint32_t new_size) {
-        if (index_buffer_) {
-            stale_buffers_.emplace_back(std::move(index_buffer_));
-        }
-        index_buffer_ = render_context_->device->createBuffer(RT64::RenderBufferDesc::IndexBuffer(new_size, RT64::RenderHeapType::DEFAULT));
-        index_buffer_size_ = new_size;
+        return allocate_dynamic_data(dynamic_buffer, padding_bytes + num_bytes) + padding_bytes;
     }
 
     void RenderGeometry(Rml::Vertex* vertices, int num_vertices, int* indices, int num_indices, Rml::TextureHandle texture, const Rml::Vector2f& translation) override {
-        uint32_t vert_size_bytes = num_vertices * sizeof(*vertices);
-        uint32_t index_size_bytes = num_indices * sizeof(*indices);
-        uint32_t total_bytes = vert_size_bytes + index_size_bytes;
-        uint32_t index_bytes_start = vert_size_bytes;
-
-
         if (!textures_.contains(texture)) {
             if (texture == 0) {
                 // Create a 1x1 pixel white texture as the first handle
@@ -355,37 +349,13 @@ public:
             }
         }
 
-        uint32_t upload_buffer_offset = allocate_upload_data(total_bytes);
-
-        if (vert_size_bytes > vertex_buffer_size_) {
-            resize_vertex_buffer(vert_size_bytes + vert_size_bytes / 2);
-        }
-
-        if (index_size_bytes > index_buffer_size_) {
-            resize_index_buffer(index_size_bytes + index_size_bytes / 2);
-        }
-
-        // Copy the vertex and index data into the mapped upload buffer.
-        memcpy(upload_buffer_mapped_data_ + upload_buffer_offset, vertices, vert_size_bytes);
-        memcpy(upload_buffer_mapped_data_ + upload_buffer_offset + vert_size_bytes, indices, index_size_bytes);
-
-        // Prepare the vertex and index buffers for being copied to.
-        RT64::RenderBufferBarrier copy_barriers[] = {
-			RT64::RenderBufferBarrier(vertex_buffer_.get(), RT64::RenderBufferAccess::WRITE),
-			RT64::RenderBufferBarrier(index_buffer_.get(), RT64::RenderBufferAccess::WRITE)
-		};
-        list_->barriers(RT64::RenderBarrierStage::COPY, copy_barriers, uint32_t(std::size(copy_barriers)));
-
-        // Copy from the upload buffer to the vertex and index buffers.
-        list_->copyBufferRegion(vertex_buffer_->at(0), upload_buffer_->at(upload_buffer_offset), vert_size_bytes);
-        list_->copyBufferRegion(index_buffer_->at(0), upload_buffer_->at(upload_buffer_offset + index_bytes_start), index_size_bytes);
-
-        // Prepare the vertex and index buffers for being used for rendering.
-        RT64::RenderBufferBarrier usage_barriers[] = {
-			RT64::RenderBufferBarrier(vertex_buffer_.get(), RT64::RenderBufferAccess::READ),
-			RT64::RenderBufferBarrier(index_buffer_.get(), RT64::RenderBufferAccess::READ)
-		};
-        list_->barriers(RT64::RenderBarrierStage::GRAPHICS, usage_barriers, uint32_t(std::size(usage_barriers)));
+        // Copy the vertex and index data into the mapped buffers.
+        uint32_t vert_size_bytes = num_vertices * sizeof(*vertices);
+        uint32_t index_size_bytes = num_indices * sizeof(*indices);
+        uint32_t vertex_buffer_offset = allocate_dynamic_data(vertex_buffer_, vert_size_bytes);
+        uint32_t index_buffer_offset = allocate_dynamic_data(index_buffer_, index_size_bytes);
+        memcpy(vertex_buffer_.mapped_data_ + vertex_buffer_offset, vertices, vert_size_bytes);
+        memcpy(index_buffer_.mapped_data_ + index_buffer_offset, indices, index_size_bytes);
 
         list_->setViewports(RT64::RenderViewport{ 0, 0, float(window_width_), float(window_height_) });
         if (scissor_enabled_) {
@@ -399,9 +369,9 @@ public:
             list_->setScissors(RT64::RenderRect{ 0, 0, window_width_, window_height_ });
         }
 
-        RT64::RenderIndexBufferView index_view{index_buffer_->at(0), index_size_bytes, RT64::RenderFormat::R32_UINT};
+        RT64::RenderIndexBufferView index_view{index_buffer_.buffer_->at(index_buffer_offset), index_size_bytes, RT64::RenderFormat::R32_UINT};
         list_->setIndexBuffer(&index_view);
-        RT64::RenderVertexBufferView vertex_view{vertex_buffer_->at(0), vert_size_bytes};
+        RT64::RenderVertexBufferView vertex_view{vertex_buffer_.buffer_->at(vertex_buffer_offset), vert_size_bytes};
         list_->setVertexBuffers(0, &vertex_view, 1, &vertex_slot_);
         list_->setGraphicsDescriptorSet(textures_.at(texture).set.get(), 1);
 
@@ -522,10 +492,10 @@ public:
             uint32_t uploaded_size_bytes = row_byte_width * source_dimensions.y;
 
             // Allocate room in the upload buffer for the uploaded data.
-            uint32_t upload_buffer_offset = allocate_upload_data_aligned(uploaded_size_bytes, 512);
+            uint32_t upload_buffer_offset = allocate_dynamic_data_aligned(upload_buffer_, uploaded_size_bytes, 512);
 
             // Copy the source data into the upload buffer.
-            uint8_t* dst_data = upload_buffer_mapped_data_ + upload_buffer_offset;
+            uint8_t* dst_data = upload_buffer_.mapped_data_ + upload_buffer_offset;
                 
             if (row_byte_padding == 0) {
                 // Copy row-by-row if the image is flipped.
@@ -557,7 +527,7 @@ public:
             // Copy the upload buffer into the texture.
             list_->copyTextureRegion(
                 RT64::RenderTextureCopyLocation::Subresource(texture.get()),
-                RT64::RenderTextureCopyLocation::PlacedFootprint(upload_buffer_.get(), RmlTextureFormat, source_dimensions.x, source_dimensions.y, 1, row_width, upload_buffer_offset));
+                RT64::RenderTextureCopyLocation::PlacedFootprint(upload_buffer_.buffer_.get(), RmlTextureFormat, source_dimensions.x, source_dimensions.y, 1, row_width, upload_buffer_offset));
             
             // Prepare the texture for being read from a pixel shader.
             list_->barriers(RT64::RenderBarrierStage::GRAPHICS, RT64::RenderTextureBarrier(texture.get(), RT64::RenderTextureLayout::SHADER_READ));
@@ -621,9 +591,10 @@ public:
         // Clear out any stale buffers from the last command list.
         stale_buffers_.clear();
 
-        // Reset and map the upload buffer.
-        upload_buffer_bytes_used_ = 0;
-        upload_buffer_mapped_data_ = reinterpret_cast<uint8_t*>(upload_buffer_->map());
+        // Reset buffers.
+        reset_dynamic_buffer(upload_buffer_);
+        reset_dynamic_buffer(vertex_buffer_);
+        reset_dynamic_buffer(index_buffer_);
 
         // Set an internal texture as the render target if MSAA is enabled.
         if (multisampling_.sampleCount > 1) {
@@ -661,13 +632,11 @@ public:
             list->drawInstanced(3, 1, 0, 0);
         }
 
-        list_ = nullptr;
+        end_dynamic_buffer(upload_buffer_);
+        end_dynamic_buffer(vertex_buffer_);
+        end_dynamic_buffer(index_buffer_);
 
-        // Unmap the upload buffer if it's mapped.
-        if (upload_buffer_mapped_data_) {
-            upload_buffer_->unmap();
-            upload_buffer_mapped_data_ = nullptr;
-        }
+        list_ = nullptr;
     }
 };