@stackoverflow/stacks 1.7.0 → 1.8.0

package/lib/css/components/inputs.less

@@ -1,666 +1,297 @@
-@input-padding: 0.6em 0.7em;
-
-@autofill: {
-    &::-webkit-contacts-auto-fill-button {
-        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
-    }
-
-    &:-webkit-autofill {
-        border-color: var(--blue-300);
-        -webkit-text-fill-color: var(--black);
-        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset; // This acts as a background color by stretching an inset box shadow across the input
-        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
-
-        &:focus {
-            border-color: var(--blue-300);
-            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
-            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-    }
-}
-
-//  ============================================================================
-//  $  BASE INPUT / TEXTAREA STYLE
-//  ----------------------------------------------------------------------------
 .s-input,
 .s-textarea {
-    -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
-    width: 100%;
-    margin: 0; // A guard against Core's default margins
-    padding: @input-padding;
-    border: 1px solid var(--bc-darker);
-    border-radius: var(--br-sm);
-    background-color: var(--white);
-    color: var(--fc-dark);
-    font-size: var(--fs-body1);
-    font-family: inherit;
-
-    //  --  INCREASE FONT SIZE FOR MOBILE SAFARI
-    //  This keeps our inputs from zooming the page while focused
-    //  ------------------------------------------------------------------------
+    --_in-bc: var(--bc-darker);
+    --_in-bc-focus: var(--theme-secondary-300);
+    --_in-bg: var(--white);
+    --_in-br: var(--br-sm);
+    --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_in-c: unset;
+    --_in-fc: var(--fc-dark);
+    --_in-fc-focus: var(--black);
+    --_in-fs: var(--fs-body1);
+    --_in-o: unset;
+    --_in-px: 0.7em;
+    --_in-py: 0.6em;
+    --_in-placeholder-fc: var(--black-200);
+
+    // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
-        font-size: 16px;
-        padding: 0.36em 0.55em; // Compensate for the larger font size so we generally keep the input the same size
+        --_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
+        --_in-px: 0.55em;
+        --_in-py: 0.36em;
 
         &::-webkit-input-placeholder {
             line-height: normal !important;
         }
     }
 
-    //  --  PLACEHOLDER
-    //  ------------------------------------------------------------------------
-    &::-webkit-input-placeholder {
-        color: var(--black-200);
+    .highcontrast-mode({
+        --_in-bc: var(--black);
+        --_in-placeholder-fc: var(--black-400);
+    });
 
-        .highcontrast-mode({
-            color: var(--black-400);
-        });
+    // MODIFIERS
+    fieldset[disabled] &,
+    &[disabled],
+    &[readonly],
+    .is-readonly & {
+        --_in-c: not-allowed;
     }
 
-    &::placeholder {
-        color: var(--black-200);
-        opacity: 1;
+    fieldset[disabled] &,
+    &[disabled] {
+        --_in-o: var(--_o-disabled-static);
+    }
 
+    &[readonly],
+    .is-readonly & {
         .highcontrast-mode({
-            color: var(--black-400);
+            --_in-fc: var(--fc-light);
         });
-    }
 
-    // --  STYLE SCROLLBARS
-    @scrollbar-styles();
-
-    // --  STYLE AUTOFILL STATES
-    @autofill();
-}
-
-.s-input.s-input__search,
-.s-input.s-input__creditcard {
-    padding-left: var(--su-static32);
-}
-
-
-//  ============================================================================
-//  $  FIELDSET
-//  ----------------------------------------------------------------------------
-fieldset {
-    min-width: 0;
-    padding: 0;
-    border: 0;
-
-    &[disabled] {
-        a,
-        .s-btn,
-        .s-link {
-            box-shadow: none !important;
-            opacity: var(--_o-disabled-static);
-            pointer-events: none;
-        }
+        --_in-bg: var(--black-050);
+        --_in-bc: var(--bc-light);
+        --_in-fc: var(--black-200);
+        --_in-fc-focus: var(--_in-fc);
+    }
 
-        .s-checkbox,
-        .s-input-message,
-        .s-radio,
-        .s-toggle-switch,
-        .s-toggle-switch label {
-            cursor: not-allowed;
-            opacity: var(--_o-disabled-static);
-        }
+    .validation-states(
+        in,
+        { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--yellow-600); }); }
+    );
 
-        .s-input,
-        .s-textarea,
-        .s-select > select {
-            cursor: not-allowed;
-            opacity: var(--_o-disabled-static);
-        }
+    // Sizes
+    &&__sm {
+        .size-styles(sm; in; @styles: fs);
     }
-}
-
-//  ============================================================================
-//  $  TEXT STYLES
-//  ============================================================================
-.s-description {
-    padding: 0 var(--su2); // Helps the label visually line up with inputs
-    color: var(--fc-medium);
-    font-size: var(--fs-caption);
-}
 
-//  ============================================================================
-//  $   CONNECTED INPUTS
-//      To visually connect inputs together
-//  ----------------------------------------------------------------------------
-.s-input-fill {
-    padding: @input-padding;
-    border: 1px solid var(--bc-darker);
-    border-right-width: 0;
-    border-left-width: 0;
-    background-color: var(--black-050);
-    color: var(--fc-medium);
-    font-family: inherit;
-    white-space: nowrap;
-    line-height: var(--lh-sm);
+    &&__md {
+        @supports (-webkit-overflow-scrolling: touch) {
+            --_in-fs: 17px;
+            --_in-py: 0.4em;
+        }
 
-    &.s-input-fill__clear {
-        border-color: transparent;
-        background-color: transparent;
+        .size-styles(md; in; @styles: br, fs);
     }
 
-    &.order-first {
-        border-left-width: 1px;
-        border-top-left-radius: var(--br-sm);
-        border-bottom-left-radius: var(--br-sm);
+    &&__lg {
+        .size-styles(lg; in; @styles: br, fs);
+        --_in-px: 0.6em;
+        --_in-py: 0.45em;
     }
 
-    &.order-last {
-        border-right-width: 1px;
-        border-top-right-radius: var(--br-sm);
-        border-bottom-right-radius: var(--br-sm);
+    &&__xl {
+        .size-styles(xl; in; @styles: br, fs);
+        --_in-px: 0.5em;
+        --_in-py: 0.4em;
     }
-}
 
+    // CHILD ELEMENTS
+    .webkit-autofill();
 
-//  ============================================================================
-//  $   SELECT MENUS
-//  ----------------------------------------------------------------------------
-.s-select {
-    position: relative;
-    color: var(--fc-dark);
-
-    //  --  MENU ARROWS
-    //      To customize the visual appearance of the select menu arrows, we
-    //      need to recreate them on the wrapping .select div.
-    //  ------------------------------------------------------------------------
-    &:before,
-    &:after {
-        content: "";
-        position: absolute;
-        z-index: var(--zi-selected);
-        right: 13px;
-        border-color: currentColor transparent;
-        border-style: solid;
-        border-width: 4px;
-        pointer-events: none;
+    &::placeholder,
+    &::-webkit-input-placeholder {
+        color: var(--_in-placeholder-fc);
     }
-    &:before {
-        top: calc(50% - 5px);
-        border-top-width: 0;
-        border-bottom-width: 4px;
+
+    &::placeholder {
+        opacity: 1;
     }
-    &:after {
-        top: calc(50% + 1px);
-        border-top-width: 4px;
-        border-bottom-width: 0;
+
+    &&__creditcard,
+    &&__search {
+        --_in-pl: var(--su-static32);
     }
 
-    //  --  MENU
-    //      Now we can style the visual appearance of the select menu;
-    //  ------------------------------------------------------------------------
-    > select {
-        //  [1] Reset the appearance
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-
-        //  [2] Update the styles
-        position: relative; // This prevents Firefox from requiring a second click to select options
-        width: 100%;
-        height: 100%; // Fill the height of its parent
-        padding: @input-padding;
-        padding-right: var(--su32);
-        border: 1px solid var(--bc-darker);
-        border-radius: var(--br-sm);
-        background-color: var(--white);
+    // INTERACTION
+    &:focus{
+        border-color: var(--_in-bc-focus);
+        box-shadow: var(--_in-bs-focus);
+        color: var(--_in-fc-focus);
         outline: 0;
-        font-size: var(--fs-body1);
-        font-family: inherit;
-        color: var(--black);
-        line-height: var(--lh-sm);
-
-        &::-moz-focus-inner {
-            outline: none !important;
-        }
-
-        &:-moz-focusring {
-            color: transparent;
-            text-shadow: 0 0 0 #000;
-        }
-
-        &::-ms-expand {
-            display: none;
-        }
+    }
 
-        //  --  INCREASE FONT SIZE FOR MOBILE SAFARI
-        //  This keeps our inputs from zooming the page while focused
-        //  ------------------------------------------------------------------------
-        @supports (-webkit-overflow-scrolling: touch) {
-            font-size: 16px;
-            padding: 0.4em 0.55em; // Compensate for the larger font size so we generally keep the input the same size
-        }
+    @scrollbar-styles();
+    background-color: var(--_in-bg);
+    border: var(--su-static1) solid var(--_in-bc);
+    border-radius: var(--_in-br);
+    color: var(--_in-fc);
+    cursor: var(--_in-c);
+    font-size: var(--_in-fs);
+    opacity: var(--_in-o);
+    padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
 
-        // --  STYLE AUTOFILL STATES
-        @autofill();
-    }
+    -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
+    font-family: inherit;
+    margin: 0; // A guard against Core's default margins
+    width: 100%;
 }
 
+.s-input {
+    .input-states({
+        padding-right: var(--su32);
+    });
 
-//  ============================================================================
-//  $   CHECKBOXES & RADIOS
-//  ----------------------------------------------------------------------------
-// TODO would _love_ to use .s-check instead, with no class on the input itself
-.s-check-control {
-    display: flex;
-    gap: var(--su8);
-    align-items: center;
+    &:focus-within {
+        .highcontrast-mode({
+            --_in-bc-focus: var(--black);
+        });
 
-    [disabled] + .s-label {
-        &:extend(.is-disabled .s-label);
+        border-color: var(--_in-bc-focus);
+        box-shadow: var(--_in-bs-focus);
+        color: var(--_in-fc-focus);
+        outline: 0;
     }
 
-    .s-label {
-        font-weight: normal;
+    &&__md {
+        --_in-py: 0.5em;
     }
 }
 
-.s-check-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--su8);
-
-    &&__horizontal {
-        flex-direction: row;
-    }
+.s-textarea {
+    .input-states({
+        padding-right: var(--su48);
+    });
 
-    // TODO HACK? <legend> isn't respecting gap...
-    legend.s-label {
-        margin-bottom: var(--su8);
+    &&__md {
+        --_in-py: 0.72em;
     }
 
-    // manually align the checkboxes and radios to the top of the group
-    .s-check-control {
-        align-items: flex-start;
-    }
-    .s-checkbox, .s-radio {
-        margin-top: calc(var(--su2) + var(--su1)); // 3px
+    ~ .s-input-icon {
+        right: 1.5em;
+        top: 1.5em;
     }
 }
 
-.s-checkbox,
-.s-radio {
-    //  [1]   Check to see if we can use custom styles, if so reset the defaults
-    //  ------------------------------------------------------------------------
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        .appearance(none);
-
-        &::-ms-check {
-            display: none;
-        }
-
-        //  [2]  Now re-style the checkboxes and radios
-        //  ------------------------------------------------------------------------
-        margin: 0; // A guard against Core's default margins
-        width: 1em;
-        height: 1em;
-        border: 1px solid var(--bc-darker);
-        background-color: var(--white);
-        outline: 0;
-        font-size: inherit;
-        vertical-align: middle;
-        cursor: pointer;
-    }
+// Other input-related elements
+.s-input-fill {
+    --_if-bc: var(--bc-darker);
+    --_if-bg: var(--black-050);
+    --_if-blw: 0;
+    --_if-blr: 0;
+    --_if-brr: 0;
+    --_if-brw: 0;
 
-    input& {
-        flex-shrink: 0;
+    &&__clear {
+        --_if-bc: transparent;
+        --_if-bg: transparent;
     }
 
-    //  Disabled
-    &[disabled] {
-        opacity: var(--_o-disabled-static);
-        cursor: not-allowed;
+    &.order-first {
+        --_if-blw: var(--su-static1);
+        --_if-blr: var(--br-sm);
     }
-}
 
-//  $$  CHECKBOXES
-//  ----------------------------------------------------------------------------
-.s-checkbox {
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: var(--br-sm);
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: contain;
-
-        &:checked, &:indeterminate {
-            border-color: var(--theme-secondary-400) !important;
-            background-color: var(--theme-secondary-400);
-
-            .highcontrast-dark-mode({
-                border-color: var(--blue-700) !important;
-                background-color: var(--blue-300);
-            });
-
-            &:focus {
-                border-color: var(--theme-secondary-400);
-            }
-        }
-
-        &:checked {
-            background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
-        }
-        &:indeterminate {
-            background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
-        }
-
-        &:focus {
-            border-color: var(--theme-secondary-300);
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-        }
+    &.order-last {
+        --_if-brw: var(--su-static1);
+        --_if-brr: var(--br-sm);
     }
-}
 
-//  $$  RADIOS
-//  ----------------------------------------------------------------------------
-.s-radio {
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: var(--br-circle);
-
-        &:checked {
-            border-color: var(--theme-secondary-400);
-            border-width: 0.30769231em;
-            background-color: @white; // This should always be white regardless of dark mode
-
-            .highcontrast-dark-mode({
-                border-color: var(--blue-300);
-                outline: 1px solid var(--black);
-            });
-        }
+    background-color: var(--_if-bg);
+    border: var(--su-static1) solid var(--_if-bc);
+    border-left-width: var(--_if-blw);
+    border-right-width: var(--_if-brw);
+    border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
 
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-    }
+    color: var(--fc-medium);
+    font-family: inherit;
+    line-height: var(--lh-sm);
+    padding: 0.6em 0.7em;
+    white-space: nowrap;
 }
 
-//  ============================================================================
-//  $   STATES
-//      The many states for inputs and select menus.
-//  ----------------------------------------------------------------------------
-//  Focus
-& {
-    @focus-style: {
-        border-color: var(--theme-secondary-300);
-        box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-        color: var(--black);
-        outline: 0;
+.s-input-icon {
+    --_ii-fc: unset;
+    --_ii-r: 0.7em;
 
-        .highcontrast-mode({
-            border-color: var(--black);
-        })
+    // MODIFIERS
+    .has-error & {
+        --_ii-fc: var(--red-400);
     }
 
-    .s-input:focus,
-    .s-input.has-focus,
-    .s-textarea:focus,
-    .s-select > select:focus {
-        @focus-style();
+    .has-success & {
+        --_ii-fc: var(--green-400);
     }
 
-    // This needs to be separate from the one above, because in browsers that don't support :focus-within
-    // it's a syntax error, rendering the whole selector null and void.
-    .s-input:focus-within {
-        @focus-style();
+    .has-warning & {
+        --_ii-fc: var(--yellow-600);
     }
-}
 
-.s-input,
-.s-textarea,
-.s-select > select {
-    //  Disabled
-    &[disabled] {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
+    .is-disabled & {
+        --_ii-fc: var(--black-400);
     }
 
-    //  Readonly
-    //  Note: The readonly attribute is not supported on select elements
-    //  See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
-    //  and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086
-    &[readonly],
     .is-readonly & {
-        border-color: var(--bc-light);
-        background-color: var(--black-050);
-        color: var(--black-200);
-        cursor: not-allowed;
+        --_ii-fc: var(--black-200);
 
         .highcontrast-mode({
-            color: var(--fc-light);
+            --_ii-fc: var(--fc-light);
         });
     }
-}
 
-//  ============================================================================
-//  $   VALIDATION STATES
-//      Classes are applied at the wrapping container level.
-//  ----------------------------------------------------------------------------
-.is-disabled,
-.is-readonly,
-.has-success,
-.has-error,
-.has-warning {
-    position: relative;
-
-    .s-input {
-        padding-right: var(--su32);
-    }
+    &&__creditcard,
+    &&__search {
+        --_ii-r: auto;
 
-    .s-select .s-input-icon {
-        right: var(--su32);
+        color: var(--black-400);
+        left: 0.7em;
     }
 
-    .s-textarea {
-        padding-right: var(--su48);
-
-        ~ .s-input-icon {
-            top: 1.5em;
-            right: 1.5em;
-        }
-    }
+    color: var(--_ii-fc);
+    right: var(--_ii-r);
 
-    .s-input-message a {
-        text-decoration: underline;
-    }
+    margin-top: -9px; // Half the icon's height at 18px for centering;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
 }
+.s-input-message {
+    --_im-fc: unset;
+    --_im-a-fc: unset;
+    --_im-a-fc-hover: unset;
 
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.has-warning {
-    .s-input,
-    .s-textarea,
-    .s-checkbox,
-    .s-radio:not(:checked),
-    .s-select > select {
-        border-color: var(--yellow-600);
-
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
-        }
-    }
-
-    .s-input-message {
-        color: var(--yellow-800);
-
+    .input-states({
         a {
-            color: var(--yellow-900);
+            text-decoration: underline;
         }
-    }
-
-    .s-input-icon {
-        color: var(--yellow-600);
-    }
-}
+    });
 
-//  $$  ERROR
-//  ----------------------------------------------------------------------------
-.has-error {
-    .s-input,
-    .s-textarea,
-    .s-checkbox,
-    .s-radio:not(:checked),
-    .s-select > select {
-        border-color: var(--red-400);
-
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-        }
+    fieldset[disabled] & {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
     }
 
-    .s-input-message {
-        color: var(--red-500);
-
-        a {
-            color: var(--red-800);
-
-            &:hover {
-                color: var(--red-900);
-            }
-        }
+    // MODIFIERS
+    .has-error & {
+        --_im-fc: var(--red-500);
+        --_im-a-fc: var(--red-800);
+        --_im-a-fc-hover: var(--red-900);
     }
 
-    .s-input-icon {
-        color: var(--red-400);
+    .has-success & {
+        --_im-fc: var(--green-500);
+        --_im-a-fc: var(--green-800);
+        --_im-a-fc-hover: var(--green-900);
     }
-}
 
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.has-success {
-    .s-input,
-    .s-textarea,
-    .s-checkbox,
-    .s-radio:not(:checked),
-    .s-select > select {
-        border-color: var(--green-400);
-
-        &:focus {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
-        }
+    .has-warning & {
+        --_im-fc: var(--yellow-800);
+        --_im-a-fc: var(--yellow-900);
     }
 
-    .s-input-message {
-        color: var(--green-500);
-
-        a {
-            color: var(--green-800);
-
-            &:hover {
-                color: var(--green-900);
-            }
+    // CHILD ELEMENTS
+    a {
+        &:hover {
+            color: var(--_im-a-fc-hover);
         }
-    }
-
-    .s-input-icon {
-        color: var(--green-400);
-    }
-}
-
-//  $$  DISABLED
-//  ----------------------------------------------------------------------------
-.is-disabled {
-    .s-select:before,
-    .s-select:after {
-        border-color: var(--bc-darker) transparent;
-    }
-
-    .s-description {
-        opacity: var(--_o-disabled-static);
-    }
-
-    .s-input-icon {
-        color: var(--black-400);
-    }
-}
-
-//  $$  READONLY
-//  ----------------------------------------------------------------------------
-.is-readonly {
-    .s-input-icon {
-        color: var(--black-200);
-
-        .highcontrast-mode({
-            color: var(--fc-light);
-        });
-    }
-}
-
-//  $$  ICONS
-//  ----------------------------------------------------------------------------
-.s-input-icon {
-    position: absolute;
-    top: 50%;
-    right: 0.7em;
-    margin-top: -9px; // Half the icon's height at 18px for centering;
-    pointer-events: none;
 
-    &.s-input-icon__search,
-    &.s-input-icon__creditcard {
-        right: auto;
-        left: 0.7em;
-        color: var(--black-400);
+        color: var(--_im-a-fc);
     }
-}
 
-//  $$  MESSAGE
-//      Set some baseline styles
-//  ----------------------------------------------------------------------------
-.s-input-message {
-    padding: var(--su2);
-    font-size: var(--fs-caption);
-}
+    color: var(--_im-fc);
 
-//  $$  PADDING ADJUSTMENTS AND SIZES
-//  ----------------------------------------------------------------------------
-.s-input__sm,
-.s-textarea__sm,
-.s-select__sm > select {
     font-size: var(--fs-caption);
-}
-
-.s-input__md,
-.s-textarea__md,
-.s-select__md > select {
-    font-size: var(--fs-body3);
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    border-radius: calc(var(--br-sm) + 1px);
-}
-
-.s-textarea__md {
-    padding-top: 0.72em;
-    padding-bottom: 0.72em;
-}
-
-.s-input__lg,
-.s-textarea__lg,
-.s-select__lg > select {
-    font-size: var(--fs-title);
-    padding: 0.45em 0.6em;
-    border-radius: calc(var(--br-sm) + 1px);
-}
-
-.s-input__xl,
-.s-textarea__xl,
-.s-select__xl > select {
-    font-size: var(--fs-headline1);
-    padding: 0.4em 0.5em;
-    border-radius: var(--br-md);
-}
-
-.s-input__md,
-.s-textarea__md {
-    //  --  INCREASE FONT SIZE FOR MOBILE SAFARI
-    //  This keeps our inputs from zooming the page while focused
-    //  ------------------------------------------------------------------------
-    @supports (-webkit-overflow-scrolling: touch) {
-        font-size: 17px;
-
-        // Compensate for the larger font size so we generally keep the input the same size
-        padding-top: 0.4em;
-        padding-bottom: 0.4em;
-    }
+    padding: var(--su2);
 }