specify padding and margin

src/components/form.css

@@ -84,7 +84,6 @@
   width: 100%;
   min-width: var(--__op-form-control-height);
   height: var(--__op-form-control-height);
-  padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
   border: none;
   border-radius: var(--op-radius-medium);
   appearance: none;
@@ -94,6 +93,10 @@
   cursor: text;
   font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
+  padding-block: var(--op-space-2x-small);
+  padding-inline-end: var(--op-space-x-small);
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  padding-inline-start: var(--op-space-small);
 
   /* Focus State */
   &:focus,
@@ -161,7 +164,6 @@
     min-height: var(--__op-btn-height);
     align-items: center;
     justify-content: center;
-    padding: 0 var(--op-space-x-small);
     border: none;
     border-radius: var(--op-radius-medium);
     appearance: none;
@@ -173,6 +175,8 @@
     font-weight: var(--op-font-weight-normal);
     gap: var(--op-space-x-small);
     margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    padding-block: 0;
+    padding-inline: var(--op-space-x-small);
     text-align: center;
     text-decoration: none;
     transition: var(--op-transition-input);
@@ -185,7 +189,6 @@
 }
 
 select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
-  padding-right: var(--op-space-3x-large);
   appearance: none;
   background-image: var(--op-encoded-images-dropdown-arrow);
   background-position: center right;
@@ -194,6 +197,7 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
   );
   background-repeat: no-repeat;
   cursor: pointer;
+  padding-inline-end: var(--op-space-3x-large);
 }
 
 select.form-control[multiple] {
@@ -229,27 +233,28 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
 .form-error-summary {
   padding: var(--op-space-large);
   border-radius: var(--op-radius-large);
-  margin-bottom: var(--op-space-large);
   background-color: var(--op-color-alerts-danger-plus-seven);
   box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
   color: var(--op-color-alerts-danger-on-plus-seven);
+  margin-block-end: var(--op-space-large);
 
   h2 {
     font-size: var(--op-font-medium);
   }
 
   ul {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
 .form-group {
   display: grid;
   align-content: baseline;
-  padding: var(--op-space-small) 0;
   gap: var(--op-space-x-small);
   grid-auto-rows: auto;
   grid-template-columns: auto 1fr;
+  padding-block: var(--op-space-small) 0;
+  padding-inline: 0;
 
   /* Group Alignment */
   /* stylelint-disable no-descending-specificity */