sakana-element 2.4.2 → 2.5.0

package/dist/theme/FileInput.css

@@ -1,397 +1 @@
-/* FileInput Variables */
-.px-file-input {
-  --px-file-input-text-color: var(--px-text-color-primary);
-  --px-file-input-border-color: var(--px-border-color);
-  --px-file-input-hover-border-color: var(--px-hover-border-color);
-  --px-file-input-bg-color: var(--px-fill-color-blank);
-  --px-file-input-placeholder-color: var(--px-text-color-placeholder);
-  --px-file-input-shadow-color: var(--px-shadow-color);
-  --px-file-input-hover-shadow-color: var(--px-shadow-color);
-  --px-file-input-trigger-bg-color: var(--px-fill-color-dark);
-  --px-file-input-trigger-text-color: var(--px-text-color-primary);
-  --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 {
-  --px-file-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-file-input-height);
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-/* Disabled state */
-.px-file-input.is-disabled {
-    cursor: not-allowed;
-}
-.px-file-input.is-disabled .px-file-input__wrapper {
-      opacity: 0.6;
-      cursor: not-allowed;
-}
-.px-file-input.is-disabled .px-file-input__wrapper::before {
-        background: var(--px-disabled-border-color);
-}
-.px-file-input.is-disabled .px-file-input__wrapper::after {
-        background: var(--px-disabled-bg-color);
-}
-.px-file-input.is-disabled .px-file-input__trigger {
-      cursor: not-allowed;
-}
-.px-file-input.is-disabled .px-file-input__name {
-      color: var(--px-disabled-text-color);
-      cursor: not-allowed;
-}
-/* FileInput Wrapper - Main pixel-style container */
-.px-file-input__wrapper {
-  display: inline-flex;
-  flex-grow: 1;
-  align-items: center;
-  background: transparent;
-  border: none;
-  position: relative;
-  transition: none;
-  height: var(--px-file-input-height);
-  padding: 2px;
-  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-file-input-shadow-color)
-  );
-}
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-file-input__wrapper::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-file-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-file-input__wrapper::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-file-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)
-    );
-    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);
-}
-/* Hidden native file input */
-.px-file-input__native {
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-/* Trigger button */
-.px-file-input__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  padding: 0 12px;
-  background: var(--px-file-input-trigger-bg-color);
-  color: var(--px-file-input-trigger-text-color);
-  font-family: var(--px-font-family);
-  font-size: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  position: relative;
-  z-index: 1;
-  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,
-    2px 2px,
-    2px 0,
-    100% 0,
-    100% 100%,
-    2px 100%,
-    2px calc(100% - 2px),
-    0 calc(100% - 2px)
-  );
-}
-.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 {
-  flex: 1;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  color: var(--px-file-input-text-color);
-  font-family: var(--px-font-family);
-  font-size: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-  z-index: 1;
-}
-.px-file-input__name:only-of-type {
-    color: var(--px-file-input-placeholder-color);
-}
-/* Clear icon */
-.px-file-input__clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  padding-right: 8px;
-  color: var(--px-file-input-icon-color);
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-}
-.px-file-input__clear:hover {
-    color: var(--px-file-input-clear-hover-color);
-}
-/* Size variants */
-.px-file-input--large {
-  --px-file-input-height: 44px;
-  font-size: var(--px-font-size-large);
-}
-.px-file-input--large .px-file-input__trigger {
-    padding: 0 16px;
-}
-.px-file-input--small {
-  --px-file-input-height: 28px;
-  font-size: var(--px-font-size-small);
-}
-.px-file-input--small .px-file-input__wrapper {
-    filter: drop-shadow(2px 2px 0px var(--px-file-input-shadow-color));
-}
-.px-file-input--small .px-file-input__trigger {
-    padding: 0 8px;
-}
-.px-file-input--small .px-file-input__name {
-    padding: 0 8px;
-}
-/* Color variants */
-.px-file-input--primary {
-    --px-file-input-border-color: var(--px-color-primary);
-    --px-file-input-hover-border-color: var(--px-color-primary-dark);
-    --px-file-input-shadow-color: var(--px-color-primary-dark);
-}
-.px-file-input--primary .px-file-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
-}
-.px-file-input--primary .px-file-input__trigger {
-    border-right-color: var(--px-color-primary);
-}
-.px-file-input--success {
-    --px-file-input-border-color: var(--px-color-success);
-    --px-file-input-hover-border-color: var(--px-color-success-dark);
-    --px-file-input-shadow-color: var(--px-color-success-dark);
-}
-.px-file-input--success .px-file-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
-}
-.px-file-input--success .px-file-input__trigger {
-    border-right-color: var(--px-color-success);
-}
-.px-file-input--warning {
-    --px-file-input-border-color: var(--px-color-warning);
-    --px-file-input-hover-border-color: var(--px-color-warning-dark);
-    --px-file-input-shadow-color: var(--px-color-warning-dark);
-}
-.px-file-input--warning .px-file-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
-}
-.px-file-input--warning .px-file-input__trigger {
-    border-right-color: var(--px-color-warning);
-}
-.px-file-input--info {
-    --px-file-input-border-color: var(--px-color-info);
-    --px-file-input-hover-border-color: var(--px-color-info-dark);
-    --px-file-input-shadow-color: var(--px-color-info-dark);
-}
-.px-file-input--info .px-file-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
-}
-.px-file-input--info .px-file-input__trigger {
-    border-right-color: var(--px-color-info);
-}
-.px-file-input--danger {
-    --px-file-input-border-color: var(--px-color-danger);
-    --px-file-input-hover-border-color: var(--px-color-danger-dark);
-    --px-file-input-shadow-color: var(--px-color-danger-dark);
-}
-.px-file-input--danger .px-file-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
-}
-.px-file-input--danger .px-file-input__trigger {
-    border-right-color: var(--px-color-danger);
-}
-/* Ghost variant — no border/shadow at rest */
-.px-file-input.is-ghost .px-file-input__wrapper {
-    filter: none;
-}
-.px-file-input.is-ghost .px-file-input__wrapper::before { background: transparent;
-}
-.px-file-input.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-file-input-hover-border-color);
-}
-.px-file-input.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));
-}
-.px-file-input.is-ghost .px-file-input__trigger {
-    border-right-color: transparent;
-}
-.px-file-input.is-ghost:hover .px-file-input__trigger {
-    border-right-color: var(--px-file-input-hover-border-color);
-}
-/* Ghost + Color variants */
-.px-file-input--primary.is-ghost {
-    --px-file-input-hover-shadow-color: var(--px-color-primary-dark);
-}
-.px-file-input--primary.is-ghost .px-file-input__wrapper {
-      filter: none;
-}
-.px-file-input--primary.is-ghost .px-file-input__wrapper::before { background: transparent;
-}
-.px-file-input--primary.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-primary);
-}
-.px-file-input--primary.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));
-}
-.px-file-input--success.is-ghost {
-    --px-file-input-hover-shadow-color: var(--px-color-success-dark);
-}
-.px-file-input--success.is-ghost .px-file-input__wrapper {
-      filter: none;
-}
-.px-file-input--success.is-ghost .px-file-input__wrapper::before { background: transparent;
-}
-.px-file-input--success.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-success);
-}
-.px-file-input--success.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));
-}
-.px-file-input--warning.is-ghost {
-    --px-file-input-hover-shadow-color: var(--px-color-warning-dark);
-}
-.px-file-input--warning.is-ghost .px-file-input__wrapper {
-      filter: none;
-}
-.px-file-input--warning.is-ghost .px-file-input__wrapper::before { background: transparent;
-}
-.px-file-input--warning.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-warning);
-}
-.px-file-input--warning.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));
-}
-.px-file-input--info.is-ghost {
-    --px-file-input-hover-shadow-color: var(--px-color-info-dark);
-}
-.px-file-input--info.is-ghost .px-file-input__wrapper {
-      filter: none;
-}
-.px-file-input--info.is-ghost .px-file-input__wrapper::before { background: transparent;
-}
-.px-file-input--info.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-info);
-}
-.px-file-input--info.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));
-}
-.px-file-input--danger.is-ghost {
-    --px-file-input-hover-shadow-color: var(--px-color-danger-dark);
-}
-.px-file-input--danger.is-ghost .px-file-input__wrapper {
-      filter: none;
-}
-.px-file-input--danger.is-ghost .px-file-input__wrapper::before { background: transparent;
-}
-.px-file-input--danger.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-danger);
-}
-.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);
-}
+.px-form.is-inline[data-v-0e2bbb22]{flex-wrap:wrap;gap:0 16px;display:flex}.px-form.is-inline .px-form-item[data-v-0e2bbb22]{margin-bottom:12px}.px-form-item[data-v-0e2bbb22]{--px-form-item-error-border:var(--px-color-danger);--px-form-item-success-border:var(--px-color-success);border-left:4px solid #0000;flex-wrap:wrap;align-items:flex-start;margin-bottom:18px;padding-left:8px;display:flex;position:relative}.px-form-item__label[data-v-0e2bbb22]{vertical-align:middle;font-size:var(--px-font-size-base);color:var(--px-text-color-regular);box-sizing:border-box;width:var(--px-form-label-width,150px);text-align:right;flex-shrink:0;padding:0 12px 0 0;line-height:32px;display:inline-block}.px-form-item__content[data-v-0e2bbb22]{line-height:32px;font-size:var(--px-font-size-base);flex:1;min-width:0;position:relative}.px-form-item__error-msg[data-v-0e2bbb22]{color:var(--px-color-danger);font-size:var(--px-font-size-small);background:var(--px-color-danger-light-9);clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));padding:4px 8px;line-height:1;position:absolute;top:100%;left:0}.px-form-item.is-error[data-v-0e2bbb22]{border-left-color:var(--px-form-item-error-border)}.px-form-item.is-error .px-form-item__content[data-v-0e2bbb22]{background:var(--px-color-danger-light-9)}.px-form-item.is-error .px-input__wrapper[data-v-0e2bbb22]{border-color:var(--px-color-danger);filter:drop-shadow(2px 2px 0px var(--px-color-danger-dark))}.px-form-item.is-success[data-v-0e2bbb22]{border-left-color:var(--px-form-item-success-border)}.px-form-item.is-success .px-form-item__content[data-v-0e2bbb22]{background:var(--px-color-success-light-9)}.px-form-item.is-success .px-input__wrapper[data-v-0e2bbb22]{border-color:var(--px-color-success);filter:drop-shadow(2px 2px 0px var(--px-color-success-dark))}.px-form-item.is-required .px-form-item__label[data-v-0e2bbb22]:before{content:"";vertical-align:middle;background:var(--px-color-danger);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:8px;height:8px;margin-right:4px;display:inline-block}.px-form-item__input-wrap[data-v-0e2bbb22]{align-items:center;width:100%;display:inline-flex;position:relative}.px-form-item__status-icon[data-v-0e2bbb22]{z-index:1;filter:drop-shadow(1px 1px);position:absolute;right:8px}.px-form-item__status-icon.is-success[data-v-0e2bbb22]{color:var(--px-color-success)}.px-form-item__status-icon.is-error[data-v-0e2bbb22]{color:var(--px-color-danger)}.px-form-item[data-v-0e2bbb22]{--px-form-label-width:var(--ac9c6e38)!important}.px-file-input{--px-file-input-text-color:var(--px-text-color-primary);--px-file-input-border-color:var(--px-border-color);--px-file-input-hover-border-color:var(--px-hover-border-color);--px-file-input-bg-color:var(--px-fill-color-blank);--px-file-input-placeholder-color:var(--px-text-color-placeholder);--px-file-input-shadow-color:var(--px-shadow-color);--px-file-input-hover-shadow-color:var(--px-shadow-color);--px-file-input-trigger-bg-color:var(--px-fill-color-dark);--px-file-input-trigger-text-color:var(--px-text-color-primary);--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);--px-file-input-trigger-inset-highlight:inset 2px 2px 0 0 #fff3;--px-file-input-trigger-inset-shadow:inset -2px -2px 0 0 #0000001a;--px-file-input-inset-shadow:inset 2px 2px 0 0 #00000014;--px-file-input-inset-highlight:inset -2px -2px 0 0 #ffffff26;--px-file-input-trigger-hover-highlight:inset 2px 2px 0 0 #ffffff4d;--px-file-input-trigger-hover-shadow:inset -2px -2px 0 0 #0000001f;--px-file-input-height:36px;font-size:var(--px-font-size-base);font-family:var(--px-font-family);width:100%;line-height:var(--px-file-input-height);box-sizing:border-box;vertical-align:middle;display:inline-flex;position:relative}.px-file-input.is-disabled{cursor:not-allowed}.px-file-input.is-disabled .px-file-input__wrapper{opacity:.6;cursor:not-allowed}.px-file-input.is-disabled .px-file-input__wrapper:before{background:var(--px-disabled-border-color)}.px-file-input.is-disabled .px-file-input__wrapper:after{background:var(--px-disabled-bg-color)}.px-file-input.is-disabled .px-file-input__trigger{cursor:not-allowed}.px-file-input.is-disabled .px-file-input__name{color:var(--px-disabled-text-color);cursor:not-allowed}.px-file-input__wrapper{height:var(--px-file-input-height);box-sizing:border-box;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-shadow-color));background:0 0;border:none;flex-grow:1;align-items:center;padding:2px;transition:none;display:inline-flex;position:relative}.px-file-input__wrapper:before{content:"";background:var(--px-file-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;position:absolute;inset:0}.px-file-input__wrapper:after{content:"";background:var(--px-file-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));z-index:-1;box-shadow:var(--px-file-input-inset-shadow), var(--px-file-input-inset-highlight);position:absolute;inset:2px}.px-file-input__wrapper:hover{filter:drop-shadow(4px 4px 0px var(--px-file-input-shadow-color));transform:translate(-1px,-1px)}.px-file-input__wrapper:hover:before{background:var(--px-file-input-hover-border-color)}.px-file-input__native{opacity:0;pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.px-file-input__trigger{background:var(--px-file-input-trigger-bg-color);color:var(--px-file-input-trigger-text-color);font-family:var(--px-font-family);font-size:inherit;cursor:pointer;white-space:nowrap;z-index:1;border-right:2px solid var(--px-file-input-border-color);-webkit-user-select:none;user-select:none;box-shadow:var(--px-file-input-trigger-inset-highlight), var(--px-file-input-trigger-inset-shadow);clip-path:polygon(0 2px,2px 2px,2px 0,100% 0,100% 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));justify-content:center;align-self:stretch;align-items:center;padding:0 12px;display:inline-flex;position:relative}.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)}.px-file-input__name{color:var(--px-file-input-text-color);font-family:var(--px-font-family);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;z-index:1;flex:1;align-self:stretch;align-items:center;padding:0 12px;display:flex;position:relative;overflow:hidden}.px-file-input__name:only-of-type{color:var(--px-file-input-placeholder-color)}.px-file-input__clear{color:var(--px-file-input-icon-color);cursor:pointer;z-index:1;justify-content:center;align-self:stretch;align-items:center;padding-right:8px;display:flex;position:relative}.px-file-input__clear:hover{color:var(--px-file-input-clear-hover-color)}.px-file-input--large{--px-file-input-height:44px;font-size:var(--px-font-size-large)}.px-file-input--large .px-file-input__trigger{padding:0 16px}.px-file-input--small{--px-file-input-height:28px;font-size:var(--px-font-size-small)}.px-file-input--small .px-file-input__wrapper{filter:drop-shadow(2px 2px 0px var(--px-file-input-shadow-color))}.px-file-input--small .px-file-input__trigger,.px-file-input--small .px-file-input__name{padding:0 8px}.px-file-input--primary{--px-file-input-border-color:var(--px-color-primary);--px-file-input-hover-border-color:var(--px-color-primary-dark);--px-file-input-shadow-color:var(--px-color-primary-dark)}.px-file-input--primary .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-file-input--primary .px-file-input__trigger{border-right-color:var(--px-color-primary)}.px-file-input--success{--px-file-input-border-color:var(--px-color-success);--px-file-input-hover-border-color:var(--px-color-success-dark);--px-file-input-shadow-color:var(--px-color-success-dark)}.px-file-input--success .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-file-input--success .px-file-input__trigger{border-right-color:var(--px-color-success)}.px-file-input--warning{--px-file-input-border-color:var(--px-color-warning);--px-file-input-hover-border-color:var(--px-color-warning-dark);--px-file-input-shadow-color:var(--px-color-warning-dark)}.px-file-input--warning .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-file-input--warning .px-file-input__trigger{border-right-color:var(--px-color-warning)}.px-file-input--info{--px-file-input-border-color:var(--px-color-info);--px-file-input-hover-border-color:var(--px-color-info-dark);--px-file-input-shadow-color:var(--px-color-info-dark)}.px-file-input--info .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-file-input--info .px-file-input__trigger{border-right-color:var(--px-color-info)}.px-file-input--danger{--px-file-input-border-color:var(--px-color-danger);--px-file-input-hover-border-color:var(--px-color-danger-dark);--px-file-input-shadow-color:var(--px-color-danger-dark)}.px-file-input--danger .px-file-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}.px-file-input--danger .px-file-input__trigger{border-right-color:var(--px-color-danger)}.px-file-input.is-ghost .px-file-input__wrapper{filter:none}.px-file-input.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-file-input-hover-border-color)}.px-file-input.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))}.px-file-input.is-ghost .px-file-input__trigger{border-right-color:#0000}.px-file-input.is-ghost:hover .px-file-input__trigger{border-right-color:var(--px-file-input-hover-border-color)}.px-file-input--primary.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-primary-dark)}.px-file-input--primary.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--primary.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--primary.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-primary)}.px-file-input--primary.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))}.px-file-input--success.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-success-dark)}.px-file-input--success.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--success.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--success.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-success)}.px-file-input--success.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))}.px-file-input--warning.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-warning-dark)}.px-file-input--warning.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--warning.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--warning.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-warning)}.px-file-input--warning.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))}.px-file-input--info.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-info-dark)}.px-file-input--info.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--info.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--info.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-info)}.px-file-input--info.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))}.px-file-input--danger.is-ghost{--px-file-input-hover-shadow-color:var(--px-color-danger-dark)}.px-file-input--danger.is-ghost .px-file-input__wrapper{filter:none}.px-file-input--danger.is-ghost .px-file-input__wrapper:before{background:0 0}.px-file-input--danger.is-ghost .px-file-input__wrapper:hover:before{background:var(--px-color-danger)}.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))}html.dark .px-file-input{--px-file-input-trigger-inset-highlight:inset 2px 2px 0 0 #ffffff14;--px-file-input-trigger-inset-shadow:inset -2px -2px 0 0 #0000004d;--px-file-input-inset-shadow:inset 2px 2px 0 0 #0003;--px-file-input-inset-highlight:inset -2px -2px 0 0 #ffffff0d}