sakana-element 2.2.0 → 2.4.0

package/dist/theme/Input.css

@@ -1,639 +1,647 @@
 /* Input Variables */
-.px-input {
-  --px-input-text-color: var(--px-text-color-primary);
-  --px-input-border-color: var(--px-border-color);
-  --px-input-hover-border-color: var(--px-hover-border-color);
-  --px-input-focus-border-color: var(--px-hover-border-color);
-  --px-input-bg-color: var(--px-fill-color-blank);
-  --px-input-icon-color: var(--px-text-color-secondary);
-  --px-input-placeholder-color: var(--px-text-color-placeholder);
-  --px-input-clear-hover-color: var(--px-text-color-primary);
-  --px-input-shadow-color: var(--px-shadow-color);
-  --px-input-focus-shadow-color: var(--px-shadow-color-dark);
-}
+.px-input {
+  --px-input-text-color: var(--px-text-color-primary);
+  --px-input-border-color: var(--px-border-color);
+  --px-input-hover-border-color: var(--px-hover-border-color);
+  --px-input-focus-border-color: var(--px-hover-border-color);
+  --px-input-bg-color: var(--px-fill-color-blank);
+  --px-input-icon-color: var(--px-text-color-secondary);
+  --px-input-placeholder-color: var(--px-text-color-placeholder);
+  --px-input-clear-hover-color: var(--px-text-color-primary);
+  --px-input-shadow-color: var(--px-shadow-color);
+  --px-input-focus-shadow-color: var(--px-shadow-color-dark);
+
+  /* Inset 3D bevel — sunken field look (reversed from PxButton's raised bevel) */
+  --px-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
+  --px-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
+}
 /* Base Input Styles */
-.px-input {
-  --px-input-height: 36px;
-  position: relative;
-  font-size: var(--px-font-size-base);
-  font-family: var(--px-font-family);
-  display: inline-flex;
-  width: 100%;
-  line-height: var(--px-input-height);
-  box-sizing: border-box;
+.px-input {
+  --px-input-height: 36px;
+  position: relative;
+  font-size: var(--px-font-size-base);
+  font-family: var(--px-font-family);
+  display: inline-flex;
+  width: 100%;
+  line-height: var(--px-input-height);
+  box-sizing: border-box;
   vertical-align: middle;
-}
+}
 /* Disable native password toggle */
-.px-input input[type="password"] {
+.px-input input[type="password"] {
     -webkit-appearance: none;
 }
-.px-input input[type="password"]::-ms-reveal {
+.px-input input[type="password"]::-ms-reveal {
       display: none;
 }
-.px-input input[type="password"]::-ms-clear {
+.px-input input[type="password"]::-ms-clear {
       display: none;
-}
+}
 /* Disabled state */
-.px-input.is-disabled {
+.px-input.is-disabled {
     cursor: not-allowed;
 }
-.px-input.is-disabled .px-input__wrapper {
-      opacity: 0.6;
+.px-input.is-disabled .px-input__wrapper {
+      opacity: 0.6;
       cursor: not-allowed;
 }
-.px-input.is-disabled .px-input__wrapper::before {
+.px-input.is-disabled .px-input__wrapper::before {
         background: var(--px-disabled-border-color);
 }
-.px-input.is-disabled .px-input__wrapper::after {
+.px-input.is-disabled .px-input__wrapper::after {
         background: var(--px-disabled-bg-color);
 }
-.px-input.is-disabled .px-input__inner {
-      color: var(--px-disabled-text-color);
-      -webkit-text-fill-color: var(--px-disabled-text-color);
+.px-input.is-disabled .px-input__inner {
+      color: var(--px-disabled-text-color);
+      -webkit-text-fill-color: var(--px-disabled-text-color);
       cursor: not-allowed;
 }
-.px-input.is-disabled .px-textarea__inner {
-      background-color: var(--px-disabled-bg-color);
-      border-color: var(--px-disabled-border-color);
-      color: var(--px-disabled-text-color);
+.px-input.is-disabled .px-textarea__inner {
+      background-color: var(--px-disabled-bg-color);
+      border-color: var(--px-disabled-border-color);
+      color: var(--px-disabled-text-color);
       cursor: not-allowed;
-}
+}
 /* Prepend/Append border adjustments */
-.px-input.is-prepend > .px-input__wrapper::before,
-    .px-input.is-prepend > .px-input__wrapper::after {
-      clip-path: polygon(
-        0 0,
-        calc(100% - 4px) 0,
-        calc(100% - 4px) 2px,
-        calc(100% - 2px) 2px,
-        calc(100% - 2px) 4px,
-        100% 4px,
-        100% calc(100% - 4px),
-        calc(100% - 2px) calc(100% - 4px),
-        calc(100% - 2px) calc(100% - 2px),
-        calc(100% - 4px) calc(100% - 2px),
-        calc(100% - 4px) 100%,
-        0 100%
+.px-input.is-prepend > .px-input__wrapper::before,
+    .px-input.is-prepend > .px-input__wrapper::after {
+      clip-path: polygon(
+        0 0,
+        calc(100% - 4px) 0,
+        calc(100% - 4px) 2px,
+        calc(100% - 2px) 2px,
+        calc(100% - 2px) 4px,
+        100% 4px,
+        100% calc(100% - 4px),
+        calc(100% - 2px) calc(100% - 4px),
+        calc(100% - 2px) calc(100% - 2px),
+        calc(100% - 4px) calc(100% - 2px),
+        calc(100% - 4px) 100%,
+        0 100%
       );
 }
-.px-input.is-append > .px-input__wrapper::before,
-    .px-input.is-append > .px-input__wrapper::after {
-      clip-path: polygon(
-        0 4px,
-        2px 4px,
-        2px 2px,
-        4px 2px,
-        4px 0,
-        100% 0,
-        100% 100%,
-        4px 100%,
-        4px calc(100% - 2px),
-        2px calc(100% - 2px),
-        2px calc(100% - 4px),
-        0 calc(100% - 4px)
+.px-input.is-append > .px-input__wrapper::before,
+    .px-input.is-append > .px-input__wrapper::after {
+      clip-path: polygon(
+        0 4px,
+        2px 4px,
+        2px 2px,
+        4px 2px,
+        4px 0,
+        100% 0,
+        100% 100%,
+        4px 100%,
+        4px calc(100% - 2px),
+        2px calc(100% - 2px),
+        2px calc(100% - 4px),
+        0 calc(100% - 4px)
       );
 }
-.px-input.is-prepend.is-append > .px-input__wrapper::before,
-    .px-input.is-prepend.is-append > .px-input__wrapper::after {
+.px-input.is-prepend.is-append > .px-input__wrapper::before,
+    .px-input.is-prepend.is-append > .px-input__wrapper::after {
       clip-path: none;
-}
+}
 /* Focus state */
-.px-input.is-focus .px-input__wrapper::before {
+.px-input.is-focus .px-input__wrapper::before {
       background: var(--px-input-focus-border-color);
 }
-.px-input.is-focus .px-input__wrapper {
+.px-input.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
-}
+}
 /* Input Wrapper - Main pixel-style container */
-.px-input__wrapper {
-  display: inline-flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 12px;
-  background: transparent;
-  border: none;
-  position: relative;
-  transition: none;
-  height: var(--px-input-height);
-  box-sizing: border-box;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
+.px-input__wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 12px;
+  background: transparent;
+  border: none;
+  position: relative;
+  transition: none;
+  height: var(--px-input-height);
+  box-sizing: border-box;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
   );
-}
+}
 /* Border layer — filled with border color, clipped to pixel shape */
-.px-input__wrapper::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-input-border-color);
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
+.px-input__wrapper::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-input-border-color);
+    clip-path: polygon(
+      0 4px,
+      2px 4px,
+      2px 2px,
+      4px 2px,
+      4px 0,
+      calc(100% - 4px) 0,
+      calc(100% - 4px) 2px,
+      calc(100% - 2px) 2px,
+      calc(100% - 2px) 4px,
+      100% 4px,
+      100% calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 2px),
+      calc(100% - 4px) calc(100% - 2px),
+      calc(100% - 4px) 100%,
+      4px 100%,
+      4px calc(100% - 2px),
+      2px calc(100% - 2px),
+      2px calc(100% - 4px),
+      0 calc(100% - 4px)
+    );
     z-index: -1;
-}
-/* Fill layer — inset by border width, filled with bg color */
-.px-input__wrapper::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-input-bg-color);
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
+}
+/* Fill layer — inset by border width, filled with bg color, with sunken bevel */
+.px-input__wrapper::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-input-bg-color);
+    box-shadow: var(--px-input-inset-shadow), var(--px-input-inset-highlight);
+    clip-path: polygon(
+      0 4px,
+      2px 4px,
+      2px 2px,
+      4px 2px,
+      4px 0,
+      calc(100% - 4px) 0,
+      calc(100% - 4px) 2px,
+      calc(100% - 2px) 2px,
+      calc(100% - 2px) 4px,
+      100% 4px,
+      100% calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 2px),
+      calc(100% - 4px) calc(100% - 2px),
+      calc(100% - 4px) 100%,
+      4px 100%,
+      4px calc(100% - 2px),
+      2px calc(100% - 2px),
+      2px calc(100% - 4px),
+      0 calc(100% - 4px)
+    );
     z-index: -1;
 }
-.px-input__wrapper:hover::before {
+.px-input__wrapper:hover::before {
       background: var(--px-input-hover-border-color);
 }
-.px-input__wrapper.is-focus::before {
+.px-input__wrapper.is-focus::before {
       background: var(--px-input-focus-border-color);
-}
+}
 /* Inner input element */
-.px-input__wrapper .px-input__inner {
-    --px-input-inner-height: calc(var(--px-input-height) - 8px);
-    width: 100%;
-    flex-grow: 1;
-    -webkit-appearance: none;
-    color: var(--px-input-text-color);
-    font-size: inherit;
-    font-family: var(--px-font-family);
-    height: var(--px-input-inner-height);
-    line-height: var(--px-input-inner-height);
-    padding: 0;
-    outline: none;
-    border: none;
-    background: none;
-    box-sizing: border-box;
+.px-input__wrapper .px-input__inner {
+    --px-input-inner-height: calc(var(--px-input-height) - 8px);
+    width: 100%;
+    flex-grow: 1;
+    -webkit-appearance: none;
+    color: var(--px-input-text-color);
+    font-size: inherit;
+    font-family: var(--px-font-family);
+    height: var(--px-input-inner-height);
+    line-height: var(--px-input-inner-height);
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
     -webkit-font-smoothing: none;
 }
-.px-input__wrapper .px-input__inner::placeholder {
+.px-input__wrapper .px-input__inner::placeholder {
       color: var(--px-input-placeholder-color);
-}
+}
 /* Icon styles */
-.px-input__wrapper .px-icon {
-    height: inherit;
-    line-height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 8px;
+.px-input__wrapper .px-icon {
+    height: inherit;
+    line-height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 8px;
     color: var(--px-input-icon-color);
-}
+}
 /* Clear and password icons */
-.px-input__wrapper .px-input__clear,
-  .px-input__wrapper .px-input__password {
-    color: var(--px-input-icon-color);
-    font-size: var(--px-font-size-base);
+.px-input__wrapper .px-input__clear,
+  .px-input__wrapper .px-input__password {
+    color: var(--px-input-icon-color);
+    font-size: var(--px-font-size-base);
     cursor: pointer;
 }
-.px-input__wrapper .px-input__clear:hover, .px-input__wrapper .px-input__password:hover {
+.px-input__wrapper .px-input__clear:hover, .px-input__wrapper .px-input__password:hover {
       color: var(--px-input-clear-hover-color);
-}
+}
 /* Size variants */
-.px-input--large {
-  --px-input-height: 44px;
+.px-input--large {
+  --px-input-height: 44px;
   font-size: var(--px-font-size-large);
 }
-.px-input--large .px-input__wrapper {
+.px-input--large .px-input__wrapper {
     padding: 2px 16px;
 }
-.px-input--large .px-input__inner {
+.px-input--large .px-input__inner {
     --px-input-inner-height: calc(var(--px-input-height) - 10px);
 }
-.px-input--small {
-  --px-input-height: 28px;
+.px-input--small {
+  --px-input-height: 28px;
   font-size: var(--px-font-size-small);
 }
-.px-input--small .px-input__wrapper {
-    padding: 1px 8px;
+.px-input--small .px-input__wrapper {
+    padding: 1px 8px;
     filter: drop-shadow(2px 2px 0px var(--px-input-shadow-color));
 }
-.px-input--small .px-input__inner {
+.px-input--small .px-input__inner {
     --px-input-inner-height: calc(var(--px-input-height) - 6px);
-}
+}
 /* Color variants */
-.px-input--primary {
-    --px-input-border-color: var(--px-color-primary);
-    --px-input-hover-border-color: var(--px-color-primary-dark);
-    --px-input-focus-border-color: var(--px-color-primary-dark);
+.px-input--primary {
+    --px-input-border-color: var(--px-color-primary);
+    --px-input-hover-border-color: var(--px-color-primary-dark);
+    --px-input-focus-border-color: var(--px-color-primary-dark);
     --px-input-focus-shadow-color: var(--px-color-primary-dark);
 }
-.px-input--primary .px-input__wrapper {
+.px-input--primary .px-input__wrapper {
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
 }
-.px-input--primary.is-focus .px-input__wrapper {
+.px-input--primary.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
-}
+}
 /* Textarea color variant */
-.px-input--primary .px-textarea__wrapper {
-    border-color: var(--px-color-primary);
+.px-input--primary .px-textarea__wrapper {
+    border-color: var(--px-color-primary);
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
 }
 .px-input--primary .px-textarea__wrapper:hover { border-color: var(--px-color-primary-dark);
 }
-.px-input--primary .px-textarea__wrapper:focus {
-      border-color: var(--px-color-primary-dark);
+.px-input--primary .px-textarea__wrapper:focus {
+      border-color: var(--px-color-primary-dark);
       filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
 }
-.px-input--success {
-    --px-input-border-color: var(--px-color-success);
-    --px-input-hover-border-color: var(--px-color-success-dark);
-    --px-input-focus-border-color: var(--px-color-success-dark);
+.px-input--success {
+    --px-input-border-color: var(--px-color-success);
+    --px-input-hover-border-color: var(--px-color-success-dark);
+    --px-input-focus-border-color: var(--px-color-success-dark);
     --px-input-focus-shadow-color: var(--px-color-success-dark);
 }
-.px-input--success .px-input__wrapper {
+.px-input--success .px-input__wrapper {
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
 }
-.px-input--success.is-focus .px-input__wrapper {
+.px-input--success.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
-}
+}
 /* Textarea color variant */
-.px-input--success .px-textarea__wrapper {
-    border-color: var(--px-color-success);
+.px-input--success .px-textarea__wrapper {
+    border-color: var(--px-color-success);
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
 }
 .px-input--success .px-textarea__wrapper:hover { border-color: var(--px-color-success-dark);
 }
-.px-input--success .px-textarea__wrapper:focus {
-      border-color: var(--px-color-success-dark);
+.px-input--success .px-textarea__wrapper:focus {
+      border-color: var(--px-color-success-dark);
       filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
 }
-.px-input--warning {
-    --px-input-border-color: var(--px-color-warning);
-    --px-input-hover-border-color: var(--px-color-warning-dark);
-    --px-input-focus-border-color: var(--px-color-warning-dark);
+.px-input--warning {
+    --px-input-border-color: var(--px-color-warning);
+    --px-input-hover-border-color: var(--px-color-warning-dark);
+    --px-input-focus-border-color: var(--px-color-warning-dark);
     --px-input-focus-shadow-color: var(--px-color-warning-dark);
 }
-.px-input--warning .px-input__wrapper {
+.px-input--warning .px-input__wrapper {
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
 }
-.px-input--warning.is-focus .px-input__wrapper {
+.px-input--warning.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
-}
+}
 /* Textarea color variant */
-.px-input--warning .px-textarea__wrapper {
-    border-color: var(--px-color-warning);
+.px-input--warning .px-textarea__wrapper {
+    border-color: var(--px-color-warning);
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
 }
 .px-input--warning .px-textarea__wrapper:hover { border-color: var(--px-color-warning-dark);
 }
-.px-input--warning .px-textarea__wrapper:focus {
-      border-color: var(--px-color-warning-dark);
+.px-input--warning .px-textarea__wrapper:focus {
+      border-color: var(--px-color-warning-dark);
       filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
 }
-.px-input--info {
-    --px-input-border-color: var(--px-color-info);
-    --px-input-hover-border-color: var(--px-color-info-dark);
-    --px-input-focus-border-color: var(--px-color-info-dark);
+.px-input--info {
+    --px-input-border-color: var(--px-color-info);
+    --px-input-hover-border-color: var(--px-color-info-dark);
+    --px-input-focus-border-color: var(--px-color-info-dark);
     --px-input-focus-shadow-color: var(--px-color-info-dark);
 }
-.px-input--info .px-input__wrapper {
+.px-input--info .px-input__wrapper {
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
 }
-.px-input--info.is-focus .px-input__wrapper {
+.px-input--info.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
-}
+}
 /* Textarea color variant */
-.px-input--info .px-textarea__wrapper {
-    border-color: var(--px-color-info);
+.px-input--info .px-textarea__wrapper {
+    border-color: var(--px-color-info);
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
 }
 .px-input--info .px-textarea__wrapper:hover { border-color: var(--px-color-info-dark);
 }
-.px-input--info .px-textarea__wrapper:focus {
-      border-color: var(--px-color-info-dark);
+.px-input--info .px-textarea__wrapper:focus {
+      border-color: var(--px-color-info-dark);
       filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
 }
-.px-input--danger {
-    --px-input-border-color: var(--px-color-danger);
-    --px-input-hover-border-color: var(--px-color-danger-dark);
-    --px-input-focus-border-color: var(--px-color-danger-dark);
+.px-input--danger {
+    --px-input-border-color: var(--px-color-danger);
+    --px-input-hover-border-color: var(--px-color-danger-dark);
+    --px-input-focus-border-color: var(--px-color-danger-dark);
     --px-input-focus-shadow-color: var(--px-color-danger-dark);
 }
-.px-input--danger .px-input__wrapper {
+.px-input--danger .px-input__wrapper {
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
 }
-.px-input--danger.is-focus .px-input__wrapper {
+.px-input--danger.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
-}
+}
 /* Textarea color variant */
-.px-input--danger .px-textarea__wrapper {
-    border-color: var(--px-color-danger);
+.px-input--danger .px-textarea__wrapper {
+    border-color: var(--px-color-danger);
     filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
 }
 .px-input--danger .px-textarea__wrapper:hover { border-color: var(--px-color-danger-dark);
 }
-.px-input--danger .px-textarea__wrapper:focus {
-      border-color: var(--px-color-danger-dark);
+.px-input--danger .px-textarea__wrapper:focus {
+      border-color: var(--px-color-danger-dark);
       filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
-}
+}
 /* Ghost variant — no border/shadow at rest */
-.px-input.is-ghost .px-input__wrapper {
+.px-input.is-ghost .px-input__wrapper {
     filter: none;
 }
 .px-input.is-ghost .px-input__wrapper::before { background: transparent;
 }
+.px-input.is-ghost .px-input__wrapper::after { box-shadow: none;
+}
 .px-input.is-ghost .px-input__wrapper:hover::before { background: var(--px-input-hover-border-color);
 }
-.px-input.is-ghost .px-input__wrapper:hover {
+.px-input.is-ghost .px-input__wrapper:hover {
       filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color));
 }
 .px-input.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-input-focus-border-color);
 }
-.px-input.is-ghost.is-focus .px-input__wrapper {
+.px-input.is-ghost.is-focus .px-input__wrapper {
     filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
-}
+}
 /* Ghost + Color variants */
-.px-input--primary.is-ghost .px-input__wrapper {
+.px-input--primary.is-ghost .px-input__wrapper {
       filter: none;
 }
 .px-input--primary.is-ghost .px-input__wrapper::before { background: transparent;
 }
 .px-input--primary.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-primary);
 }
-.px-input--primary.is-ghost .px-input__wrapper:hover {
+.px-input--primary.is-ghost .px-input__wrapper:hover {
         filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
 }
 .px-input--primary.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-primary-dark);
 }
-.px-input--primary.is-ghost.is-focus .px-input__wrapper {
+.px-input--primary.is-ghost.is-focus .px-input__wrapper {
       filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
 }
-.px-input--success.is-ghost .px-input__wrapper {
+.px-input--success.is-ghost .px-input__wrapper {
       filter: none;
 }
 .px-input--success.is-ghost .px-input__wrapper::before { background: transparent;
 }
 .px-input--success.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-success);
 }
-.px-input--success.is-ghost .px-input__wrapper:hover {
+.px-input--success.is-ghost .px-input__wrapper:hover {
         filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
 }
 .px-input--success.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-success-dark);
 }
-.px-input--success.is-ghost.is-focus .px-input__wrapper {
+.px-input--success.is-ghost.is-focus .px-input__wrapper {
       filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
 }
-.px-input--warning.is-ghost .px-input__wrapper {
+.px-input--warning.is-ghost .px-input__wrapper {
       filter: none;
 }
 .px-input--warning.is-ghost .px-input__wrapper::before { background: transparent;
 }
 .px-input--warning.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-warning);
 }
-.px-input--warning.is-ghost .px-input__wrapper:hover {
+.px-input--warning.is-ghost .px-input__wrapper:hover {
         filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
 }
 .px-input--warning.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-warning-dark);
 }
-.px-input--warning.is-ghost.is-focus .px-input__wrapper {
+.px-input--warning.is-ghost.is-focus .px-input__wrapper {
       filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
 }
-.px-input--info.is-ghost .px-input__wrapper {
+.px-input--info.is-ghost .px-input__wrapper {
       filter: none;
 }
 .px-input--info.is-ghost .px-input__wrapper::before { background: transparent;
 }
 .px-input--info.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-info);
 }
-.px-input--info.is-ghost .px-input__wrapper:hover {
+.px-input--info.is-ghost .px-input__wrapper:hover {
         filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
 }
 .px-input--info.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-info-dark);
 }
-.px-input--info.is-ghost.is-focus .px-input__wrapper {
+.px-input--info.is-ghost.is-focus .px-input__wrapper {
       filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
 }
-.px-input--danger.is-ghost .px-input__wrapper {
+.px-input--danger.is-ghost .px-input__wrapper {
       filter: none;
 }
 .px-input--danger.is-ghost .px-input__wrapper::before { background: transparent;
 }
 .px-input--danger.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-danger);
 }
-.px-input--danger.is-ghost .px-input__wrapper:hover {
+.px-input--danger.is-ghost .px-input__wrapper:hover {
         filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
 }
 .px-input--danger.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-danger-dark);
 }
-.px-input--danger.is-ghost.is-focus .px-input__wrapper {
+.px-input--danger.is-ghost.is-focus .px-input__wrapper {
       filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
-}
+}
 /* Prefix and Suffix */
-.px-input__prefix,
-.px-input__suffix {
-  display: inline-flex;
-  white-space: nowrap;
-  flex-shrink: 0;
-  flex-wrap: nowrap;
-  height: 100%;
-  text-align: center;
-  color: var(--px-input-icon-color);
+.px-input__prefix,
+.px-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  height: 100%;
+  text-align: center;
+  color: var(--px-input-icon-color);
   transition: none;
 }
-.px-input__prefix > :first-child {
+.px-input__prefix > :first-child {
     margin-left: 0 !important;
 }
-.px-input__prefix > :last-child {
+.px-input__prefix > :last-child {
     margin-right: 8px !important;
 }
-.px-input__suffix > :first-child {
+.px-input__suffix > :first-child {
     margin-left: 8px !important;
 }
-.px-input__suffix > :last-child {
+.px-input__suffix > :last-child {
     margin-right: 0 !important;
-}
+}
 /* Prepend and Append - Pixel style */
-.px-input__prepend,
-.px-input__append {
-  background: transparent;
-  color: var(--px-text-color-secondary);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100%;
-  height: var(--px-input-height);
-  padding: 0 16px;
-  white-space: nowrap;
-  border: none;
-  font-family: var(--px-font-family);
-  box-sizing: border-box;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
+.px-input__prepend,
+.px-input__append {
+  background: transparent;
+  color: var(--px-text-color-secondary);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  height: var(--px-input-height);
+  padding: 0 16px;
+  white-space: nowrap;
+  border: none;
+  font-family: var(--px-font-family);
+  box-sizing: border-box;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
   );
-}
+}
 /* Border layer */
-.px-input__prepend::before, .px-input__append::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-input-border-color);
+.px-input__prepend::before, .px-input__append::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-input-border-color);
     z-index: -1;
-}
+}
 /* Fill layer */
-.px-input__prepend::after, .px-input__append::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-fill-color-dark);
+.px-input__prepend::after, .px-input__append::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-fill-color-dark);
     z-index: -1;
-}
+}
 /* Notched left, straight right */
-.px-input__prepend::before,
-  .px-input__prepend::after {
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      100% 0,
-      100% 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
+.px-input__prepend::before,
+  .px-input__prepend::after {
+    clip-path: polygon(
+      0 4px,
+      2px 4px,
+      2px 2px,
+      4px 2px,
+      4px 0,
+      100% 0,
+      100% 100%,
+      4px 100%,
+      4px calc(100% - 2px),
+      2px calc(100% - 2px),
+      2px calc(100% - 4px),
+      0 calc(100% - 4px)
     );
-}
+}
 /* Straight left, notched right */
-.px-input__append::before,
-  .px-input__append::after {
-    clip-path: polygon(
-      0 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      0 100%
+.px-input__append::before,
+  .px-input__append::after {
+    clip-path: polygon(
+      0 0,
+      calc(100% - 4px) 0,
+      calc(100% - 4px) 2px,
+      calc(100% - 2px) 2px,
+      calc(100% - 2px) 4px,
+      100% 4px,
+      100% calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 4px),
+      calc(100% - 2px) calc(100% - 2px),
+      calc(100% - 4px) calc(100% - 2px),
+      calc(100% - 4px) 100%,
+      0 100%
     );
-}
+}
 /* Textarea styles */
-.px-input--textarea {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: bottom;
+.px-input--textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
   font-size: var(--px-font-size-base);
 }
-.px-textarea__wrapper {
-  position: relative;
-  display: block;
-  resize: vertical;
-  padding: 8px 12px;
-  line-height: 1.5;
-  box-sizing: border-box;
-  width: 100%;
-  font-size: inherit;
-  font-family: var(--px-font-family);
-  color: var(--px-input-text-color);
-  background-color: var(--px-input-bg-color);
-  background: transparent;
-  border: none;
-  -webkit-font-smoothing: none;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
-  );
-
-  /* We need a wrapper for the pixel border since textarea can resize */
+.px-textarea__wrapper {
+  position: relative;
+  display: block;
+  resize: vertical;
+  padding: 8px 12px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: inherit;
+  font-family: var(--px-font-family);
+  color: var(--px-input-text-color);
+  background-color: var(--px-input-bg-color);
+  background: transparent;
+  border: none;
+  -webkit-font-smoothing: none;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
+  );
+
+  /* We need a wrapper for the pixel border since textarea can resize */
   outline: none;
 }
-.px-textarea__wrapper:hover + .px-textarea__border::before {
+.px-textarea__wrapper:hover + .px-textarea__border::before {
       background: var(--px-input-hover-border-color);
 }
-.px-textarea__wrapper:focus + .px-textarea__border::before {
+.px-textarea__wrapper:focus + .px-textarea__border::before {
       background: var(--px-input-focus-border-color);
 }
-.px-textarea__wrapper:focus {
+.px-textarea__wrapper:focus {
     filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
 }
-.px-textarea__wrapper::placeholder {
+.px-textarea__wrapper::placeholder {
     color: var(--px-input-placeholder-color);
-}
+}
 /* For textarea, we need a special approach since it can resize */
-.px-textarea__wrapper {
-  border: 2px solid var(--px-input-border-color);
-  background: var(--px-input-bg-color);
-
-  /* Simplified pixel corners using clip-path on the textarea itself */
-  clip-path: polygon(
-    0 4px,
-    2px 4px,
-    2px 2px,
-    4px 2px,
-    4px 0,
-    calc(100% - 4px) 0,
-    calc(100% - 4px) 2px,
-    calc(100% - 2px) 2px,
-    calc(100% - 2px) 4px,
-    100% 4px,
-    100% calc(100% - 4px),
-    calc(100% - 2px) calc(100% - 4px),
-    calc(100% - 2px) calc(100% - 2px),
-    calc(100% - 4px) calc(100% - 2px),
-    calc(100% - 4px) 100%,
-    4px 100%,
-    4px calc(100% - 2px),
-    2px calc(100% - 2px),
-    2px calc(100% - 4px),
-    0 calc(100% - 4px)
+.px-textarea__wrapper {
+  border: 2px solid var(--px-input-border-color);
+  background: var(--px-input-bg-color);
+
+  /* Simplified pixel corners using clip-path on the textarea itself */
+  clip-path: polygon(
+    0 4px,
+    2px 4px,
+    2px 2px,
+    4px 2px,
+    4px 0,
+    calc(100% - 4px) 0,
+    calc(100% - 4px) 2px,
+    calc(100% - 2px) 2px,
+    calc(100% - 2px) 4px,
+    100% 4px,
+    100% calc(100% - 4px),
+    calc(100% - 2px) calc(100% - 4px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 4px) calc(100% - 2px),
+    calc(100% - 4px) 100%,
+    4px 100%,
+    4px calc(100% - 2px),
+    2px calc(100% - 2px),
+    2px calc(100% - 4px),
+    0 calc(100% - 4px)
   );
 }
-.px-textarea__wrapper:hover {
+.px-textarea__wrapper:hover {
     border-color: var(--px-input-hover-border-color);
 }
-.px-textarea__wrapper:focus {
+.px-textarea__wrapper:focus {
     border-color: var(--px-input-focus-border-color);
 }