From 4fe3bfe900a5784e5eb46701c42a10d4c5978bc2 Mon Sep 17 00:00:00 2001
From: Josh Tate <jtate@squareup.com>
Date: Fri, 28 Apr 2023 09:14:28 -0400
Subject: [PATCH] fix(pininput): undo safari-specific fixes, set input to
 opacity 0 (#548)

---
 .../PinInput/src/PinInputControl.vue          | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/PinInput/src/PinInputControl.vue b/src/components/PinInput/src/PinInputControl.vue
index 2c45d2c10..f406ce544 100644
--- a/src/components/PinInput/src/PinInputControl.vue
+++ b/src/components/PinInput/src/PinInputControl.vue
@@ -34,6 +34,7 @@
 					[$s.isFocused]: isCellFocused(pinPosition - 1),
 					[$s.fill]: variant === 'fill',
 					[$s.error]: invalid,
+					[$s.disabled]: disabled || isShaking
 				}"
 			>
 				{{ inputValue[pinPosition - 1] }}
@@ -267,18 +268,8 @@ export default {
 	border: 0;
 	outline: 0;
 
-	/* Prevents Safari styles */
-	&:-webkit-autofill-and-obscured,
-	&:-webkit-autofill-strong-password,
-	&:-webkit-autofill-strong-password-viewable,
-	&:-webkit-autofill {
-		color: var(--bg-color, #fff) !important;
-		background-color: var(--bg-color, #fff) !important;
-		background-clip: content-box !important;
-		-webkit-box-shadow: 0 0 0 1000px var(--bg-color, #fff) inset !important;
-		box-shadow: 0 0 0 1000px var(--bg-color, #fff) inset !important;
-		-webkit-text-fill-color: var(--bg-color, #fff);
-	}
+	/* This makes the input clickable but not actually visible */
+	opacity: 0 !important;
 }
 
 .PinInputCells {
@@ -319,6 +310,11 @@ export default {
 	&.error {
 		border-color: $maker-color-error-fill;
 	}
+
+	&.disabled {
+		border: 1px solid $maker-color-neutral-20;
+		opacity: 0.9;
+	}
 }
 
 .isShaking {