Javier Reartes · 135cb686
--- a/core/themes/claro/css/components/form--prefix-suffix.css 0 → 100644
+++ b/core/themes/claro/css/components/form--prefix-suffix.css 0 → 100644
+.js .form-item__suffix--stacked {
+  order: 1; /* This enforces stacking and does not change focus order */
+  border-top-width: 0;
+  border-left-width: 1px;
+  border-radius: 0 0 2px 2px;
+}
+
+.form-item__affix--stacked {
+  position: relative;
+  white-space: normal;
+}
+
+.form-item--error .form-item__affix {
+  color: #dc2323;
+  border-color: #dc2323;
+  background: var(--color-minimumred);
--- a/core/themes/claro/css/components/form--prefix-suffix.pcss.css 0 → 100644
+++ b/core/themes/claro/css/components/form--prefix-suffix.pcss.css 0 → 100644
+  box-sizing: border-box;
+  max-width: 100%;
+  border-radius: 2px;
+}
+
+/* Ensures the focus ring is not covered by the suffix. */
+.form-item__wrapper--with-affix .form-element:focus {
+  z-index: 1;
+}
+
+/* These full width pseudo elements are used for enforcing consistent wrapping. */
+.form-item__wrapper--with-affix::after,
+.form-item__wrapper--with-affix::before {
+  width: 100%;
+  content: "";
+}