@orangesk/orange-design-system 2.0.0-beta.41 → 2.0.0-beta.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.41",
+  "version": "2.0.0-beta.42",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -55,7 +55,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.2",
+    "@next/mdx": "16.2.3",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -63,19 +63,19 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.3.3",
-    "html-react-parser": "^5.2.17",
+    "dompurify": "^3.4.0",
+    "html-react-parser": "6.0.1",
     "lorem-ipsum": "^2.0.8",
     "minisearch": "7.2.0",
-    "next": "16.2.2",
+    "next": "16.2.3",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
     "query-string": "^9.3.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-element-to-jsx-string": "^17.0.1",
-    "react-is": "^19.2.4",
+    "react-is": "^19.2.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
@@ -104,35 +104,35 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.5.0",
+    "@types/node": "25.6.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/browser-playwright": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/ui": "^4.1.2",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "@vitest/ui": "^4.1.4",
     "canvas": "^3.2.3",
     "fs-extra": "^11.3.4",
     "glob": "13.0.6",
-    "html-validate": "10.11.2",
+    "html-validate": "10.12.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "lint-staged": "16.4.0",
-    "playwright": "^1.59.0",
-    "prettier": "^3.8.1",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.2",
     "rollup": "^4.60.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.98.0",
+    "sass": "^1.99.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.2",
-    "vitest": "^4.1.2",
+    "vitest": "^4.1.4",
     "vitest-axe": "^0.1.0",
-    "vitest-browser-react": "^2.1.0"
+    "vitest-browser-react": "^2.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css}": "biome check --write --no-errors-on-unmatched",

package/src/assets/icons/youtube.svg

@@ -1 +1,3 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z" /></svg>
+<svg viewBox="0 0 80 80" id="youtube">
+  <path xmlns="http://www.w3.org/2000/svg" d="M63.275 30.05S62.8 26.625 61.4 25.1c-1.825-1.975-3.85-2-4.75-2.1-6.7-.5-16.65-.5-16.65-.5s-10 0-16.625.5c-.925.125-2.95.125-4.75 2.1-1.425 1.5-1.9 4.95-1.9 4.95s-.475 4.025-.475 8.05v3.775c0 4.025.475 8.05.475 8.05s.475 3.425 1.875 4.95c1.825 2 4.2 1.925 5.25 2.125 3.8.375 16.15.5 16.15.5s10 0 16.625-.5c.925-.15 2.95-.15 4.75-2.125 1.425-1.5 1.9-4.95 1.9-4.95s.475-4 .475-8.05v-3.75c0-4.05-.475-8.075-.475-8.075ZM36.25 47.5v-15l12.5 7.525-12.5 7.475Z"></path>
+</svg>

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -4,6 +4,8 @@ export default class AnchorNavigation {
   private static readonly DRAG_START_THRESHOLD = 6;
   private static readonly SCROLL_END_DEBOUNCE_MS = 150;
   private static readonly SCROLL_EDGE_TOLERANCE = 1;
+  private static readonly SCROLL_ALIGNMENT_TOLERANCE = 1;
+  private static readonly MAX_SCROLL_CORRECTIONS = 2;
 
   private element: HTMLElement;
   private contentLeftElement: HTMLElement | null;
@@ -34,6 +36,9 @@ export default class AnchorNavigation {
   private sections: HTMLElement[] = [];
   private currentPath: string;
   private lastActiveIndex: number = 0;
+  private autoScrollTargetId: string | null = null;
+  private autoScrollCorrectionCount: number = 0;
+  private lastStickyOffset: number = 0;
 
   constructor(element: HTMLElement) {
     this.element = element;
@@ -78,13 +83,35 @@ export default class AnchorNavigation {
 
   private updateStickyPosition(): void {
     if (!this.megamenuElement) return;
-    this.element.style.top = `${this.megamenuElement.offsetHeight}px`;
+
+    const stickyOffset = this.megamenuElement.offsetHeight;
+    const hasStickyOffsetChanged = stickyOffset !== this.lastStickyOffset;
+
+    this.lastStickyOffset = stickyOffset;
+    this.element.style.top = `${stickyOffset}px`;
+
+    if (
+      !hasStickyOffsetChanged ||
+      !this.isAutoScrolling ||
+      !this.autoScrollTargetId ||
+      this.autoScrollCorrectionCount >= AnchorNavigation.MAX_SCROLL_CORRECTIONS
+    ) {
+      return;
+    }
+
+    const targetElement = document.getElementById(this.autoScrollTargetId);
+    if (!targetElement) return;
+
+    // Re-target smoothly as soon as sticky offset changes to avoid a visible snap at scroll end.
+    this.autoScrollCorrectionCount += 1;
+    this.scrollToSection(targetElement, "smooth");
   }
 
   private setupMegamenuObserver(): void {
     this.megamenuElement = this.findMegamenuElement();
 
     if (!this.megamenuElement) {
+      this.lastStickyOffset = 0;
       this.element.style.top = "0px";
       return;
     }
@@ -132,6 +159,7 @@ export default class AnchorNavigation {
     window.addEventListener("resize", this.resizeHandler);
 
     this.initScrollSpy();
+    this.alignInitialHashIfNeeded();
   }
 
   private teardownScrollSpyListeners(): void {
@@ -190,27 +218,108 @@ export default class AnchorNavigation {
     const targetElement = document.getElementById(targetId);
     if (!targetElement) return;
 
-    this.isAutoScrolling = true;
+    this.startAutoScroll(targetId);
     anchor.blur();
 
+    this.scrollToSection(targetElement, "smooth");
+
+    const nextUrl = `${window.location.pathname}${window.location.search}#${targetId}`;
+    window.history.pushState(null, "", nextUrl);
+    this.initScrollSpy(targetId);
+  }
+
+  private getHashSectionId(): string | null {
+    const hash = window.location.hash;
+    if (!hash || hash.length <= 1) return null;
+
+    let hashId = hash.slice(1);
+    try {
+      hashId = decodeURIComponent(hashId);
+    } catch {
+      // Keep raw hash when decoding fails.
+    }
+
+    return hashId || null;
+  }
+
+  private startAutoScroll(sectionId: string): void {
+    this.isAutoScrolling = true;
+    this.autoScrollTargetId = sectionId;
+    this.autoScrollCorrectionCount = 0;
+  }
+
+  private resetAutoScrollState(): void {
+    this.isAutoScrolling = false;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
+  }
+
+  private tryCorrectAutoScrollAlignment(): boolean {
+    if (!this.autoScrollTargetId) return true;
+
+    const targetElement = document.getElementById(this.autoScrollTargetId);
+    if (!targetElement) return true;
+
+    const targetTop = this.getTargetTop(targetElement);
+    const distance = Math.abs(window.scrollY - targetTop);
+    if (distance <= AnchorNavigation.SCROLL_ALIGNMENT_TOLERANCE) {
+      return true;
+    }
+
+    if (
+      this.autoScrollCorrectionCount >= AnchorNavigation.MAX_SCROLL_CORRECTIONS
+    ) {
+      return true;
+    }
+
+    this.autoScrollCorrectionCount += 1;
+    const correctionBehavior: ScrollBehavior =
+      this.autoScrollCorrectionCount === 1 ? "smooth" : "auto";
+    this.scrollToSection(targetElement, correctionBehavior);
+    return false;
+  }
+
+  private getTotalStickyOffset(): number {
     const scrollOffset = this.megamenuElement
       ? this.megamenuElement.offsetHeight
       : 0;
-    const additionalOffset = this.element.offsetHeight;
+    const anchorNavOffset = this.element.offsetHeight;
+    return scrollOffset + anchorNavOffset;
+  }
+
+  private getTargetTop(targetElement: HTMLElement): number {
     const targetTop =
       targetElement.getBoundingClientRect().top +
       window.scrollY -
-      scrollOffset -
-      additionalOffset;
+      this.getTotalStickyOffset();
+    return Math.max(0, targetTop);
+  }
 
+  private scrollToSection(
+    targetElement: HTMLElement,
+    behavior: ScrollBehavior,
+  ): void {
     window.scrollTo({
-      top: Math.max(0, targetTop),
-      behavior: "smooth",
+      top: this.getTargetTop(targetElement),
+      behavior,
     });
+  }
 
-    const nextUrl = `${window.location.pathname}${window.location.search}#${targetId}`;
-    window.history.pushState(null, "", nextUrl);
-    this.initScrollSpy(targetId);
+  private alignInitialHashIfNeeded(): void {
+    const hashId = this.getHashSectionId();
+    if (!hashId) return;
+
+    const targetElement = document.getElementById(hashId);
+    if (!targetElement) return;
+
+    this.startAutoScroll(hashId);
+
+    requestAnimationFrame(() => {
+      this.scrollToSection(targetElement, "auto");
+      requestAnimationFrame(() => {
+        this.handleScrollEnd();
+      });
+    });
   }
 
   private initScrollSpy(forcedSectionId: string | null = null): void {
@@ -323,37 +432,15 @@ export default class AnchorNavigation {
       0,
       contentLeft.scrollWidth - contentLeft.clientWidth,
     );
-    const navLinks = this.navLinks;
-    let firstNavLink: HTMLAnchorElement | null = null;
-    let lastNavLink: HTMLAnchorElement | null = null;
-
-    if (navLinks && navLinks.length > 0) {
-      firstNavLink = navLinks[0];
-      lastNavLink = navLinks[navLinks.length - 1];
-    }
-
-    const isFirstItem = activeLink === firstNavLink;
-    const isLastItem = activeLink === lastNavLink;
-
-    let targetScrollLeft: number | null = null;
-    if (isFirstItem) {
-      targetScrollLeft = 0;
-    } else if (isLastItem) {
-      targetScrollLeft = maxScrollLeft;
-    }
-
-    const itemLeft = activeLink.offsetLeft;
-    const itemRight = itemLeft + activeLink.clientWidth;
-    const viewportLeft = contentLeft.scrollLeft;
-    const viewportRight = viewportLeft + contentLeft.clientWidth;
-    const isVisible = itemLeft >= viewportLeft && itemRight <= viewportRight;
-
-    if (targetScrollLeft === null && !forceCenter && isVisible) return;
-
-    if (targetScrollLeft === null) {
-      targetScrollLeft =
-        itemLeft - contentLeft.clientWidth / 2 + activeLink.clientWidth / 2;
-    }
+    const contentRect = contentLeft.getBoundingClientRect();
+    const itemRect = activeLink.getBoundingClientRect();
+    const itemCenterWithinContent =
+      itemRect.left -
+      contentRect.left +
+      contentLeft.scrollLeft +
+      itemRect.width / 2;
+    const targetScrollLeft =
+      itemCenterWithinContent - contentLeft.clientWidth / 2;
 
     const behavior = window.innerWidth < 768 ? "auto" : "smooth";
     const nextScrollLeft = Math.min(
@@ -361,6 +448,11 @@ export default class AnchorNavigation {
       Math.max(0, targetScrollLeft),
     );
 
+    const isAlreadyAligned =
+      Math.abs(contentLeft.scrollLeft - nextScrollLeft) <=
+      AnchorNavigation.SCROLL_ALIGNMENT_TOLERANCE;
+    if (!forceCenter && isAlreadyAligned) return;
+
     if (typeof contentLeft.scrollTo === "function") {
       contentLeft.scrollTo({
         left: nextScrollLeft,
@@ -573,9 +665,7 @@ export default class AnchorNavigation {
 
       // Set a timeout to detect when scrolling has ended
       this.scrollTimeout = setTimeout(() => {
-        this.isAutoScrolling = false;
-        this.scrollTimeout = null;
-        this.initScrollSpy();
+        this.handleScrollEnd();
       }, AnchorNavigation.SCROLL_END_DEBOUNCE_MS);
     } else {
       this.initScrollSpy();
@@ -587,7 +677,12 @@ export default class AnchorNavigation {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = null;
     }
-    this.isAutoScrolling = false;
+
+    if (!this.tryCorrectAutoScrollAlignment()) {
+      return;
+    }
+
+    this.resetAutoScrollState();
     this.initScrollSpy();
   }
 
@@ -614,9 +709,12 @@ export default class AnchorNavigation {
 
     this.element.style.top = "";
     this.megamenuElement = null;
+    this.lastStickyOffset = 0;
     this.navLinks = null;
     this.sections = [];
     this.lastActiveIndex = 0;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
     (this.element as any).ODS_AnchorNavigation = null;
   }
 
@@ -636,9 +734,12 @@ export default class AnchorNavigation {
     }
 
     this.megamenuElement = null;
+    this.lastStickyOffset = 0;
     this.navLinks = null;
     this.sections = [];
     this.lastActiveIndex = 0;
+    this.autoScrollTargetId = null;
+    this.autoScrollCorrectionCount = 0;
 
     this.init();
   }

package/src/components/AnchorNavigation/styles/mixins.scss

@@ -48,15 +48,23 @@
     padding: convert.to-rem(15px) 0 !important;
   }
 
-  &:hover,
   &:focus-visible,
-  &:active,
   &.is-active {
     box-shadow: megamenuConfig.$active-line;
     color: inherit;
     text-decoration: none !important;
     outline: none;
   }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:active {
+      box-shadow: megamenuConfig.$active-line;
+      color: inherit;
+      text-decoration: none !important;
+      outline: none;
+    }
+  }
 }
 
 @mixin anchor-navigation-content() {

package/src/components/AnchorNavigation/tests/AnchorNavigation.unit.test.jsx

@@ -362,13 +362,33 @@ describe("rendering AnchorNavigation", () => {
         value: 0,
         writable: true,
       });
-      Object.defineProperty(activeLink, "offsetLeft", {
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
         configurable: true,
-        value: 220,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 180,
+          width: 180,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
-      Object.defineProperty(activeLink, "clientWidth", {
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
         configurable: true,
-        value: 80,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 220,
+          right: 300,
+          width: 80,
+          height: 0,
+          x: 220,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
       contentLeft.scrollTo = scrollToSpy;
 
@@ -412,13 +432,33 @@ describe("rendering AnchorNavigation", () => {
         value: 180,
         writable: true,
       });
-      Object.defineProperty(activeLink, "offsetLeft", {
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
         configurable: true,
-        value: 220,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
-      Object.defineProperty(activeLink, "clientWidth", {
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
         configurable: true,
-        value: 80,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
       });
       contentLeft.scrollTo = scrollToSpy;
 
@@ -433,6 +473,71 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("centers scroll-spy active item even when it is already visible", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const contentLeft = container.querySelector(
+        ".anchor-navigation__content-left",
+      );
+      const activeLink = container.querySelector('a[href="#pricing"]');
+      const scrollToSpy = vi.fn();
+
+      Object.defineProperty(contentLeft, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
+      Object.defineProperty(contentLeft, "scrollLeft", {
+        configurable: true,
+        value: 180,
+        writable: true,
+      });
+      Object.defineProperty(contentLeft, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      Object.defineProperty(activeLink, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      contentLeft.scrollTo = scrollToSpy;
+
+      anchorNavigation.scrollActiveLinkIntoView(contentLeft, activeLink, false);
+
+      expect(scrollToSpy).toHaveBeenCalledWith({
+        left: 160,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+    });
+
     it("does not duplicate anchor click handling after update", () => {
       const section = document.createElement("section");
       section.id = "features";
@@ -498,6 +603,87 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("realigns anchor after sticky offset changes during smooth scroll", () => {
+      vi.useFakeTimers();
+
+      const section = document.createElement("section");
+      section.id = "pricing";
+      Object.defineProperty(section, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 600 - window.scrollY,
+          bottom: 700 - window.scrollY,
+          left: 0,
+          right: 0,
+          width: 0,
+          height: 100,
+          x: 0,
+          y: 600,
+          toJSON: () => ({}),
+        }),
+      });
+      document.body.appendChild(section);
+
+      const megamenu = document.createElement("div");
+      megamenu.setAttribute("data-megamenu", "");
+      let megamenuHeight = 120;
+      Object.defineProperty(megamenu, "offsetHeight", {
+        configurable: true,
+        get: () => megamenuHeight,
+      });
+      document.body.appendChild(megamenu);
+
+      Object.defineProperty(window, "scrollY", {
+        configurable: true,
+        value: 0,
+        writable: true,
+      });
+
+      const scrollToSpy = vi
+        .spyOn(window, "scrollTo")
+        .mockImplementation((options) => {
+          if (typeof options === "object" && typeof options.top === "number") {
+            window.scrollY = options.top;
+          }
+        });
+
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const pricingLink = container.querySelector('a[href="#pricing"]');
+
+      Object.defineProperty(anchorNavigationElement, "offsetHeight", {
+        configurable: true,
+        value: 50,
+      });
+
+      fireEvent.click(pricingLink);
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(1, {
+        top: 430,
+        behavior: "smooth",
+      });
+
+      megamenuHeight = 80;
+      fireEvent.scroll(window);
+      vi.advanceTimersByTime(
+        AnchorNavigationStatic.SCROLL_END_DEBOUNCE_MS + 20,
+      );
+
+      expect(scrollToSpy).toHaveBeenNthCalledWith(2, {
+        top: 470,
+        behavior: "smooth",
+      });
+
+      anchorNavigation?.destroy();
+      scrollToSpy.mockRestore();
+      megamenu.remove();
+      section.remove();
+      vi.useRealTimers();
+    });
+
     it("toggles left and right overflow classes based on scroll position", () => {
       const { container } = render(<AnchorNavigation items={moreItems} />);
       const anchorNavigationElement = initializeAnchorNavigation(container);

package/src/components/Buttons/styles/mixins.scss

@@ -9,31 +9,26 @@
 ) {
   display: flex;
   flex-flow: row wrap;
-  max-width: calc(100% - #{$spacing});
-  margin: ($spacing * -1) ($spacing * -1) space.get("large") 0;
+  gap: $spacing;
+  margin: 0 0 space.get("large") 0;
 
   #{$button-selector},
-  #{$button-selector}:last-child,
   #{$link-selector},
-  #{$link-selector}:last-child,
-  button#{$link-selector},
-  button#{$link-selector}:last-child {
-    margin: $spacing $spacing 0 0;
+  button#{$link-selector} {
+    margin: 0;
   }
 }
 
 @mixin stack-on-xs($spacing: config.$spacing, $button-selector: ".btn") {
   @include breakpoint.get("xs", "down") {
     flex-flow: column;
+    gap: $spacing;
     max-width: 100%;
     margin: 0 0 $spacing 0;
 
-    #{$button-selector}:not(:last-child),
-    #{$button-selector}:last-child,
-    button.link:not(:last-child),
-    button.link:last-child {
-      margin-right: 0;
-      margin-bottom: 0;
+    #{$button-selector},
+    button.link {
+      margin: 0;
     }
   }
 }