1 files changed, 51 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/components/btn-states.scss b/apps/web-shared/src/styles/components/btn-states.scss
new file mode 100644
index 0000000..a2fc6c5
--- /dev/null
+++ b/apps/web-shared/src/styles/components/btn-states.scss
@@ -0,0 +1,51 @@
+@use '../base' as *;
+
+/* -------------------------------- 
+
+File#: _1_btn-states
+Title: Buttons states
+Descr: Multi-state button elements
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.btn__content-a {
+  display: inline-flex;
+}
+
+.btn__content-b {
+  display: none;
+}
+
+.btn__content-a, .btn__content-b {
+  align-items: center;
+}
+
+.btn--state-b {
+  .btn__content-a {
+    display: none;
+  }
+
+  .btn__content-b {
+    display: inline-block; // fallback
+    display: inline-flex;
+  }
+}
+
+/* preserve button width when switching from state A to state B */
+.btn--preserve-width {
+  .btn__content-b {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+  }
+
+  &.btn--state-b .btn__content-a {
+    display: inline-block; // fallback
+    display: inline-flex;
+    visibility: hidden;
+  }
+}