From a91d8614151c31e745b3a6dd5f7e2a5f01ba1f0a Mon Sep 17 00:00:00 2001
From: Matt Fannin <hello@mattfannin.nz>
Date: Wed, 12 Jun 2024 22:41:40 +1200
Subject: [PATCH] Fix the proportions of icon only is-rounded buttons to be
 perfect circles

Currently, creating a button with only a single icon inside it results in
a perfect square icon button, but doing the same with the is-rounded modifer
doesn't result in a perfect circle because extra padding is added for rounded
buttons. This adds an extra selector to move that extra padding case to happen
only in the cases where a single icon isn't the sole child of the button.

This means that circular icon buttons can now  be created, but adding any other
content to the button still results in the exact same proportions as before.

Since this makes use of the :has() selector which has only recently gained
good browser support, the whole rule is behind an @supports for :has() so that
older browsers will fall back to the same logic as before.
---
 sass/elements/button.scss | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/sass/elements/button.scss b/sass/elements/button.scss
index b940e7ea..95825e80 100644
--- a/sass/elements/button.scss
+++ b/sass/elements/button.scss
@@ -534,14 +534,28 @@ $no-palette: ("white", "black", "light", "dark");
 
   &.#{iv.$class-prefix}is-rounded {
     border-radius: cv.getVar("radius-rounded");
-    padding-left: calc(
-      #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
-        #{cv.getVar("button-border-width")}
-    );
-    padding-right: calc(
-      #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
-        #{cv.getVar("button-border-width")}
-    );
+
+    &:not(:has(.icon:only-child)) {
+      padding-left: calc(
+        #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+          #{cv.getVar("button-border-width")}
+      );
+      padding-right: calc(
+        #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+          #{cv.getVar("button-border-width")}
+      );
+    }
+
+    @supports not selector(:has(a, b)) {
+      padding-left: calc(
+        #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+          #{cv.getVar("button-border-width")}
+      );
+      padding-right: calc(
+        #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+          #{cv.getVar("button-border-width")}
+      );
+    }
   }
 }