fix(clay-css): Buttons use math-sign function for calculating negat…

…ive margins on `.btn .c-inner` to prevent invalid CSS output like `margin: - -;`

issue #2763

packages/clay-css/src/scss/components/_buttons.scss

@@ -228,11 +228,11 @@
 @if ($enable-c-inner) {
 	.btn .c-inner {
 		display: block;
-		margin: -#{$btn-padding-y} -#{$btn-padding-x};
+		margin: #{math-sign($btn-padding-y)} #{math-sign($btn-padding-x)};
 		padding: $btn-padding-y $btn-padding-x;
 
 		@include clay-scale-component {
-			margin: -#{$btn-padding-y-mobile} -#{$btn-padding-x-mobile};
+			margin: #{math-sign($btn-padding-y-mobile)} #{math-sign($btn-padding-x-mobile)};
 			padding: $btn-padding-y-mobile $btn-padding-x-mobile;
 		}
 	}
@@ -248,42 +248,42 @@
 		flex-direction: column;
 		height: calc(100% + #{$btn-monospaced-padding-y * 2});
 		justify-content: center;
-		margin: -#{$btn-monospaced-padding-y} 0;
+		margin: #{math-sign($btn-monospaced-padding-y)} 0;
 		padding: 0;
 	}
 
 	.btn-sm {
 		.c-inner {
-			margin: -#{$btn-padding-y-sm} -#{$btn-padding-x-sm};
+			margin: #{math-sign($btn-padding-y-sm)} #{math-sign($btn-padding-x-sm)};
 			padding: $btn-padding-y-sm $btn-padding-x-sm;
 
 			@include clay-scale-component {
-				margin: -#{$btn-padding-y-sm-mobile} -#{$btn-padding-x-sm-mobile};
+				margin: #{math-sign($btn-padding-y-sm-mobile)} #{math-sign($btn-padding-x-sm-mobile)};
 				padding: $btn-padding-y-sm-mobile $btn-padding-x-sm-mobile;
 			}
 		}
 
 		&.btn-monospaced .c-inner {
 			height: calc(100% + #{$btn-monospaced-padding-y-sm * 2});
-			margin: -#{$btn-monospaced-padding-y-sm} 0;
+			margin: #{math-sign($btn-monospaced-padding-y-sm)} 0;
 			padding: 0;
 		}
 	}
 
 	.btn-lg {
 		.c-inner {
-			margin: -#{$btn-padding-y-lg} -#{$btn-padding-x-lg};
+			margin: #{math-sign($btn-padding-y-lg)} #{math-sign($btn-padding-x-lg)};
 			padding: $btn-padding-y-lg $btn-padding-x-lg;
 
 			@include clay-scale-component {
-				margin: -#{$btn-padding-y-lg-mobile} -#{$btn-padding-x-lg-mobile};
+				margin: #{math-sign($btn-padding-y-lg-mobile)} #{math-sign($btn-padding-x-lg-mobile)};
 				padding: $btn-padding-y-lg-mobile $btn-padding-x-lg-mobile;
 			}
 		}
 
 		&.btn-monospaced .c-inner {
 			height: calc(100% + #{$btn-monospaced-padding-y-lg * 2});
-			margin: -#{$btn-monospaced-padding-y-lg} 0;
+			margin: #{math-sign($btn-monospaced-padding-y-lg)} 0;
 			padding: 0;
 		}
 	}