From b55af64326a2f5aedc3a4515d272c371ca14b3e1 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Mon, 12 Feb 2024 15:57:21 +0100
Subject: [PATCH] File restored

---
 .../css/src/components/button/button.scss     | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index c516f8400e..0e7d457433 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -8,12 +8,59 @@
 }
 
 .amsterdam-button {
+  border: none;
+  cursor: var(--amsterdam-action-activate-cursor);
+  display: inline-flex;
+  font-family: var(--amsterdam-button-font-family);
   font-size: var(--amsterdam-button-font-size);
+  gap: var(--amsterdam-button-gap);
   line-height: var(--amsterdam-button-line-height);
+  outline-offset: var(--amsterdam-button-outline-offset);
+  padding-block: var(--amsterdam-button-padding-block-start) var(--amsterdam-button-padding-block-end);
+  padding-inline: var(--amsterdam-button-padding-inline-start) var(--amsterdam-button-padding-inline-end);
+  touch-action: manipulation;
+
+  &:hover {
+    cursor: var(--amsterdam-action-activate-cursor);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: var(--amsterdam-action-disabled-cursor);
+  }
 
   @include reset;
 }
 
+@mixin amsterdam-button-forced-color-mode {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
+  }
+}
+
+.amsterdam-button--busy:hover {
+  cursor: var(--amsterdam-action-busy-cursor);
+}
+
+.amsterdam-button--primary {
+  background-color: var(--amsterdam-button-primary-background-color);
+  box-shadow: var(--amsterdam-button-primary-box-shadow);
+  color: var(--amsterdam-button-primary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-primary-disabled-background-color);
+    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--amsterdam-button-primary-hover-background-color);
+    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+  }
+
+  @include amsterdam-button-forced-color-mode;
+}
+
 .amsterdam-button--secondary {
   background-color: var(--amsterdam-button-secondary-background-color);
   box-shadow: var(--amsterdam-button-secondary-box-shadow);