sakana-element 2.4.2 → 2.5.0

package/dist/theme/Notification.css

@@ -1,316 +1 @@
-/* Notification Variables */
-.px-notification[data-v-5c4c1be5] {
-  --px-notification-width: 330px;
-  --px-notification-padding: 14px 20px;
-  --px-notification-border-color: var(--px-border-color);
-  --px-notification-bg-color: var(--px-bg-color-overlay);
-  --px-notification-icon-size: 24px;
-  --px-notification-close-font-size: var(--px-font-size-base);
-  --px-notification-content-font-size: var(--px-font-size-base);
-  --px-notification-content-color: var(--px-text-color-regular);
-  --px-notification-title-font-size: var(--px-font-size-large);
-  --px-notification-title-color: var(--px-text-color-primary);
-  --px-notification-close-color: var(--px-text-color-secondary);
-  --px-notification-close-hover-color: var(--px-text-color-primary);
-  --px-notification-shadow-color: var(--px-shadow-color);
-  --px-notification-divider-color: var(--px-border-color-light);
-
-  /* Beveled inset for 3D raised-panel depth */
-  --px-notification-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-  --px-notification-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
-}
-/* Base Notification Styles - Pixel Game Aesthetic */
-.px-notification[data-v-5c4c1be5] {
-  display: flex;
-  width: var(--px-notification-width);
-  padding: var(--px-notification-padding);
-  box-sizing: border-box;
-  position: fixed;
-  overflow-wrap: anywhere;
-  overflow: hidden;
-  z-index: 9999;
-  font-family: var(--px-font-family);
-
-  /* Remove traditional styling — pseudo-elements handle visuals */
-  background: transparent;
-  border: none;
-
-  /* Pixel shadow via drop-shadow (respects clip-path shape) */
-  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-notification-shadow-color));
-
-  /* No smooth transitions for pixel feel */
-  transition: none;
-}
-/* Border layer — 3-step staircase clip (8px corners) */
-.px-notification[data-v-5c4c1be5]::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-notification-border-color);
-    clip-path: polygon(
-      0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
-      calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 8px, 100% 8px,
-      100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
-      8px 100%, 8px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 8px), 0 calc(100% - 8px)
-    );
-    z-index: 0;
-}
-/* Fill layer — 4px inset, 2-step staircase chamfer, beveled */
-.px-notification[data-v-5c4c1be5]::after {
-    content: '';
-    position: absolute;
-    inset: 4px;
-    background: var(--px-notification-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)
-    );
-    box-shadow: var(--px-notification-inset-highlight), var(--px-notification-inset-shadow);
-    z-index: 0;
-}
-.px-notification.right[data-v-5c4c1be5] {
-    right: 16px;
-}
-.px-notification.left[data-v-5c4c1be5] {
-    left: 16px;
-}
-.px-notification .px-notification__text[data-v-5c4c1be5] {
-    position: relative;
-    z-index: 1;
-    margin: 0 10px;
-    flex: 1;
-}
-.px-notification .px-notification__icon[data-v-5c4c1be5] {
-    position: relative;
-    z-index: 1;
-    height: var(--px-notification-icon-size);
-    width: var(--px-notification-icon-size);
-    font-size: var(--px-notification-icon-size);
-    color: var(--px-notification-icon-color);
-    flex-shrink: 0;
-}
-.px-notification .px-notification__title[data-v-5c4c1be5] {
-    position: relative;
-    z-index: 1;
-    font-weight: 500;
-    font-size: var(--px-notification-title-font-size);
-    font-family: var(--px-font-family);
-    line-height: var(--px-notification-icon-size);
-    color: var(--px-notification-title-color);
-    margin: 0;
-    padding-bottom: 8px;
-}
-/* Pixel-dashed divider at bottom */
-.px-notification .px-notification__title[data-v-5c4c1be5]::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background-image: repeating-linear-gradient(
-        to right,
-        var(--px-notification-divider-color) 0px,
-        var(--px-notification-divider-color) 6px,
-        transparent 6px,
-        transparent 12px
-      );
-}
-.px-notification .px-notification__content[data-v-5c4c1be5] {
-    position: relative;
-    z-index: 1;
-    font-size: var(--px-notification-content-font-size);
-    font-family: var(--px-font-family);
-    line-height: 1.5;
-    margin: 8px 0 0;
-    color: var(--px-notification-content-color);
-    text-align: left;
-}
-.px-notification .px-notification__close[data-v-5c4c1be5] {
-    position: absolute;
-    top: 14px;
-    right: 14px;
-    cursor: pointer;
-    color: var(--px-notification-close-color);
-    font-size: var(--px-notification-close-font-size);
-    z-index: 1;
-    transition: none;
-}
-.px-notification .px-notification__close .px-icon[data-v-5c4c1be5] {
-      cursor: pointer;
-      transition: none;
-}
-.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]:hover {
-        color: var(--px-notification-close-hover-color);
-        transform: translate(-1px, -1px);
-}
-.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]:active {
-        transform: translate(1px, 1px);
-}
-/* Map error type to danger color palette so @each loops handle both */
-.px-notification--error[data-v-5c4c1be5] {
-  --px-color-error: var(--px-color-danger);
-  --px-color-error-dark: var(--px-color-danger-dark);
-  --px-color-error-light-5: var(--px-color-danger-light-5);
-  --px-color-error-light-9: var(--px-color-danger-light-9);
-}
-/* Type variants with colored borders and shadows */
-.px-notification--info[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-info);
-    --px-notification-border-color: var(--px-color-info);
-    --px-notification-shadow-color: var(--px-color-info-dark);
-    --px-notification-divider-color: var(--px-color-info-light-5, var(--px-color-info));
-}
-.px-notification--success[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-success);
-    --px-notification-border-color: var(--px-color-success);
-    --px-notification-shadow-color: var(--px-color-success-dark);
-    --px-notification-divider-color: var(--px-color-success-light-5, var(--px-color-success));
-}
-.px-notification--warning[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-warning);
-    --px-notification-border-color: var(--px-color-warning);
-    --px-notification-shadow-color: var(--px-color-warning-dark);
-    --px-notification-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
-}
-.px-notification--danger[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-danger);
-    --px-notification-border-color: var(--px-color-danger);
-    --px-notification-shadow-color: var(--px-color-danger-dark);
-    --px-notification-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
-}
-.px-notification--error[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-error);
-    --px-notification-border-color: var(--px-color-error);
-    --px-notification-shadow-color: var(--px-color-error-dark);
-    --px-notification-divider-color: var(--px-color-error-light-5, var(--px-color-error));
-}
-/* ─── Plain variant ─── */
-.px-notification.is-plain[data-v-5c4c1be5] {
-  --px-notification-shadow-color: var(--px-border-color-light);
-  --px-notification-bg-color: var(--px-fill-color-blank);
-}
-.px-notification--info.is-plain[data-v-5c4c1be5] {
-    --px-notification-bg-color: var(--px-color-info-light-9);
-    --px-notification-border-color: var(--px-color-info-light-5, var(--px-color-info));
-    --px-notification-icon-color: var(--px-color-info);
-    --px-notification-title-color: var(--px-color-info-dark);
-    --px-notification-content-color: var(--px-color-info);
-    --px-notification-shadow-color: var(--px-color-info-light-5, var(--px-color-info));
-    --px-notification-divider-color: var(--px-color-info-light-5, var(--px-color-info));
-}
-.px-notification--success.is-plain[data-v-5c4c1be5] {
-    --px-notification-bg-color: var(--px-color-success-light-9);
-    --px-notification-border-color: var(--px-color-success-light-5, var(--px-color-success));
-    --px-notification-icon-color: var(--px-color-success);
-    --px-notification-title-color: var(--px-color-success-dark);
-    --px-notification-content-color: var(--px-color-success);
-    --px-notification-shadow-color: var(--px-color-success-light-5, var(--px-color-success));
-    --px-notification-divider-color: var(--px-color-success-light-5, var(--px-color-success));
-}
-.px-notification--warning.is-plain[data-v-5c4c1be5] {
-    --px-notification-bg-color: var(--px-color-warning-light-9);
-    --px-notification-border-color: var(--px-color-warning-light-5, var(--px-color-warning));
-    --px-notification-icon-color: var(--px-color-warning);
-    --px-notification-title-color: var(--px-color-warning-dark);
-    --px-notification-content-color: var(--px-color-warning);
-    --px-notification-shadow-color: var(--px-color-warning-light-5, var(--px-color-warning));
-    --px-notification-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
-}
-.px-notification--danger.is-plain[data-v-5c4c1be5] {
-    --px-notification-bg-color: var(--px-color-danger-light-9);
-    --px-notification-border-color: var(--px-color-danger-light-5, var(--px-color-danger));
-    --px-notification-icon-color: var(--px-color-danger);
-    --px-notification-title-color: var(--px-color-danger-dark);
-    --px-notification-content-color: var(--px-color-danger);
-    --px-notification-shadow-color: var(--px-color-danger-light-5, var(--px-color-danger));
-    --px-notification-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
-}
-.px-notification--error.is-plain[data-v-5c4c1be5] {
-    --px-notification-bg-color: var(--px-color-error-light-9);
-    --px-notification-border-color: var(--px-color-error-light-5, var(--px-color-error));
-    --px-notification-icon-color: var(--px-color-error);
-    --px-notification-title-color: var(--px-color-error-dark);
-    --px-notification-content-color: var(--px-color-error);
-    --px-notification-shadow-color: var(--px-color-error-light-5, var(--px-color-error));
-    --px-notification-divider-color: var(--px-color-error-light-5, var(--px-color-error));
-}
-/* ─── Ghost variant ─── */
-.px-notification.is-ghost[data-v-5c4c1be5] {
-  --px-notification-bg-color: var(--px-fill-color-blank);
-  --px-notification-shadow-color: transparent;
-  filter: none;
-}
-.px-notification.is-ghost[data-v-5c4c1be5]::before, .px-notification.is-ghost[data-v-5c4c1be5]::after { display: none;
-}
-.px-notification--info.is-ghost[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-info);
-    --px-notification-title-color: var(--px-color-info-dark);
-    --px-notification-content-color: var(--px-color-info);
-}
-.px-notification--success.is-ghost[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-success);
-    --px-notification-title-color: var(--px-color-success-dark);
-    --px-notification-content-color: var(--px-color-success);
-}
-.px-notification--warning.is-ghost[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-warning);
-    --px-notification-title-color: var(--px-color-warning-dark);
-    --px-notification-content-color: var(--px-color-warning);
-}
-.px-notification--danger.is-ghost[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-danger);
-    --px-notification-title-color: var(--px-color-danger-dark);
-    --px-notification-content-color: var(--px-color-danger);
-}
-.px-notification--error.is-ghost[data-v-5c4c1be5] {
-    --px-notification-icon-color: var(--px-color-error);
-    --px-notification-title-color: var(--px-color-error-dark);
-    --px-notification-content-color: var(--px-color-error);
-}
-/* ─── Timer bar ─── */
-.px-notification__timer[data-v-5c4c1be5] {
-  position: absolute;
-  bottom: 4px;
-  left: 8px;
-  right: 8px;
-  height: 2px;
-  z-index: 1;
-  background: var(--px-notification-icon-color, var(--px-text-color-secondary));
-  opacity: 0.5;
-  animation: px-notification-timer-5c4c1be5 linear forwards;
-  transform-origin: left;
-}
-/* Pause timer bar animation when notification is hovered (matches JS timer pause) */
-.px-notification:hover .px-notification__timer[data-v-5c4c1be5] {
-  animation-play-state: paused;
-}
-@keyframes px-notification-timer-5c4c1be5 {
-0% { transform: scaleX(1);
-}
-100% { transform: scaleX(0);
-}
-}
-/* Dark mode — invert bevel highlights */
-.px-dark .px-notification[data-v-5c4c1be5] {
-  --px-notification-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
-  --px-notification-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
-}
-/* Animation */
-.px-notification-fade-enter-from.right[data-v-5c4c1be5] {
-    right: 0;
-    transform: translateX(100%);
-}
-.px-notification-fade-enter-from.left[data-v-5c4c1be5] {
-    left: 0;
-    transform: translateX(-100%);
-}
-.px-notification-fade-leave-to[data-v-5c4c1be5] {
-  opacity: 0;
-}
-.px-notification-fade-enter-active[data-v-5c4c1be5],
-.px-notification-fade-leave-active[data-v-5c4c1be5] {
-  transition: opacity 0.15s steps(3), transform 0.15s steps(3);
-}
+.px-notification[data-v-5c4c1be5]{--px-notification-width:330px;--px-notification-padding:14px 20px;--px-notification-border-color:var(--px-border-color);--px-notification-bg-color:var(--px-bg-color-overlay);--px-notification-icon-size:24px;--px-notification-close-font-size:var(--px-font-size-base);--px-notification-content-font-size:var(--px-font-size-base);--px-notification-content-color:var(--px-text-color-regular);--px-notification-title-font-size:var(--px-font-size-large);--px-notification-title-color:var(--px-text-color-primary);--px-notification-close-color:var(--px-text-color-secondary);--px-notification-close-hover-color:var(--px-text-color-primary);--px-notification-shadow-color:var(--px-shadow-color);--px-notification-divider-color:var(--px-border-color-light);--px-notification-inset-highlight:inset 2px 2px 0 0 #ffffff59;--px-notification-inset-shadow:inset -2px -2px 0 0 #00000014;width:var(--px-notification-width);padding:var(--px-notification-padding);box-sizing:border-box;overflow-wrap:anywhere;z-index:9999;font-family:var(--px-font-family);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-notification-shadow-color));background:0 0;border:none;transition:none;display:flex;position:fixed;overflow:hidden}.px-notification[data-v-5c4c1be5]:before{content:"";background:var(--px-notification-border-color);clip-path:polygon(0 8px,2px 8px,2px 4px,4px 4px,4px 2px,8px 2px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,calc(100% - 2px) 4px,calc(100% - 2px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 2px) calc(100% - 8px),calc(100% - 2px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),calc(100% - 8px) calc(100% - 2px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),2px calc(100% - 4px),2px calc(100% - 8px),0 calc(100% - 8px));z-index:0;position:absolute;inset:0}.px-notification[data-v-5c4c1be5]:after{content:"";background:var(--px-notification-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));box-shadow:var(--px-notification-inset-highlight), var(--px-notification-inset-shadow);z-index:0;position:absolute;inset:4px}.px-notification.right[data-v-5c4c1be5]{right:16px}.px-notification.left[data-v-5c4c1be5]{left:16px}.px-notification .px-notification__text[data-v-5c4c1be5]{z-index:1;flex:1;margin:0 10px;position:relative}.px-notification .px-notification__icon[data-v-5c4c1be5]{z-index:1;height:var(--px-notification-icon-size);width:var(--px-notification-icon-size);font-size:var(--px-notification-icon-size);color:var(--px-notification-icon-color);flex-shrink:0;position:relative}.px-notification .px-notification__title[data-v-5c4c1be5]{z-index:1;font-weight:500;font-size:var(--px-notification-title-font-size);font-family:var(--px-font-family);line-height:var(--px-notification-icon-size);color:var(--px-notification-title-color);margin:0;padding-bottom:8px;position:relative}.px-notification .px-notification__title[data-v-5c4c1be5]:after{content:"";background-image:repeating-linear-gradient(to right, var(--px-notification-divider-color) 0px, var(--px-notification-divider-color) 6px, transparent 6px, transparent 12px);height:2px;position:absolute;bottom:0;left:0;right:0}.px-notification .px-notification__content[data-v-5c4c1be5]{z-index:1;font-size:var(--px-notification-content-font-size);font-family:var(--px-font-family);color:var(--px-notification-content-color);text-align:left;margin:8px 0 0;line-height:1.5;position:relative}.px-notification .px-notification__close[data-v-5c4c1be5]{cursor:pointer;color:var(--px-notification-close-color);font-size:var(--px-notification-close-font-size);z-index:1;transition:none;position:absolute;top:14px;right:14px}.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]{cursor:pointer;transition:none}.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]:hover{color:var(--px-notification-close-hover-color);transform:translate(-1px,-1px)}.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]:active{transform:translate(1px,1px)}.px-notification--error[data-v-5c4c1be5]{--px-color-error:var(--px-color-danger);--px-color-error-dark:var(--px-color-danger-dark);--px-color-error-light-5:var(--px-color-danger-light-5);--px-color-error-light-9:var(--px-color-danger-light-9)}.px-notification--info[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-info);--px-notification-border-color:var(--px-color-info);--px-notification-shadow-color:var(--px-color-info-dark);--px-notification-divider-color:var(--px-color-info-light-5,var(--px-color-info))}.px-notification--success[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-success);--px-notification-border-color:var(--px-color-success);--px-notification-shadow-color:var(--px-color-success-dark);--px-notification-divider-color:var(--px-color-success-light-5,var(--px-color-success))}.px-notification--warning[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-warning);--px-notification-border-color:var(--px-color-warning);--px-notification-shadow-color:var(--px-color-warning-dark);--px-notification-divider-color:var(--px-color-warning-light-5,var(--px-color-warning))}.px-notification--danger[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-danger);--px-notification-border-color:var(--px-color-danger);--px-notification-shadow-color:var(--px-color-danger-dark);--px-notification-divider-color:var(--px-color-danger-light-5,var(--px-color-danger))}.px-notification--error[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-error);--px-notification-border-color:var(--px-color-error);--px-notification-shadow-color:var(--px-color-error-dark);--px-notification-divider-color:var(--px-color-error-light-5,var(--px-color-error))}.px-notification.is-plain[data-v-5c4c1be5]{--px-notification-shadow-color:var(--px-border-color-light);--px-notification-bg-color:var(--px-fill-color-blank)}.px-notification--info.is-plain[data-v-5c4c1be5]{--px-notification-bg-color:var(--px-color-info-light-9);--px-notification-border-color:var(--px-color-info-light-5,var(--px-color-info));--px-notification-icon-color:var(--px-color-info);--px-notification-title-color:var(--px-color-info-dark);--px-notification-content-color:var(--px-color-info);--px-notification-shadow-color:var(--px-color-info-light-5,var(--px-color-info));--px-notification-divider-color:var(--px-color-info-light-5,var(--px-color-info))}.px-notification--success.is-plain[data-v-5c4c1be5]{--px-notification-bg-color:var(--px-color-success-light-9);--px-notification-border-color:var(--px-color-success-light-5,var(--px-color-success));--px-notification-icon-color:var(--px-color-success);--px-notification-title-color:var(--px-color-success-dark);--px-notification-content-color:var(--px-color-success);--px-notification-shadow-color:var(--px-color-success-light-5,var(--px-color-success));--px-notification-divider-color:var(--px-color-success-light-5,var(--px-color-success))}.px-notification--warning.is-plain[data-v-5c4c1be5]{--px-notification-bg-color:var(--px-color-warning-light-9);--px-notification-border-color:var(--px-color-warning-light-5,var(--px-color-warning));--px-notification-icon-color:var(--px-color-warning);--px-notification-title-color:var(--px-color-warning-dark);--px-notification-content-color:var(--px-color-warning);--px-notification-shadow-color:var(--px-color-warning-light-5,var(--px-color-warning));--px-notification-divider-color:var(--px-color-warning-light-5,var(--px-color-warning))}.px-notification--danger.is-plain[data-v-5c4c1be5]{--px-notification-bg-color:var(--px-color-danger-light-9);--px-notification-border-color:var(--px-color-danger-light-5,var(--px-color-danger));--px-notification-icon-color:var(--px-color-danger);--px-notification-title-color:var(--px-color-danger-dark);--px-notification-content-color:var(--px-color-danger);--px-notification-shadow-color:var(--px-color-danger-light-5,var(--px-color-danger));--px-notification-divider-color:var(--px-color-danger-light-5,var(--px-color-danger))}.px-notification--error.is-plain[data-v-5c4c1be5]{--px-notification-bg-color:var(--px-color-error-light-9);--px-notification-border-color:var(--px-color-error-light-5,var(--px-color-error));--px-notification-icon-color:var(--px-color-error);--px-notification-title-color:var(--px-color-error-dark);--px-notification-content-color:var(--px-color-error);--px-notification-shadow-color:var(--px-color-error-light-5,var(--px-color-error));--px-notification-divider-color:var(--px-color-error-light-5,var(--px-color-error))}.px-notification.is-ghost[data-v-5c4c1be5]{--px-notification-bg-color:var(--px-fill-color-blank);--px-notification-shadow-color:transparent;filter:none}.px-notification.is-ghost[data-v-5c4c1be5]:before,.px-notification.is-ghost[data-v-5c4c1be5]:after{display:none}.px-notification--info.is-ghost[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-info);--px-notification-title-color:var(--px-color-info-dark);--px-notification-content-color:var(--px-color-info)}.px-notification--success.is-ghost[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-success);--px-notification-title-color:var(--px-color-success-dark);--px-notification-content-color:var(--px-color-success)}.px-notification--warning.is-ghost[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-warning);--px-notification-title-color:var(--px-color-warning-dark);--px-notification-content-color:var(--px-color-warning)}.px-notification--danger.is-ghost[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-danger);--px-notification-title-color:var(--px-color-danger-dark);--px-notification-content-color:var(--px-color-danger)}.px-notification--error.is-ghost[data-v-5c4c1be5]{--px-notification-icon-color:var(--px-color-error);--px-notification-title-color:var(--px-color-error-dark);--px-notification-content-color:var(--px-color-error)}.px-notification__timer[data-v-5c4c1be5]{z-index:1;background:var(--px-notification-icon-color,var(--px-text-color-secondary));opacity:.5;transform-origin:0;height:2px;animation:linear forwards px-notification-timer-5c4c1be5;position:absolute;bottom:4px;left:8px;right:8px}.px-notification:hover .px-notification__timer[data-v-5c4c1be5]{animation-play-state:paused}@keyframes px-notification-timer-5c4c1be5{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.px-dark .px-notification[data-v-5c4c1be5]{--px-notification-inset-highlight:inset 2px 2px 0 0 #ffffff1a;--px-notification-inset-shadow:inset -2px -2px 0 0 #00000040}.px-notification-fade-enter-from.right[data-v-5c4c1be5]{right:0;transform:translate(100%)}.px-notification-fade-enter-from.left[data-v-5c4c1be5]{left:0;transform:translate(-100%)}.px-notification-fade-leave-to[data-v-5c4c1be5]{opacity:0}.px-notification-fade-enter-active[data-v-5c4c1be5],.px-notification-fade-leave-active[data-v-5c4c1be5]{transition:opacity .15s steps(3,end),transform .15s steps(3,end)}

package/dist/theme/Popconfirm.css

@@ -1,46 +1 @@
-/* Popconfirm Variables */
-.px-popconfirm[data-v-68772965] {
-  --px-popconfirm-icon-size: 16px;
-  --px-popconfirm-font-size: var(--px-font-size-base);
-}
-/* Base Popconfirm Styles - Pixel Dialog */
-.px-popconfirm[data-v-68772965] {
-  font-family: var(--px-font-family);
-}
-.px-popconfirm .px-popconfirm__main[data-v-68772965] {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    font-size: var(--px-popconfirm-font-size);
-    color: inherit;
-    line-height: 1.5;
-}
-.px-popconfirm .px-popconfirm__main i[data-v-68772965] {
-      font-size: var(--px-popconfirm-icon-size);
-      flex-shrink: 0;
-      margin-top: 2px;
-}
-.px-popconfirm .px-popconfirm__action[data-v-68772965] {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 12px;
-    padding-top: 12px;
-    position: relative;
-}
-/* Pixel-dashed divider */
-.px-popconfirm .px-popconfirm__action[data-v-68772965]::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background-image: repeating-linear-gradient(
-        to right,
-        var(--px-border-color-lighter) 0px,
-        var(--px-border-color-lighter) 6px,
-        transparent 6px,
-        transparent 12px
-      );
-}
+.px-popconfirm[data-v-68772965]{--px-popconfirm-icon-size:16px;--px-popconfirm-font-size:var(--px-font-size-base);font-family:var(--px-font-family)}.px-popconfirm .px-popconfirm__main[data-v-68772965]{font-size:var(--px-popconfirm-font-size);color:inherit;align-items:flex-start;gap:8px;line-height:1.5;display:flex}.px-popconfirm .px-popconfirm__main i[data-v-68772965]{font-size:var(--px-popconfirm-icon-size);flex-shrink:0;margin-top:2px}.px-popconfirm .px-popconfirm__action[data-v-68772965]{justify-content:flex-end;gap:8px;margin-top:12px;padding-top:12px;display:flex;position:relative}.px-popconfirm .px-popconfirm__action[data-v-68772965]:before{content:"";background-image:repeating-linear-gradient(to right, var(--px-border-color-lighter) 0px, var(--px-border-color-lighter) 6px, transparent 6px, transparent 12px);height:2px;position:absolute;top:0;left:0;right:0}

package/dist/theme/Progress.css

@@ -1,278 +1 @@
-/* Progress Variables */
-.px-progress {
-  --px-progress-height: 14px;
-  --px-progress-fill-color: var(--px-color-primary);
-  --px-progress-fill-border-color: var(--px-color-primary-dark);
-  --px-progress-track-bg-color: var(--px-fill-color-blank);
-  --px-progress-track-border-color: var(--px-border-color-dark);
-  --px-progress-text-color: var(--px-text-color-primary);
-  --px-progress-shadow-color: var(--px-color-primary-dark);
-  --px-progress-text-size: var(--px-font-size-small);
-  --px-progress-text-gap: 10px;
-
-  /* Pixel-art chunked fill */
-  --px-progress-chunk-width: 8px;
-  --px-progress-chunk-gap: 2px;
-
-  /* Beveled 3D depth on fill bar */
-  --px-progress-fill-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.35);
-  --px-progress-fill-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.15);
-}
-/* Base Progress Styles */
-.px-progress {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  line-height: 1;
-  font-family: var(--px-font-family);
-}
-/* Track — the outer container */
-.px-progress__track {
-  flex: 1;
-  height: var(--px-progress-height);
-  position: relative;
-  background: transparent;
-  border: none;
-  overflow: hidden;
-  padding: 2px;
-  box-sizing: border-box;
-
-  /* Clip all children (including fill bar) to the pixel-art border shape */
-  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)
-  );
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-progress-shadow-color));
-}
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-progress__track::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-progress-track-border-color);
-    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)
-    );
-    z-index: 0;
-}
-/* Fill layer — recessed pixel container with subtle grid texture */
-.px-progress__track::after {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background:
-      /* Simulated inset shadow — top edge darker */
-      linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0, transparent 2px),
-      /* Simulated inset shadow — left edge darker */
-      linear-gradient(to right, rgba(0, 0, 0, 0.10) 0, transparent 2px),
-      /* Simulated inset shadow — bottom edge lighter */
-      linear-gradient(to top, rgba(255, 255, 255, 0.06) 0, transparent 2px),
-      /* Simulated inset shadow — right edge lighter */
-      linear-gradient(to left, rgba(255, 255, 255, 0.06) 0, transparent 2px),
-      /* Subtle vertical pixel-dot pattern */
-      repeating-linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.04) 0,
-        rgba(0, 0, 0, 0.04) 2px,
-        transparent 2px,
-        transparent 4px
-      ),
-      /* Base track color */
-      var(--px-progress-track-bg-color);
-    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)
-    );
-    z-index: 0;
-}
-/* Fill bar — chunked pixel-block inner bar */
-.px-progress__fill {
-  height: 100%;
-  position: relative;
-  z-index: 1;
-  transition: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-
-  /* Segmented chunked fill using repeating gradient */
-  background: repeating-linear-gradient(
-    to right,
-    var(--px-progress-fill-color) 0,
-    var(--px-progress-fill-color) var(--px-progress-chunk-width),
-    transparent var(--px-progress-chunk-width),
-    transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap))
-  );
-
-  /* Beveled 3D depth — raised-panel highlight/shadow */
-  box-shadow:
-    var(--px-progress-fill-highlight),
-    var(--px-progress-fill-shadow);
-}
-/* Inner text */
-.px-progress__inner-text {
-  padding: 0 4px;
-  font-size: 10px;
-  font-family: var(--px-font-family);
-  color: var(--px-color-white);
-  white-space: nowrap;
-  line-height: var(--px-progress-height);
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
-}
-/* External text */
-.px-progress__text {
-  flex-shrink: 0;
-  margin-left: var(--px-progress-text-gap);
-  font-size: var(--px-progress-text-size);
-  font-family: var(--px-font-family);
-  color: var(--px-progress-text-color);
-  white-space: nowrap;
-  min-width: 36px;
-}
-/* ─── Type variants ─── */
-.px-progress--primary {
-    --px-progress-fill-color: var(--px-color-primary);
-    --px-progress-fill-border-color: var(--px-color-primary-dark);
-    --px-progress-shadow-color: var(--px-color-primary-dark);
-    --px-progress-text-color: var(--px-color-primary-dark);
-}
-.px-progress--success {
-    --px-progress-fill-color: var(--px-color-success);
-    --px-progress-fill-border-color: var(--px-color-success-dark);
-    --px-progress-shadow-color: var(--px-color-success-dark);
-    --px-progress-text-color: var(--px-color-success-dark);
-}
-.px-progress--info {
-    --px-progress-fill-color: var(--px-color-info);
-    --px-progress-fill-border-color: var(--px-color-info-dark);
-    --px-progress-shadow-color: var(--px-color-info-dark);
-    --px-progress-text-color: var(--px-color-info-dark);
-}
-.px-progress--warning {
-    --px-progress-fill-color: var(--px-color-warning);
-    --px-progress-fill-border-color: var(--px-color-warning-dark);
-    --px-progress-shadow-color: var(--px-color-warning-dark);
-    --px-progress-text-color: var(--px-color-warning-dark);
-}
-.px-progress--danger {
-    --px-progress-fill-color: var(--px-color-danger);
-    --px-progress-fill-border-color: var(--px-color-danger-dark);
-    --px-progress-shadow-color: var(--px-color-danger-dark);
-    --px-progress-text-color: var(--px-color-danger-dark);
-}
-/* ─── Status overrides (override type) ─── */
-.px-progress--success.px-progress--success {
-  --px-progress-fill-color: var(--px-color-success);
-  --px-progress-fill-border-color: var(--px-color-success-dark);
-  --px-progress-shadow-color: var(--px-color-success-dark);
-  --px-progress-text-color: var(--px-color-success-dark);
-}
-.px-progress--warning.px-progress--warning {
-  --px-progress-fill-color: var(--px-color-warning);
-  --px-progress-fill-border-color: var(--px-color-warning-dark);
-  --px-progress-shadow-color: var(--px-color-warning-dark);
-  --px-progress-text-color: var(--px-color-warning-dark);
-}
-.px-progress--danger.px-progress--danger {
-  --px-progress-fill-color: var(--px-color-danger);
-  --px-progress-fill-border-color: var(--px-color-danger-dark);
-  --px-progress-shadow-color: var(--px-color-danger-dark);
-  --px-progress-text-color: var(--px-color-danger-dark);
-}
-/* ─── Size variants ─── */
-.px-progress--large {
-  --px-progress-height: 20px;
-  --px-progress-text-size: var(--px-font-size-base);
-  --px-progress-chunk-width: 10px;
-}
-.px-progress--small {
-  --px-progress-height: 8px;
-  --px-progress-text-size: var(--px-font-size-extra-small);
-  --px-progress-chunk-width: 6px;
-}
-/* ─── Striped variant ─── */
-.px-progress--striped .px-progress__fill {
-  background:
-    /* Diagonal stripe overlay (top layer) */
-    repeating-linear-gradient(
-      -45deg,
-      transparent,
-      transparent 4px,
-      rgba(255, 255, 255, 0.25) 4px,
-      rgba(255, 255, 255, 0.25) 8px
-    ),
-    /* Chunked fill underneath (bottom layer) */
-    repeating-linear-gradient(
-      to right,
-      var(--px-progress-fill-color) 0,
-      var(--px-progress-fill-color) var(--px-progress-chunk-width),
-      transparent var(--px-progress-chunk-width),
-      transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap))
-    );
-  background-size: 16px 16px, auto;
-}
-/* Striped flow animation */
-.px-progress.is-striped-flow .px-progress__fill {
-  animation: px-progress-striped-flow 0.6s steps(4) infinite;
-}
-@keyframes px-progress-striped-flow {
-0% { background-position: 0 0, 0 0;
-}
-100% { background-position: 16px 0, 0 0;
-}
-}
-/* ─── Checkered variant ─── */
-.px-progress--checkered .px-progress__fill {
-  background:
-    /* Checkerboard overlay (4 gradient layers) */
-    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
-    linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.2) 75%),
-    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.2) 75%),
-    /* Chunked fill (bottom layer) */
-    repeating-linear-gradient(
-      to right,
-      var(--px-progress-fill-color) 0,
-      var(--px-progress-fill-color) var(--px-progress-chunk-width),
-      transparent var(--px-progress-chunk-width),
-      transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap))
-    );
-  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, auto;
-  background-position: 0 0, 0 2px, 2px -2px, -2px 0px, 0 0;
-}
-/* ─── Indeterminate animation ─── */
-.px-progress.is-indeterminate .px-progress__fill {
-  width: 30% !important;
-  animation:
-    px-progress-indeterminate 1.2s steps(8) infinite,
-    px-progress-chunk-pulse 0.6s steps(2) infinite;
-}
-@keyframes px-progress-indeterminate {
-0% { margin-left: 0;
-}
-50% { margin-left: 70%;
-}
-100% { margin-left: 0;
-}
-}
-@keyframes px-progress-chunk-pulse {
-0%, 100% { opacity: 1;
-}
-50% { opacity: 0.7;
-}
-}
-/* ─── Text inside ─── */
-.px-progress.is-text-inside {
-  --px-progress-height: 20px;
-  --px-progress-chunk-width: 10px;
-}
+.px-progress{--px-progress-height:14px;--px-progress-fill-color:var(--px-color-primary);--px-progress-fill-border-color:var(--px-color-primary-dark);--px-progress-track-bg-color:var(--px-fill-color-blank);--px-progress-track-border-color:var(--px-border-color-dark);--px-progress-text-color:var(--px-text-color-primary);--px-progress-shadow-color:var(--px-color-primary-dark);--px-progress-text-size:var(--px-font-size-small);--px-progress-text-gap:10px;--px-progress-chunk-width:8px;--px-progress-chunk-gap:2px;--px-progress-fill-highlight:inset 1px 1px 0 0 #ffffff59;--px-progress-fill-shadow:inset -1px -1px 0 0 #00000026;width:100%;line-height:1;font-family:var(--px-font-family);align-items:center;display:flex}.px-progress__track{height:var(--px-progress-height);box-sizing:border-box;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));filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-progress-shadow-color));background:0 0;border:none;flex:1;padding:2px;position:relative;overflow:hidden}.px-progress__track:before{content:"";background:var(--px-progress-track-border-color);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));z-index:0;position:absolute;inset:0}.px-progress__track:after{content:"";background: linear-gradient(to bottom, #0000001a 0, transparent 2px),  linear-gradient(to right, #0000001a 0, transparent 2px),  linear-gradient(to top, #ffffff0f 0, transparent 2px),  linear-gradient(to left, #ffffff0f 0, transparent 2px),  repeating-linear-gradient(to right, #0000000a 0, #0000000a 2px, transparent 2px, transparent 4px),  var(--px-progress-track-bg-color);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));z-index:0;position:absolute;inset:2px}.px-progress__fill{z-index:1;box-sizing:border-box;background:repeating-linear-gradient(to right, var(--px-progress-fill-color) 0, var(--px-progress-fill-color) var(--px-progress-chunk-width), transparent var(--px-progress-chunk-width), transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap)));height:100%;box-shadow:var(--px-progress-fill-highlight), var(--px-progress-fill-shadow);justify-content:flex-end;align-items:center;transition:none;display:flex;position:relative}.px-progress__inner-text{font-size:10px;font-family:var(--px-font-family);color:var(--px-color-white);white-space:nowrap;line-height:var(--px-progress-height);text-shadow:1px 1px #00000080;padding:0 4px}.px-progress__text{margin-left:var(--px-progress-text-gap);font-size:var(--px-progress-text-size);font-family:var(--px-font-family);color:var(--px-progress-text-color);white-space:nowrap;flex-shrink:0;min-width:36px}.px-progress--primary{--px-progress-fill-color:var(--px-color-primary);--px-progress-fill-border-color:var(--px-color-primary-dark);--px-progress-shadow-color:var(--px-color-primary-dark);--px-progress-text-color:var(--px-color-primary-dark)}.px-progress--success{--px-progress-fill-color:var(--px-color-success);--px-progress-fill-border-color:var(--px-color-success-dark);--px-progress-shadow-color:var(--px-color-success-dark);--px-progress-text-color:var(--px-color-success-dark)}.px-progress--info{--px-progress-fill-color:var(--px-color-info);--px-progress-fill-border-color:var(--px-color-info-dark);--px-progress-shadow-color:var(--px-color-info-dark);--px-progress-text-color:var(--px-color-info-dark)}.px-progress--warning{--px-progress-fill-color:var(--px-color-warning);--px-progress-fill-border-color:var(--px-color-warning-dark);--px-progress-shadow-color:var(--px-color-warning-dark);--px-progress-text-color:var(--px-color-warning-dark)}.px-progress--danger{--px-progress-fill-color:var(--px-color-danger);--px-progress-fill-border-color:var(--px-color-danger-dark);--px-progress-shadow-color:var(--px-color-danger-dark);--px-progress-text-color:var(--px-color-danger-dark)}.px-progress--success.px-progress--success{--px-progress-fill-color:var(--px-color-success);--px-progress-fill-border-color:var(--px-color-success-dark);--px-progress-shadow-color:var(--px-color-success-dark);--px-progress-text-color:var(--px-color-success-dark)}.px-progress--warning.px-progress--warning{--px-progress-fill-color:var(--px-color-warning);--px-progress-fill-border-color:var(--px-color-warning-dark);--px-progress-shadow-color:var(--px-color-warning-dark);--px-progress-text-color:var(--px-color-warning-dark)}.px-progress--danger.px-progress--danger{--px-progress-fill-color:var(--px-color-danger);--px-progress-fill-border-color:var(--px-color-danger-dark);--px-progress-shadow-color:var(--px-color-danger-dark);--px-progress-text-color:var(--px-color-danger-dark)}.px-progress--large{--px-progress-height:20px;--px-progress-text-size:var(--px-font-size-base);--px-progress-chunk-width:10px}.px-progress--small{--px-progress-height:8px;--px-progress-text-size:var(--px-font-size-extra-small);--px-progress-chunk-width:6px}.px-progress--striped .px-progress__fill{background: repeating-linear-gradient(-45deg, transparent, transparent 4px, #ffffff40 4px, #ffffff40 8px),  repeating-linear-gradient(to right, var(--px-progress-fill-color) 0, var(--px-progress-fill-color) var(--px-progress-chunk-width), transparent var(--px-progress-chunk-width), transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap)));background-size:16px 16px,auto}.px-progress.is-striped-flow .px-progress__fill{animation:.6s steps(4,end) infinite px-progress-striped-flow}@keyframes px-progress-striped-flow{0%{background-position:0 0,0 0}to{background-position:16px 0,0 0}}.px-progress--checkered .px-progress__fill{background: linear-gradient(45deg, #fff3 25%, transparent 25%), linear-gradient(-45deg, #fff3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff3 75%), linear-gradient(-45deg, transparent 75%, #fff3 75%),  repeating-linear-gradient(to right, var(--px-progress-fill-color) 0, var(--px-progress-fill-color) var(--px-progress-chunk-width), transparent var(--px-progress-chunk-width), transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap)));background-position:0 0,0 2px,2px -2px,-2px 0,0 0;background-size:4px 4px,4px 4px,4px 4px,4px 4px,auto}.px-progress.is-indeterminate .px-progress__fill{animation:1.2s steps(8,end) infinite px-progress-indeterminate,.6s steps(2,end) infinite px-progress-chunk-pulse;width:30%!important}@keyframes px-progress-indeterminate{0%{margin-left:0}50%{margin-left:70%}to{margin-left:0}}@keyframes px-progress-chunk-pulse{0%,to{opacity:1}50%{opacity:.7}}.px-progress.is-text-inside{--px-progress-height:20px;--px-progress-chunk-width:10px}