From ccef06ef7ba424ed2355fb484e7acaf821ea69ea Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 16 Feb 2021 17:40:27 -0500
Subject: [PATCH] 4.20.65

* Changed: Re-enable Smooth Scrolling, with a warning that it may not work well.
* Changed: Display the current FFZ version in the embed/popout player's menu.
* Fixed: Recreate more of Twitch's CSS, since they're using more and more dynamic, procedural class names.
---
 package.json                                  |   2 +-
 src/modules/metadata.jsx                      |   8 +-
 .../components/translation-ui.vue             |  30 +--
 src/modules/viewer_cards/card.vue             |   4 +-
 src/sites/player/index.jsx                    |  19 +-
 src/sites/player/metadata.jsx                 |   4 +-
 src/sites/player/player.jsx                   |   8 +-
 .../modules/chat/emote_menu.jsx               |   2 +-
 .../twitch-twilight/modules/chat/line.js      |   2 +-
 .../twitch-twilight/modules/chat/scroller.js  |  93 +++++++-
 .../modules/chat/settings_menu.jsx            |   2 +-
 .../twitch-twilight/modules/menu_button.jsx   |  10 +-
 src/sites/twitch-twilight/modules/player.jsx  |   8 +-
 styles/input/button.scss                      | 223 ++++++++++++++++++
 styles/input/index.scss                       |   5 +-
 15 files changed, 366 insertions(+), 54 deletions(-)
 create mode 100644 styles/input/button.scss

diff --git a/package.json b/package.json
index 5da0ac0b..0e4db3c2 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.64",
+  "version": "4.20.65",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {
diff --git a/src/modules/metadata.jsx b/src/modules/metadata.jsx
index 59e50d18..67be4957 100644
--- a/src/modules/metadata.jsx
+++ b/src/modules/metadata.jsx
@@ -227,7 +227,7 @@ export default class Metadata extends Module {
 						/>
 						{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
 							<button
-								class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+								class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 								aria-label={ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
 								onClick={copy}
 							>
@@ -648,7 +648,7 @@ export default class Metadata extends Module {
 							tip_content={null}
 						>
 							{btn = (<button
-								class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-core-button tw-core-button--padded tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
+								class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium ffz-core-button ffz-core-button--padded ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
 								data-tooltip-type="metadata"
 							>
 								<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1">
@@ -657,7 +657,7 @@ export default class Metadata extends Module {
 								</div>
 							</button>)}
 							{popup = (<button
-								class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
+								class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium ffz-core-button ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
 								data-tooltip-type="metadata"
 							>
 								<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center">
@@ -670,7 +670,7 @@ export default class Metadata extends Module {
 
 					} else
 						btn = popup = el = (<button
-							class={`ffz-stat tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative tw-pd-x-05 ffz-stat--fix-padding ${border ? 'tw-border tw-mg-r-1' : 'tw-font-size-5 tw-regular tw-mg-r-05 ffz-mg-l--05'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
+							class={`ffz-stat tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium ffz-core-button ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative tw-pd-x-05 ffz-stat--fix-padding ${border ? 'tw-border tw-mg-r-1' : 'tw-font-size-5 tw-regular tw-mg-r-05 ffz-mg-l--05'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
 							data-tooltip-type="metadata"
 							data-key={key}
 							tip_content={null}
diff --git a/src/modules/translation_ui/components/translation-ui.vue b/src/modules/translation_ui/components/translation-ui.vue
index bf006176..f8d6ece5 100644
--- a/src/modules/translation_ui/components/translation-ui.vue
+++ b/src/modules/translation_ui/components/translation-ui.vue
@@ -76,7 +76,7 @@
 		</header>
 		<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-column tw-overflow-hidden">
 			<header class="tw-border-b tw-pd-05 tw-c-background-base tw-flex tw-align-items-center">
-				<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
+				<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-left-dir" />
 					</span>
@@ -86,7 +86,7 @@
 				</button>
 				<button
 					v-if="! page_open"
-					class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive"
+					class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive"
 					@click="openPage"
 				>
 					{{ t('i18n.ui.pages', 'Page {current,number} of {total,number}', {
@@ -105,7 +105,7 @@
 					@keydown.enter="closePage"
 					@blur="closePage"
 				>
-				<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
+				<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-right-dir" />
 					</span>
@@ -115,8 +115,8 @@
 				</button>
 				<div class="tw-flex-grow-1" />
 				<button
-					class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
-					:class="[mode === 0 ? 'tw-core-button--primary' : 'tw-core-button--text']"
+					class="tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					:class="[mode === 0 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 0"
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
@@ -131,8 +131,8 @@
 				</button>
 				<button
 					v-if="existing != total"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
-					:class="[mode === 1 ? 'tw-core-button--primary' : 'tw-core-button--text']"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					:class="[mode === 1 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 1"
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
@@ -147,8 +147,8 @@
 				</button>
 				<button
 					v-if="added"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
-					:class="[mode === 2 ? 'tw-core-button--primary' : 'tw-core-button--text']"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					:class="[mode === 2 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 2"
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
@@ -163,8 +163,8 @@
 				</button>
 				<button
 					v-if="changed"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
-					:class="[mode === 3 ? 'tw-core-button--primary' : 'tw-core-button--text']"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					:class="[mode === 3 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 3"
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
@@ -179,8 +179,8 @@
 				</button>
 				<button
 					v-if="pending"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
-					:class="[mode === 4 ? 'tw-core-button--primary' : 'tw-core-button--text']"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					:class="[mode === 4 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 4"
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
@@ -195,8 +195,8 @@
 				</button>
 				<button
 					v-if="invalid"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
-					:class="[mode === 5 ? 'tw-core-button--primary' : 'tw-core-button--text']"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					:class="[mode === 5 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 5"
 				>
 					<div class="tw-align-items-center tw-flex tw-flex-grow-0">
diff --git a/src/modules/viewer_cards/card.vue b/src/modules/viewer_cards/card.vue
index 30b4bb1f..e3c6d2aa 100644
--- a/src/modules/viewer_cards/card.vue
+++ b/src/modules/viewer_cards/card.vue
@@ -75,7 +75,7 @@
 						<button
 							:data-title="t('viewer-card.close', 'Close')"
 							:aria-label="t('viewer-card.close', 'Close')"
-							class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
+							class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
 							@click="close"
 						>
 							<span class="tw-button-icon__icon">
@@ -86,7 +86,7 @@
 							v-if="! pinned"
 							:data-title="t('viewer-card.pin', 'Pin')"
 							:aria-label="t('viewer-card.pin', 'Pin')"
-							class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
+							class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
 							@click="pin"
 						>
 							<span class="tw-button-icon__icon">
diff --git a/src/sites/player/index.jsx b/src/sites/player/index.jsx
index 99d10d67..2a5eb1f9 100644
--- a/src/sites/player/index.jsx
+++ b/src/sites/player/index.jsx
@@ -117,7 +117,7 @@ export default class PlayerSite extends BaseSite {
 
 		const should_render = inst.state.activeMenu === 'settings-menu__main';
 
-		let lbl, cont = container.querySelector('.ffz--cc-button');
+		let lbl, btn, ver, cont = container.querySelector('.ffz--cc-button');
 		if ( ! cont ) {
 			if ( ! should_render )
 				return;
@@ -134,14 +134,15 @@ export default class PlayerSite extends BaseSite {
 			}
 
 			cont = (<div class="tw-mg-t-1 tw-border-t tw-pd-t-1 tw-full-width tw-relative ffz--cc-button">
-				<button
+				{btn = (<button
 					class="tw-block tw-border-radius-medium tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive"
 					onclick={handler}
 				>
 					<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
-						{lbl = <div class="tw-flex-grow-1" />}
+						{lbl = <div class="ffz--label tw-flex-grow-1 tw-ellipsis" />}
+						{ver = <div class="ffz--version tw-align-items-center tw-mg-l-05 tw-c-text-alt-2 tw-white-space-nowrap"></div>}
 					</div>
-				</button>
+				</button>)}
 			</div>);
 
 			container.appendChild(cont);
@@ -149,9 +150,13 @@ export default class PlayerSite extends BaseSite {
 		} else if ( ! should_render ) {
 			cont.remove();
 			return;
-		} else
-			lbl = cont.querySelector('button > div > div');
+		} else {
+			btn = cont.querySelector('button');
+			lbl = cont.querySelector('.ffz--label');
+			ver = cont.querySelector('.ffz--version');
+		}
 
-		lbl.textContent = this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center');
+		lbl.textContent = btn.title = this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center');
+		ver.textContent = this.resolve('core').constructor.version_info.toString();
 	}
 }
\ No newline at end of file
diff --git a/src/sites/player/metadata.jsx b/src/sites/player/metadata.jsx
index b23c5a89..1cf99636 100644
--- a/src/sites/player/metadata.jsx
+++ b/src/sites/player/metadata.jsx
@@ -433,7 +433,7 @@ export default class Metadata extends Module {
 							tip_content={null}
 						>
 							{btn = (<button
-								class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-core-button tw-core-button--padded tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
+								class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium ffz-core-button ffz-core-button--padded ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
 								data-tooltip-type="metadata"
 							>
 								<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1">
@@ -442,7 +442,7 @@ export default class Metadata extends Module {
 								</div>
 							</button>)}
 							{popup = (<button
-								class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
+								class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium ffz-core-button ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
 								data-tooltip-type="metadata"
 							>
 								<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center">
diff --git a/src/sites/player/player.jsx b/src/sites/player/player.jsx
index a284b8b6..3b6a6550 100644
--- a/src/sites/player/player.jsx
+++ b/src/sites/player/player.jsx
@@ -770,7 +770,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-comp-button"
 					onClick={this.compressPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@@ -1019,7 +1019,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-pip-button"
 					onClick={this.pipPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@@ -1122,7 +1122,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-reset-button"
 					onClick={rotateButton}
@@ -1190,7 +1190,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip__container tw-mg-1">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-reset-button"
 					onClick={rotateButton}
diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
index 1923aba2..be933170 100644
--- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
@@ -2143,7 +2143,7 @@ export default class EmoteMenu extends Module {
 											/>
 											{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
 												<button
-													class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon--primary tw-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' tw-core-button--primary' : ' tw-button-icon'}`}
+													class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon--primary ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' ffz-core-button--primary' : ' tw-button-icon'}`}
 													onClick={this.toggleVisibilityControl}
 												>
 													<span class="tw-button-icon__icon tw-mg-x-05">
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index cfab5c98..a50e8ddf 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -873,7 +873,7 @@ other {# messages were deleted by a moderator.}
 						e('div', {
 							className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1'
 						}, e('button', {
-							className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse',
+							className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse',
 							'data-test-selector': 'chat-reply-button',
 							'aria-label': title,
 							'data-title': title,
diff --git a/src/sites/twitch-twilight/modules/chat/scroller.js b/src/sites/twitch-twilight/modules/chat/scroller.js
index 19d27a26..6fe6fa0f 100644
--- a/src/sites/twitch-twilight/modules/chat/scroller.js
+++ b/src/sites/twitch-twilight/modules/chat/scroller.js
@@ -87,7 +87,7 @@ export default class Scroller extends Module {
 			ui: {
 				path: 'Chat > Behavior >> Scrolling',
 				title: 'Smooth Scrolling',
-				description: '**Note:** This setting has been disabled until such time as someone is able to fix major bugs with it.\n\nSmoothly slide new chat messages into view. Speed will increase as necessary to keep up with chat.',
+				description: '**Note:** This may not behave well depending on your browser. Disable this if you encounter issues.\n\nSmoothly slide new chat messages into view. Speed will increase as necessary to keep up with chat.',
 				component: 'setting-select-box',
 				data: [
 					{value: 0, title: 'Disabled'},
@@ -145,9 +145,8 @@ export default class Scroller extends Module {
 				inst.ffzMaybeUnpause();
 		});
 
-		this.smooth_scroll = 0; // this.chat.context.get('chat.scroller.smooth-scroll');
+		this.smooth_scroll = this.chat.context.get('chat.scroller.smooth-scroll');
 		this.chat.context.on('changed:chat.scroller.smooth-scroll', val => {
-			val = 0;
 			this.smooth_scroll = val;
 
 			for(const inst of this.ChatScroller.instances)
@@ -245,6 +244,26 @@ export default class Scroller extends Module {
 				t.on('tooltips:mousemove', this.ffzTooltipHover, this);
 				t.on('tooltips:leave', this.ffzTooltipLeave, this);
 
+				inst.scrollToBottom = function() {
+					if ( inst._ffz_scroll_request )
+						return;
+
+					inst._ffz_scroll_request = requestAnimationFrame(inst._scrollToBottom);
+				}
+
+				inst._scrollToBottom = function() {
+					inst._ffz_scroll_request = null;
+					//inst._ffz_snapshot = null;
+					if ( ! inst.state.isPaused ) {
+						if ( inst.ffz_smooth_scroll && ! inst._ffz_one_fast_scroll )
+							inst.ffzSmoothScroll();
+						else {
+							inst._ffz_one_fast_scroll = false;
+							inst.ffz_oldScroll();
+						}
+					}
+				}
+
 				inst.handleScrollEvent = function(event) {
 					if ( ! inst.scrollRef?.scrollContent )
 						return;
@@ -314,6 +333,70 @@ export default class Scroller extends Module {
 				t.emit('site:dom-update', 'chat-scroller', inst);
 			}
 
+			cls.prototype.ffzSmoothScroll = function() {
+				if ( this._ffz_smooth_animation )
+					cancelAnimationFrame(this._ffz_smooth_animation);
+
+				this.ffz_is_smooth_scrolling = true;
+
+				// Step setting value is # pixels to scroll per 10ms.
+				// 1 is pretty slow, 2 medium, 3 fast, 4 very fast.
+				let step = this.ffz_smooth_scroll,
+					old_time = performance.now();
+
+				const scroll_content = this.scrollRef?.scrollContent;
+				if ( ! scroll_content )
+					return;
+
+				const target_top = scroll_content.scrollHeight - scroll_content.clientHeight,
+					difference = target_top - scroll_content.scrollTop;
+
+				// If we are falling behind speed us up
+				if ( difference > scroll_content.clientHeight ) {
+					// we are a full scroll away, just jump there
+					step = difference;
+
+				} else if ( difference > 200 ) {
+					// we are starting to fall behind, speed it up a bit
+					step += step * Math.floor(difference / 200);
+				}
+
+				const smoothAnimation = () => {
+					if ( this.state.isPaused || ! this.state.isAutoScrolling )
+						return this.ffz_is_smooth_scrolling = false;
+
+					// See how much time has passed to get a step based off the delta
+					const current_time = performance.now(),
+						delta = current_time - old_time,
+						current_step = step * (delta / 10);
+
+					// we need to move at least one full pixel for scrollTop to do anything in this delta.
+					if ( current_step >= 1 ) {
+						const scroll_top = scroll_content.scrollTop,
+							next_top = scroll_top + current_step,
+							target_top = scroll_content.scrollHeight - scroll_content.clientHeight;
+
+						old_time = current_time;
+						if ( next_top < target_top ) {
+							scroll_content.scrollTop = scroll_top + current_step;
+							this._ffz_smooth_animation = requestAnimationFrame(smoothAnimation);
+
+						} else {
+							// We've reached the bottom.
+							scroll_content.scrollTop = target_top;
+							this.ffz_is_smooth_scrolling = false;
+						}
+
+					} else {
+						// The frame happened so quick since last update that we haven't moved a full pixel.
+						// Just wait.
+						this._ffz_smooth_animation = requestAnimationFrame(smoothAnimation);
+					}
+				}
+
+				smoothAnimation();
+			}
+
 			cls.prototype.ffzSetSmoothScroll = function(value) {
 				this.ffz_smooth_scroll = value;
 				this.ffzMaybeUnpause();
@@ -566,11 +649,11 @@ export default class Scroller extends Module {
 				}, createElement('div', {
 					className: 'tw-absolute tw-border-radius-medium tw-bottom-0 tw-c-background-overlay tw-c-text-overlay tw-mg-b-1'
 				}, createElement('button', {
-					className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--overlay tw-core-button--text tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative',
+					className: 'tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium ffz-core-button ffz-core-button--overlay ffz-core-button--text tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative',
 					'data-a-target': 'chat-list-footer',
 					onClick: this.ffzFastResume
 				}, createElement('div', {
-					className: 'tw-align-items-center tw-core-button-label tw-flex tw-flex-grow-0'
+					className: 'tw-align-items-center ffz-core-button-label tw-flex tw-flex-grow-0'
 				}, createElement('div', {
 					className: 'tw-flex-grow-0'
 				}, msg)))));
diff --git a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
index da2c893b..d2581d83 100644
--- a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
@@ -116,7 +116,7 @@ export default class SettingsMenu extends Module {
 									<div class="chat-settings__header tw-align-items-center tw-c-background-base tw-flex tw-pd-x-1 tw-relative">
 										<div class="chat-settings__back-icon-container tw-left-0 tw-mg-r-05">
 											<button
-												class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+												class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 												data-test-selector="chat-settings-back-button"
 												aria-label={t.i18n.t('chat.settings.back', 'Back')}
 												onClick={this.ffzPauseClick}
diff --git a/src/sites/twitch-twilight/modules/menu_button.jsx b/src/sites/twitch-twilight/modules/menu_button.jsx
index f78e034c..20b8e25d 100644
--- a/src/sites/twitch-twilight/modules/menu_button.jsx
+++ b/src/sites/twitch-twilight/modules/menu_button.jsx
@@ -320,7 +320,7 @@ export default class MenuButton extends SiteModule {
 		>
 			<div class="tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.loading ? ' loading' : ''}`}
+					class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.loading ? ' loading' : ''}`}
 					onClick={e => this.handleClick(e, btn)} // eslint-disable-line react/jsx-no-bind
 					onContextMenu={e => this.renderContext(e, btn)} // eslint-disable-line react/jsx-no-bind
 				>
@@ -465,7 +465,7 @@ export default class MenuButton extends SiteModule {
 
 		for(const profile of this.settings.__profiles) {
 			const toggle = (<button
-				class="tw-flex-shrink-0 tw-mg-r-1 tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-relative ffz-tooltip ffz-tooltip--no-mouse"
+				class="tw-flex-shrink-0 tw-mg-r-1 tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-relative ffz-tooltip ffz-tooltip--no-mouse"
 				data-title={this.renderButtonTip(profile)}
 				onClick={e => {  // eslint-disable-line react/jsx-no-bind
 					profile.toggled = ! profile.toggled;
@@ -506,7 +506,7 @@ export default class MenuButton extends SiteModule {
 						<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left">
 							<div class="tw-inline-flex tw-relative tw-tooltip__container">
 								<button
-									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
+									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
 									onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind
 								>
 									<span class="tw-button-icon__icon">
@@ -526,7 +526,7 @@ export default class MenuButton extends SiteModule {
 						<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
 							<div class="tw-inline-flex tw-relative tw-tooltip__container">
 								<button
-									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
+									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
 									onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind
 								>
 									<span class="tw-button-icon__icon">
@@ -540,7 +540,7 @@ export default class MenuButton extends SiteModule {
 						</div>
 						<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
 							<button
-								class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+								class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 								onClick={destroy} // eslint-disable-line react/jsx-no-bind
 							>
 								<span class="tw-button-icon__icon">
diff --git a/src/sites/twitch-twilight/modules/player.jsx b/src/sites/twitch-twilight/modules/player.jsx
index 8276ef2e..7de51812 100644
--- a/src/sites/twitch-twilight/modules/player.jsx
+++ b/src/sites/twitch-twilight/modules/player.jsx
@@ -1079,7 +1079,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-comp-button"
 					onClick={this.compressPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@@ -1329,7 +1329,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-pip-button"
 					onClick={this.pipPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@@ -1432,7 +1432,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-reset-button"
 					onClick={rotateButton}
@@ -1500,7 +1500,7 @@ export default class Player extends Module {
 		if ( ! cont ) {
 			cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip__container tw-mg-1">
 				{btn = (<button
-					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
 					data-a-target="ffz-player-reset-button"
 					onClick={rotateButton}
diff --git a/styles/input/button.scss b/styles/input/button.scss
new file mode 100644
index 00000000..8c565676
--- /dev/null
+++ b/styles/input/button.scss
@@ -0,0 +1,223 @@
+.ffz-core-button {
+    font-size: var(--button-text-default);
+    font-weight: 600;
+    height: var(--button-size-default);
+    user-select: none;
+	white-space: nowrap;
+
+	&, &:hover {
+		text-decoration: none;
+	}
+
+	&--small {
+		font-size: var(--button-text-small);
+		height: var(--button-size-small);
+	}
+
+	&--large {
+		font-size: var(--button-text-large);
+		height: var(--button-size-large);
+	}
+
+	&--disabled {
+		opacity: 0.5;
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+
+	&--primary {
+		background-color: var(--color-background-button-primary-default);
+		color: var(--color-text-button-primary);
+
+		&[data-focus-visible-added],
+		.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-button-primary-hover);
+			color: var(--color-text-button-primary);
+		}
+
+		&[data-focus-visible-added] {
+			box-shadow: var(--shadow-button-focus);
+		}
+
+		&:active:not(.ffz-core-button--disabled),
+		&:hover:active:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-button-primary-active);
+			color: var(--color-text-button-primary);
+		}
+
+		&.ffz-core-button--disabled {
+			background-color: var(--color-background-button-disabled);
+			color: var(--color-text-button-disabled);
+		}
+
+		&.ffz-core-button--overlay {
+			background-color: var(--color-background-button-overlay-primary-default);
+			color: var(--color-text-button-overlay-primary);
+
+			&[data-focus-visible-added],
+			.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+				background-color: var(--color-background-button-overlay-primary-hover);
+				color: var(--color-text-button-overlay-primary);
+			}
+
+			&[data-focus-visible-added] {
+				box-shadow: var(--shadow-button-overlay-focus);
+			}
+
+			&:active:not(.ffz-core-button--disabled),
+			&:hover:active:not(.ffz-core-button--disabled) {
+				background-color: var(--color-background-button-overlay-primary-active);
+				box-shadow: var(--shadow-button-overlay-active);
+				color: var(--color-text-button-overlay-primary);
+			}
+		}
+	}
+
+	&--secondary {
+		background-color: var(--color-background-button-secondary-default);
+		color: var(--color-text-button-secondary);
+
+		&[data-focus-visible-added],
+		.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-button-secondary-hover);
+			color: var(--color-text-button-secondary);
+		}
+
+		&[data-focus-visible-added] {
+			box-shadow: var(--shadow-button-focus);
+		}
+
+		&:active:not(.ffz-core-button--disabled),
+		&:hover:active:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-button-secondary-active);
+			color: var(--color-text-button-secondary);
+		}
+
+		&.ffz-core-button--disabled {
+			background-color: var(--color-background-button-disabled);
+			color: var(--color-text-button-disabled);
+		}
+
+		&.ffz-core-button--overlay {
+			background-color: var(--color-background-button-overlay-secondary-default);
+			color: var(--color-text-button-overlay-secondary);
+
+			&[data-focus-visible-added],
+			.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+				background-color: var(--color-background-button-overlay-secondary-hover);
+				color: var(--color-text-button-overlay-secondary);
+			}
+
+			&[data-focus-visible-added] {
+				box-shadow: var(--shadow-button-overlay-focus);
+			}
+
+			&:active:not(.ffz-core-button--disabled),
+			&:hover:active:not(.ffz-core-button--disabled) {
+				background-color: var(--color-background-button-overlay-secondary-active);
+				box-shadow: var(--shadow-button-overlay-active);
+				color: var(--color-text-button-overlay-secondary);
+			}
+		}
+	}
+
+	&--text {
+		background-color: var(--color-background-button-text-default);
+		color: var(--color-text-button-text);
+
+		&[data-focus-visible-added],
+		.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-button-text-hover);
+			color: var(--color-text-button-text);
+		}
+
+		&[data-focus-visible-added] {
+			box-shadow: var(--shadow-button-focus);
+		}
+
+		&:active:not(.ffz-core-button--disabled),
+		&:hover:active:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-button-text-active);
+			box-shadow: var(--shadow-button-active);
+			color: var(--color-text-button-text);
+		}
+
+		&.ffz-core-button--disabled {
+			background-color: var(--color-background-button-disabled);
+			color: var(--color-text-button-disabled);
+		}
+
+		&.ffz-core-button--overlay {
+			background-color: var(--color-background-button-overlay-text-default);
+			color: var(--color-text-button-overlay-text);
+
+			&[data-focus-visible-added],
+			.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+				background-color: var(--color-background-button-overlay-text-hover);
+				color: var(--color-text-button-overlay-text);
+			}
+
+			&[data-focus-visible-added] {
+				box-shadow: var(--shadow-button-overlay-focus);
+			}
+
+			&:active:not(.ffz-core-button--disabled),
+			&:hover:active:not(.ffz-core-button--disabled) {
+				background-color: var(--color-background-button-overlay-text-active);
+				box-shadow: var(--shadow-button-overlay-active);
+				color: var(--color-text-button-overlay-text);
+			}
+		}
+	}
+
+	&--destructive {
+		background-color: var(--color-background-button-destructive-default);
+		color: var(--color-text-button-destructive);
+
+		&[data-focus-visible-added],
+		.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-interactable-destructive-hover);
+			color: var(--color-text-button-destructive);
+		}
+
+		&[data-focus-visible-added] {
+			box-shadow: var(--shadow-button-focus);
+		}
+
+		&:active:not(.ffz-core-button--disabled),
+		&:hover:active:not(.ffz-core-button--disabled) {
+			background-color: var(--color-background-interactable-destructive-active);
+			box-shadow: var(--shadow-button-active);
+			color: var(--color-text-button-destructive)
+		}
+
+		&.ffz-core-button--disabled {
+			background-color: var(--color-background-button-disabled);
+			color: var(--color-text-button-disabled);
+		}
+
+		&.ffz-core-button--overlay.ffz-core-button--disabled {
+			background-color: var(--color-background-button-overlay-primary-default);
+			color: var(--color-text-button-overlay-primary);
+		}
+	}
+
+
+	&-label {
+		padding: 0 var(--button-padding-x);
+	}
+
+	&-label--icon {
+		padding-left: calc(var(--button-padding-x) - .2rem);
+	}
+
+	&-label--dropdown {
+		padding-right: calc(var(--button-padding-x) - .2rem);
+	}
+
+	&-icon { width: 2rem }
+	&-icon--small { width: 1.6rem }
+	&-icon--large { width: 2.4rem }
+}
\ No newline at end of file
diff --git a/styles/input/index.scss b/styles/input/index.scss
index d5ea432a..0835baec 100644
--- a/styles/input/index.scss
+++ b/styles/input/index.scss
@@ -1,3 +1,4 @@
+@import "button";
 @import "checkbox";
-@import "text";
-@import "interactable";
\ No newline at end of file
+@import "interactable";
+@import "text";
\ No newline at end of file