sakana-element 2.2.0 → 2.4.0

package/dist/theme/Dropdown.css

@@ -1,18 +1,44 @@
 /* Dropdown Variables */
 .px-dropdown .px-dropdown__menu {
-  --px-dropdown-menuItem-hover-fill: var(--px-hover-bg-color);
-  --px-dropdown-menuItem-hover-color: var(--px-hover-text-color);
+  --px-dropdown-menuItem-hover-fill: var(--px-color-primary);
+  --px-dropdown-menuItem-hover-color: #fff;
   --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
-  --px-dropdown-menuItem-divided-color: var(--px-border-color-dark);
+  --px-dropdown-menuItem-divided-color: var(--px-border-color-lighter);
   --px-dropdown-shadow-color: var(--px-shadow-color-dark);
+  --px-dropdown-border-color: var(--px-border-color);
+  --px-dropdown-bg-color: var(--px-bg-color);
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-dropdown-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.6);
+  --px-dropdown-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
 }
 /* Base Dropdown Styles - Pixel Game Menu */
 .px-dropdown {
   display: inline-block;
   font-family: var(--px-font-family);
+
+  outline: none;
 }
 .px-dropdown .px-tooltip {
-    --px-popover-padding: 4px 0;
+    /* 6px vertical clears staircase corners; 4px horizontal matches border inset */
+    --px-tooltip-padding: 6px 4px;
+    --px-tooltip-border-color: transparent;
+    --px-tooltip-shadow-color: transparent;
+    --px-shadow-offset-x: 0px;
+    --px-shadow-offset-y: 0px;
+}
+.px-dropdown .px-tooltip .px-tooltip__popper {
+      filter: none;
+}
+/* Remove staircase border layer from popup */
+.px-dropdown .px-tooltip .px-tooltip__popper::before {
+      display: none;
+}
+/* Enhanced pixel-art bevel on fill layer */
+.px-dropdown .px-tooltip .px-tooltip__popper::after {
+      box-shadow:
+        inset 2px 2px 0 0 rgba(255, 255, 255, 0.6),
+        inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
 }
 /* Disabled state */
 .px-dropdown.is-disabled > * {
@@ -24,7 +50,24 @@
   list-style-type: none;
   margin: 0;
   padding: 4px 0;
-  background: var(--px-bg-color);
+  background: var(--px-dropdown-bg-color);
+  position: relative;
+  outline: none;
+}
+/* Pixel-art scrollbar */
+.px-dropdown__menu::-webkit-scrollbar {
+    width: 10px;
+}
+.px-dropdown__menu::-webkit-scrollbar-track {
+    background: var(--px-fill-color-light);
+    border-left: 2px solid var(--px-dropdown-border-color);
+}
+.px-dropdown__menu::-webkit-scrollbar-thumb {
+    background: var(--px-fill-color-darker, var(--px-border-color));
+    border: 2px solid var(--px-dropdown-border-color);
+}
+.px-dropdown__menu::-webkit-scrollbar-thumb:hover {
+    background: var(--px-dropdown-menuItem-hover-fill);
 }
 /* Menu items - Pixel RPG menu style */
 .px-dropdown__menu .px-dropdown__item {
@@ -32,8 +75,8 @@
     align-items: center;
     white-space: nowrap;
     list-style: none;
-    line-height: 1.5;
-    padding: 8px 16px;
+    line-height: 22px;
+    padding: 8px 16px 8px 22px;
     margin: 0;
     font-size: var(--px-font-size-base);
     font-family: var(--px-font-family);
@@ -42,69 +85,194 @@
     outline: none;
     position: relative;
     transition: none;
-}
-/* Hover effect - Pixel highlight */
-.px-dropdown__menu .px-dropdown__item:hover {
-      background-color: var(--px-dropdown-menuItem-hover-fill);
+    z-index: 1;
+}
+/* Item icon */
+.px-dropdown__menu .px-dropdown__item .px-dropdown__item-icon {
+      margin-right: 8px;
+      font-size: var(--px-font-size-base);
+      width: 16px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+}
+/* Pixel arrow indicator — right-pointing staircase triangle */
+.px-dropdown__menu .px-dropdown__item::before {
+      content: '';
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6px;
+      height: 8px;
+      background: var(--px-dropdown-menuItem-hover-color);
+      clip-path: polygon(
+        0 0, 2px 0,
+        2px 2px, 4px 2px,
+        4px 4px, 6px 4px,
+        6px 4px, 4px 4px,
+        4px 6px, 2px 6px,
+        2px 8px, 0 8px
+      );
+      opacity: 0;
+      z-index: 2;
+}
+/* Background highlight layer — full width selection bar */
+.px-dropdown__menu .px-dropdown__item::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: transparent;
+      z-index: -1;
+}
+/* Hover & focus effect - Pixel highlight with beveled 3D bar */
+.px-dropdown__menu .px-dropdown__item:hover,
+    .px-dropdown__menu .px-dropdown__item:focus {
       color: var(--px-dropdown-menuItem-hover-color);
 }
-/* Pixel cursor indicator */
-.px-dropdown__menu .px-dropdown__item:hover::before {
-        content: ">";
-        position: absolute;
-        left: 6px;
-        color: var(--px-dropdown-menuItem-hover-color);
-        font-weight: bold;
+.px-dropdown__menu .px-dropdown__item:hover::before, .px-dropdown__menu .px-dropdown__item:focus::before {
+        opacity: 1;
+}
+.px-dropdown__menu .px-dropdown__item:hover::after, .px-dropdown__menu .px-dropdown__item:focus::after {
+        background-color: var(--px-dropdown-menuItem-hover-fill);
+        box-shadow: var(--px-dropdown-inset-highlight), var(--px-dropdown-inset-shadow);
+}
+/* Active/pressed - reversed bevel for "pressed in" feel */
+.px-dropdown__menu .px-dropdown__item:active:not(.is-disabled)::after {
+        box-shadow: var(--px-dropdown-inset-shadow), var(--px-dropdown-inset-highlight);
 }
 /* Disabled state */
 .px-dropdown__menu .px-dropdown__item.is-disabled {
       color: var(--px-dropdown-menuItem-disabled-color);
       cursor: not-allowed;
-      background-image: none;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover {
-        background-color: transparent;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover::before {
-          content: none;
+      opacity: 0.55;
+}
+.px-dropdown__menu .px-dropdown__item.is-disabled::before {
+        opacity: 0 !important;
+}
+.px-dropdown__menu .px-dropdown__item.is-disabled:hover,
+      .px-dropdown__menu .px-dropdown__item.is-disabled:focus {
+        color: var(--px-dropdown-menuItem-disabled-color);
+}
+.px-dropdown__menu .px-dropdown__item.is-disabled:hover::after, .px-dropdown__menu .px-dropdown__item.is-disabled:focus::after {
+          background-color: transparent;
+          box-shadow: none;
+}
+/* First item — top staircase corners on highlight layer */
+.px-dropdown__menu .px-dropdown__item:first-child::after {
+      top: 2px;
+      clip-path: polygon(
+        0 2px, 2px 2px, 2px 0, 4px 0,
+        calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
+        100% 100%,
+        0 100%
+      );
+}
+/* Last item — bottom staircase corners on highlight layer */
+.px-dropdown__menu .px-dropdown__item:last-child::after {
+      bottom: 2px;
+      clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
+        4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+      );
+}
+/* Single item — both top and bottom staircase corners */
+.px-dropdown__menu .px-dropdown__item:first-child:last-child::after {
+      top: 2px;
+      bottom: 2px;
+      clip-path: polygon(
+        0 2px, 2px 2px, 2px 0, 4px 0,
+        calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
+        100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
+        4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+      );
 }
 /* Size variants */
 .px-dropdown__menu .px-dropdown__item--large {
-    padding: 10px 20px;
-    line-height: 1.5;
+    padding: 10px 20px 10px 26px;
+    line-height: 26px;
     font-size: var(--px-font-size-large);
 }
-.px-dropdown__menu .px-dropdown__item--large:hover::before {
-      left: 8px;
+.px-dropdown__menu .px-dropdown__item--large::before {
+      left: 10px;
+      width: 8px;
+      height: 12px;
+      clip-path: polygon(
+        0 0, 2px 0,
+        2px 2px, 4px 2px,
+        4px 4px, 6px 4px,
+        6px 6px, 8px 6px,
+        8px 6px, 6px 6px,
+        6px 8px, 4px 8px,
+        4px 10px, 2px 10px,
+        2px 12px, 0 12px
+      );
 }
 .px-dropdown__menu .px-dropdown__item--small {
-    padding: 4px 12px;
-    line-height: 1.4;
+    padding: 5px 12px 5px 18px;
+    line-height: 18px;
     font-size: var(--px-font-size-small);
 }
-.px-dropdown__menu .px-dropdown__item--small:hover::before {
-      left: 4px;
+.px-dropdown__menu .px-dropdown__item--small::before {
+      left: 6px;
+      width: 4px;
+      height: 6px;
 }
-/* Divider - Pixel style dashed line */
+/* Divider - Pixel-dashed gradient line */
 .px-dropdown__menu .divided-placeholder {
-    margin: 6px 8px;
-    border-top: 2px dashed var(--px-dropdown-menuItem-divided-color);
+    margin: 4px 6px;
+    height: 2px;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-dropdown-menuItem-divided-color) 0px,
+      var(--px-dropdown-menuItem-divided-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
 }
 /* Dropdown Variables */
 .px-dropdown .px-dropdown__menu {
-  --px-dropdown-menuItem-hover-fill: var(--px-hover-bg-color);
-  --px-dropdown-menuItem-hover-color: var(--px-hover-text-color);
+  --px-dropdown-menuItem-hover-fill: var(--px-color-primary);
+  --px-dropdown-menuItem-hover-color: #fff;
   --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
-  --px-dropdown-menuItem-divided-color: var(--px-border-color-dark);
+  --px-dropdown-menuItem-divided-color: var(--px-border-color-lighter);
   --px-dropdown-shadow-color: var(--px-shadow-color-dark);
+  --px-dropdown-border-color: var(--px-border-color);
+  --px-dropdown-bg-color: var(--px-bg-color);
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-dropdown-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.6);
+  --px-dropdown-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
 }
 /* Base Dropdown Styles - Pixel Game Menu */
 .px-dropdown {
   display: inline-block;
   font-family: var(--px-font-family);
+
+  outline: none;
 }
 .px-dropdown .px-tooltip {
-    --px-popover-padding: 4px 0;
+    /* 6px vertical clears staircase corners; 4px horizontal matches border inset */
+    --px-tooltip-padding: 6px 4px;
+    --px-tooltip-border-color: transparent;
+    --px-tooltip-shadow-color: transparent;
+    --px-shadow-offset-x: 0px;
+    --px-shadow-offset-y: 0px;
+}
+.px-dropdown .px-tooltip .px-tooltip__popper {
+      filter: none;
+}
+/* Remove staircase border layer from popup */
+.px-dropdown .px-tooltip .px-tooltip__popper::before {
+      display: none;
+}
+/* Enhanced pixel-art bevel on fill layer */
+.px-dropdown .px-tooltip .px-tooltip__popper::after {
+      box-shadow:
+        inset 2px 2px 0 0 rgba(255, 255, 255, 0.6),
+        inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
 }
 /* Disabled state */
 .px-dropdown.is-disabled > * {
@@ -116,7 +284,24 @@
   list-style-type: none;
   margin: 0;
   padding: 4px 0;
-  background: var(--px-bg-color);
+  background: var(--px-dropdown-bg-color);
+  position: relative;
+  outline: none;
+}
+/* Pixel-art scrollbar */
+.px-dropdown__menu::-webkit-scrollbar {
+    width: 10px;
+}
+.px-dropdown__menu::-webkit-scrollbar-track {
+    background: var(--px-fill-color-light);
+    border-left: 2px solid var(--px-dropdown-border-color);
+}
+.px-dropdown__menu::-webkit-scrollbar-thumb {
+    background: var(--px-fill-color-darker, var(--px-border-color));
+    border: 2px solid var(--px-dropdown-border-color);
+}
+.px-dropdown__menu::-webkit-scrollbar-thumb:hover {
+    background: var(--px-dropdown-menuItem-hover-fill);
 }
 /* Menu items - Pixel RPG menu style */
 .px-dropdown__menu .px-dropdown__item {
@@ -124,8 +309,8 @@
     align-items: center;
     white-space: nowrap;
     list-style: none;
-    line-height: 1.5;
-    padding: 8px 16px;
+    line-height: 22px;
+    padding: 8px 16px 8px 22px;
     margin: 0;
     font-size: var(--px-font-size-base);
     font-family: var(--px-font-family);
@@ -134,54 +319,153 @@
     outline: none;
     position: relative;
     transition: none;
-}
-/* Hover effect - Pixel highlight */
-.px-dropdown__menu .px-dropdown__item:hover {
-      background-color: var(--px-dropdown-menuItem-hover-fill);
+    z-index: 1;
+}
+/* Item icon */
+.px-dropdown__menu .px-dropdown__item .px-dropdown__item-icon {
+      margin-right: 8px;
+      font-size: var(--px-font-size-base);
+      width: 16px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+}
+/* Pixel arrow indicator — right-pointing staircase triangle */
+.px-dropdown__menu .px-dropdown__item::before {
+      content: '';
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6px;
+      height: 8px;
+      background: var(--px-dropdown-menuItem-hover-color);
+      clip-path: polygon(
+        0 0, 2px 0,
+        2px 2px, 4px 2px,
+        4px 4px, 6px 4px,
+        6px 4px, 4px 4px,
+        4px 6px, 2px 6px,
+        2px 8px, 0 8px
+      );
+      opacity: 0;
+      z-index: 2;
+}
+/* Background highlight layer — full width selection bar */
+.px-dropdown__menu .px-dropdown__item::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: transparent;
+      z-index: -1;
+}
+/* Hover & focus effect - Pixel highlight with beveled 3D bar */
+.px-dropdown__menu .px-dropdown__item:hover,
+    .px-dropdown__menu .px-dropdown__item:focus {
       color: var(--px-dropdown-menuItem-hover-color);
 }
-/* Pixel cursor indicator */
-.px-dropdown__menu .px-dropdown__item:hover::before {
-        content: ">";
-        position: absolute;
-        left: 6px;
-        color: var(--px-dropdown-menuItem-hover-color);
-        font-weight: bold;
+.px-dropdown__menu .px-dropdown__item:hover::before, .px-dropdown__menu .px-dropdown__item:focus::before {
+        opacity: 1;
+}
+.px-dropdown__menu .px-dropdown__item:hover::after, .px-dropdown__menu .px-dropdown__item:focus::after {
+        background-color: var(--px-dropdown-menuItem-hover-fill);
+        box-shadow: var(--px-dropdown-inset-highlight), var(--px-dropdown-inset-shadow);
+}
+/* Active/pressed - reversed bevel for "pressed in" feel */
+.px-dropdown__menu .px-dropdown__item:active:not(.is-disabled)::after {
+        box-shadow: var(--px-dropdown-inset-shadow), var(--px-dropdown-inset-highlight);
 }
 /* Disabled state */
 .px-dropdown__menu .px-dropdown__item.is-disabled {
       color: var(--px-dropdown-menuItem-disabled-color);
       cursor: not-allowed;
-      background-image: none;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover {
-        background-color: transparent;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover::before {
-          content: none;
+      opacity: 0.55;
+}
+.px-dropdown__menu .px-dropdown__item.is-disabled::before {
+        opacity: 0 !important;
+}
+.px-dropdown__menu .px-dropdown__item.is-disabled:hover,
+      .px-dropdown__menu .px-dropdown__item.is-disabled:focus {
+        color: var(--px-dropdown-menuItem-disabled-color);
+}
+.px-dropdown__menu .px-dropdown__item.is-disabled:hover::after, .px-dropdown__menu .px-dropdown__item.is-disabled:focus::after {
+          background-color: transparent;
+          box-shadow: none;
+}
+/* First item — top staircase corners on highlight layer */
+.px-dropdown__menu .px-dropdown__item:first-child::after {
+      top: 2px;
+      clip-path: polygon(
+        0 2px, 2px 2px, 2px 0, 4px 0,
+        calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
+        100% 100%,
+        0 100%
+      );
+}
+/* Last item — bottom staircase corners on highlight layer */
+.px-dropdown__menu .px-dropdown__item:last-child::after {
+      bottom: 2px;
+      clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
+        4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+      );
+}
+/* Single item — both top and bottom staircase corners */
+.px-dropdown__menu .px-dropdown__item:first-child:last-child::after {
+      top: 2px;
+      bottom: 2px;
+      clip-path: polygon(
+        0 2px, 2px 2px, 2px 0, 4px 0,
+        calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
+        100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
+        4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+      );
 }
 /* Size variants */
 .px-dropdown__menu .px-dropdown__item--large {
-    padding: 10px 20px;
-    line-height: 1.5;
+    padding: 10px 20px 10px 26px;
+    line-height: 26px;
     font-size: var(--px-font-size-large);
 }
-.px-dropdown__menu .px-dropdown__item--large:hover::before {
-      left: 8px;
+.px-dropdown__menu .px-dropdown__item--large::before {
+      left: 10px;
+      width: 8px;
+      height: 12px;
+      clip-path: polygon(
+        0 0, 2px 0,
+        2px 2px, 4px 2px,
+        4px 4px, 6px 4px,
+        6px 6px, 8px 6px,
+        8px 6px, 6px 6px,
+        6px 8px, 4px 8px,
+        4px 10px, 2px 10px,
+        2px 12px, 0 12px
+      );
 }
 .px-dropdown__menu .px-dropdown__item--small {
-    padding: 4px 12px;
-    line-height: 1.4;
+    padding: 5px 12px 5px 18px;
+    line-height: 18px;
     font-size: var(--px-font-size-small);
 }
-.px-dropdown__menu .px-dropdown__item--small:hover::before {
-      left: 4px;
+.px-dropdown__menu .px-dropdown__item--small::before {
+      left: 6px;
+      width: 4px;
+      height: 6px;
 }
-/* Divider - Pixel style dashed line */
+/* Divider - Pixel-dashed gradient line */
 .px-dropdown__menu .divided-placeholder {
-    margin: 6px 8px;
-    border-top: 2px dashed var(--px-dropdown-menuItem-divided-color);
-}
-.px-dropdown .px-button-group > :last-child {
+    margin: 4px 6px;
+    height: 2px;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-dropdown-menuItem-divided-color) 0px,
+      var(--px-dropdown-menuItem-divided-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+}
+.px-dropdown .px-button-group > :last-child {
   padding: 5px 7px;
-}
+}

package/dist/theme/FileInput.css

@@ -12,6 +12,18 @@
   --px-file-input-trigger-hover-bg-color: var(--px-fill-color-darker);
   --px-file-input-icon-color: var(--px-text-color-secondary);
   --px-file-input-clear-hover-color: var(--px-text-color-primary);
+
+  /* Raised bevel for trigger button (same as PxButton) */
+  --px-file-input-trigger-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-file-input-trigger-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+
+  /* Sunken bevel for filename area (same as PxInput) */
+  --px-file-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
+  --px-file-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
+
+  /* Hover-state bevel (slightly stronger) */
+  --px-file-input-trigger-hover-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
+  --px-file-input-trigger-hover-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
 }
 /* Base FileInput Styles */
 .px-file-input {
@@ -123,6 +135,12 @@
       0 calc(100% - 4px)
     );
     z-index: -1;
+    /* Sunken bevel on the filename area */
+    box-shadow: var(--px-file-input-inset-shadow), var(--px-file-input-inset-highlight);
+}
+.px-file-input__wrapper:hover {
+    transform: translate(-1px, -1px);
+    filter: drop-shadow(4px 4px 0px var(--px-file-input-shadow-color));
 }
 .px-file-input__wrapper:hover::before {
       background: var(--px-file-input-hover-border-color);
@@ -154,6 +172,9 @@
   border-right: 2px solid var(--px-file-input-border-color);
   user-select: none;
 
+  /* Raised bevel at rest */
+  box-shadow: var(--px-file-input-trigger-inset-highlight), var(--px-file-input-trigger-inset-shadow);
+
   /* Notch top-left and bottom-left corners to match the pixel staircase border */
   clip-path: polygon(
     0 2px,
@@ -168,6 +189,10 @@
 }
 .px-file-input__trigger:hover {
     background: var(--px-file-input-trigger-hover-bg-color);
+    box-shadow: var(--px-file-input-trigger-hover-highlight), var(--px-file-input-trigger-hover-shadow);
+}
+.px-file-input__trigger:active {
+    box-shadow: var(--px-file-input-trigger-inset-shadow), var(--px-file-input-trigger-inset-highlight);
 }
 /* File name display */
 .px-file-input__name {
@@ -363,3 +388,10 @@
 .px-file-input--danger.is-ghost .px-file-input__wrapper:hover {
         filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
 }
+/* Dark mode bevel adjustment */
+html.dark .px-file-input {
+  --px-file-input-trigger-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-file-input-trigger-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.3);
+  --px-file-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+  --px-file-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.05);
+}