sakana-element 2.4.2 → 2.5.1

package/dist/theme/Message.css

@@ -1,565 +1 @@
-/* Message Variables */
-.px-message {
-  --px-message-bg-color: var(--px-fill-color-blank);
-  --px-message-border-color: var(--px-border-color-dark);
-  --px-message-text-color: var(--px-text-color-primary);
-  --px-message-shadow-color: var(--px-shadow-color);
-  --px-message-padding: 12px 16px;
-  --px-message-close-size: 16px;
-  --px-message-close-icon-color: var(--px-text-color-secondary);
-  --px-message-close-hover-color: var(--px-text-color-primary);
-  --px-message-icon-size: 16px;
-  --px-message-icon-margin: 10px;
-
-  /* Beveled inset for 3D raised-panel depth */
-  --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-  --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
-}
-/* Base Message Styles - Pixel Game Notification */
-.px-message {
-  width: fit-content;
-  max-width: calc(100% - 32px);
-  box-sizing: border-box;
-  position: fixed;
-  left: 50%;
-  top: 20px;
-  transform: translateX(-50%);
-  padding: var(--px-message-padding);
-  display: flex;
-  align-items: center;
-  font-family: var(--px-font-family);
-
-  /* Remove traditional styling */
-  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-message-shadow-color));
-
-  /* No smooth transitions for pixel feel */
-  transition: none;
-}
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-message::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-message-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-message::after {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background: var(--px-message-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-message-inset-highlight), var(--px-message-inset-shadow);
-    z-index: -1;
-}
-/* Icon styling */
-.px-message .px-message__icon {
-    color: var(--px-message-text-color);
-    font-size: var(--px-message-icon-size);
-    width: var(--px-message-icon-size);
-    margin-right: var(--px-message-icon-margin);
-    flex-shrink: 0;
-}
-/* Content area */
-.px-message .px-message__content {
-    color: var(--px-message-text-color);
-    overflow-wrap: break-word;
-    font-size: var(--px-font-size-base);
-    line-height: 1.5;
-}
-/* With close button */
-.px-message.is-close .px-message__content {
-    padding-right: 12px;
-}
-/* Center alignment */
-.px-message.text-center {
-    justify-content: center;
-}
-/* Close button - pixel style */
-.px-message .px-message__close {
-    display: flex;
-    align-items: center;
-}
-.px-message .px-message__close .px-icon {
-      cursor: pointer;
-      color: var(--px-message-close-icon-color);
-      font-size: var(--px-message-close-size);
-      transition: none;
-}
-.px-message .px-message__close .px-icon:hover {
-        color: var(--px-message-close-hover-color);
-        transform: translate(-1px, -1px);
-}
-.px-message .px-message__close .px-icon:active {
-        transform: translate(1px, 1px);
-}
-/* Map error type to danger color palette so @each loops handle both */
-.px-message--error {
-  --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 pixel styling */
-.px-message--info {
-    --px-message-bg-color: var(--px-color-info-light-9);
-    --px-message-border-color: var(--px-color-info);
-    --px-message-text-color: var(--px-color-info-dark);
-    --px-message-shadow-color: var(--px-color-info-dark);
-}
-.px-message--info .px-message__close .px-icon {
-      color: var(--px-color-info);
-}
-.px-message--info .px-message__close .px-icon:hover {
-        color: var(--px-color-info-dark);
-}
-.px-message--success {
-    --px-message-bg-color: var(--px-color-success-light-9);
-    --px-message-border-color: var(--px-color-success);
-    --px-message-text-color: var(--px-color-success-dark);
-    --px-message-shadow-color: var(--px-color-success-dark);
-}
-.px-message--success .px-message__close .px-icon {
-      color: var(--px-color-success);
-}
-.px-message--success .px-message__close .px-icon:hover {
-        color: var(--px-color-success-dark);
-}
-.px-message--warning {
-    --px-message-bg-color: var(--px-color-warning-light-9);
-    --px-message-border-color: var(--px-color-warning);
-    --px-message-text-color: var(--px-color-warning-dark);
-    --px-message-shadow-color: var(--px-color-warning-dark);
-}
-.px-message--warning .px-message__close .px-icon {
-      color: var(--px-color-warning);
-}
-.px-message--warning .px-message__close .px-icon:hover {
-        color: var(--px-color-warning-dark);
-}
-.px-message--danger {
-    --px-message-bg-color: var(--px-color-danger-light-9);
-    --px-message-border-color: var(--px-color-danger);
-    --px-message-text-color: var(--px-color-danger-dark);
-    --px-message-shadow-color: var(--px-color-danger-dark);
-}
-.px-message--danger .px-message__close .px-icon {
-      color: var(--px-color-danger);
-}
-.px-message--danger .px-message__close .px-icon:hover {
-        color: var(--px-color-danger-dark);
-}
-.px-message--error {
-    --px-message-bg-color: var(--px-color-error-light-9);
-    --px-message-border-color: var(--px-color-error);
-    --px-message-text-color: var(--px-color-error-dark);
-    --px-message-shadow-color: var(--px-color-error-dark);
-}
-.px-message--error .px-message__close .px-icon {
-      color: var(--px-color-error);
-}
-.px-message--error .px-message__close .px-icon:hover {
-        color: var(--px-color-error-dark);
-}
-/* ─── Plain variant ─── */
-.px-message.is-plain {
-  --px-message-bg-color: var(--px-fill-color-blank);
-  --px-message-border-color: var(--px-border-color-light);
-  --px-message-shadow-color: var(--px-border-color-light);
-}
-.px-message--info.is-plain {
-    --px-message-bg-color: var(--px-color-info-light-9);
-    --px-message-border-color: var(--px-color-info-light-5, var(--px-color-info));
-    --px-message-text-color: var(--px-color-info);
-    --px-message-shadow-color: var(--px-color-info-light-5, var(--px-color-info));
-}
-.px-message--success.is-plain {
-    --px-message-bg-color: var(--px-color-success-light-9);
-    --px-message-border-color: var(--px-color-success-light-5, var(--px-color-success));
-    --px-message-text-color: var(--px-color-success);
-    --px-message-shadow-color: var(--px-color-success-light-5, var(--px-color-success));
-}
-.px-message--warning.is-plain {
-    --px-message-bg-color: var(--px-color-warning-light-9);
-    --px-message-border-color: var(--px-color-warning-light-5, var(--px-color-warning));
-    --px-message-text-color: var(--px-color-warning);
-    --px-message-shadow-color: var(--px-color-warning-light-5, var(--px-color-warning));
-}
-.px-message--danger.is-plain {
-    --px-message-bg-color: var(--px-color-danger-light-9);
-    --px-message-border-color: var(--px-color-danger-light-5, var(--px-color-danger));
-    --px-message-text-color: var(--px-color-danger);
-    --px-message-shadow-color: var(--px-color-danger-light-5, var(--px-color-danger));
-}
-.px-message--error.is-plain {
-    --px-message-bg-color: var(--px-color-error-light-9);
-    --px-message-border-color: var(--px-color-error-light-5, var(--px-color-error));
-    --px-message-text-color: var(--px-color-error);
-    --px-message-shadow-color: var(--px-color-error-light-5, var(--px-color-error));
-}
-/* ─── Ghost variant ─── */
-.px-message.is-ghost {
-  --px-message-bg-color: var(--px-fill-color-blank);
-  --px-message-shadow-color: transparent;
-  filter: none;
-}
-.px-message--info.is-ghost {
-    --px-message-bg-color: var(--px-fill-color-blank);
-    --px-message-border-color: var(--px-color-info);
-    --px-message-text-color: var(--px-color-info);
-    --px-message-shadow-color: transparent;
-    filter: none;
-}
-.px-message--success.is-ghost {
-    --px-message-bg-color: var(--px-fill-color-blank);
-    --px-message-border-color: var(--px-color-success);
-    --px-message-text-color: var(--px-color-success);
-    --px-message-shadow-color: transparent;
-    filter: none;
-}
-.px-message--warning.is-ghost {
-    --px-message-bg-color: var(--px-fill-color-blank);
-    --px-message-border-color: var(--px-color-warning);
-    --px-message-text-color: var(--px-color-warning);
-    --px-message-shadow-color: transparent;
-    filter: none;
-}
-.px-message--danger.is-ghost {
-    --px-message-bg-color: var(--px-fill-color-blank);
-    --px-message-border-color: var(--px-color-danger);
-    --px-message-text-color: var(--px-color-danger);
-    --px-message-shadow-color: transparent;
-    filter: none;
-}
-.px-message--error.is-ghost {
-    --px-message-bg-color: var(--px-fill-color-blank);
-    --px-message-border-color: var(--px-color-error);
-    --px-message-text-color: var(--px-color-error);
-    --px-message-shadow-color: transparent;
-    filter: none;
-}
-/* ─── Timer bar ─── */
-.px-message__timer {
-  position: absolute;
-  bottom: 2px;
-  left: 4px;
-  right: 4px;
-  height: 2px;
-  background: var(--px-message-text-color);
-  opacity: 0.5;
-  animation: px-message-timer linear forwards;
-  transform-origin: left;
-}
-/* Pause timer bar animation when message is hovered (matches JS timer pause) */
-.px-message:hover .px-message__timer {
-  animation-play-state: paused;
-}
-@keyframes px-message-timer {
-0% { transform: scaleX(1);
-}
-100% { transform: scaleX(0);
-}
-}
-/* Dark mode — invert bevel highlights */
-.px-dark .px-message {
-  --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
-  --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
-}
-/* Animation - Pixel style instant appear/disappear */
-.px-message.fade-up-enter-from,
-.px-message.fade-up-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -100%);
-}
-.px-message.fade-up-enter-active,
-.px-message.fade-up-leave-active {
-  transition: opacity 0.15s steps(3), transform 0.15s steps(3);
-}
-/* MessageBox Variables */
-.px-message-box {
-  --px-message-box-title-color: var(--px-text-color-primary);
-  --px-message-box-width: 420px;
-  --px-message-box-font-size: var(--px-font-size-large);
-  --px-message-box-content-font-size: var(--px-font-size-base);
-  --px-message-box-content-color: var(--px-text-color-regular);
-  --px-message-box-padding-primary: 16px;
-  --px-message-box-font-line-height: 1.5;
-  --px-message-box-close-size: var(--px-font-size-base);
-  --px-message-box-border-color: var(--px-border-color);
-  --px-message-box-shadow-color: var(--px-shadow-color);
-  --px-message-box-divider-color: var(--px-border-color-light);
-
-  /* Beveled inset for 3D raised-panel depth */
-  --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-  --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
-}
-/* Overlay */
-.px-overlay-message-box {
-  text-align: center;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 16px;
-  overflow: auto;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.px-overlay-message-box::after {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    width: 0;
-    vertical-align: middle;
-}
-/* Base MessageBox Styles - Pixel Dialog */
-.px-message-box {
-  display: inline-block;
-  position: relative;
-  max-width: var(--px-message-box-width);
-  width: 100%;
-  padding: var(--px-message-box-padding-primary);
-  vertical-align: middle;
-  font-size: var(--px-message-box-font-size);
-  font-family: var(--px-font-family);
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-
-  /* Remove traditional styling — pseudo-elements handle visuals */
-  background: transparent;
-  border: none;
-  border-radius: 0;
-
-  /* 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-message-box-shadow-color));
-
-  /* No smooth transitions for pixel feel */
-  transition: none;
-}
-/* Border layer — 3-step staircase clip (8px corners) */
-.px-message-box::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-message-box-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-message-box::after {
-    content: '';
-    position: absolute;
-    inset: 4px;
-    background: var(--px-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-message-box-inset-highlight), var(--px-message-box-inset-shadow);
-    z-index: 0;
-}
-.px-message-box:focus {
-    outline: none !important;
-}
-.px-message-box.is-center .px-message-box__title {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-}
-.px-message-box.is-center .px-message-box__footer,
-    .px-message-box.is-center .px-message-box__content {
-      justify-content: center;
-}
-/* Draggable cursor */
-.px-message-box.is-draggable .px-message-box__header {
-    cursor: move;
-    user-select: none;
-}
-.px-message-box :deep(.px-icon).px-icon-info {
-        color: var(--px-color-info) !important;
-}
-.px-message-box :deep(.px-icon).px-icon-success {
-        color: var(--px-color-success) !important;
-}
-.px-message-box :deep(.px-icon).px-icon-warning {
-        color: var(--px-color-warning) !important;
-}
-.px-message-box :deep(.px-icon).px-icon-danger {
-        color: var(--px-color-danger) !important;
-}
-.px-message-box :deep(.px-icon).px-icon-error {
-      color: var(--px-color-danger) !important;
-}
-.px-message-box .px-message-box__header {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding-bottom: var(--px-message-box-padding-primary);
-}
-.px-message-box .px-message-box__header .px-message-box__title {
-      flex: 1;
-      color: var(--px-message-box-title-color);
-      font-size: var(--px-message-box-font-size);
-      font-family: var(--px-font-family);
-      font-weight: 500;
-      line-height: var(--px-message-box-font-line-height);
-}
-/* Pixel-dashed divider at bottom */
-.px-message-box .px-message-box__header::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background-image: repeating-linear-gradient(
-        to right,
-        var(--px-message-box-divider-color) 0px,
-        var(--px-message-box-divider-color) 6px,
-        transparent 6px,
-        transparent 12px
-      );
-}
-.px-message-box .px-message-box__header .px-message-box__header-btn {
-      flex-shrink: 0;
-      margin-left: 8px;
-      padding: 0;
-      border: none;
-      outline: none;
-      background: transparent;
-      font-size: var(--px-message-box-close-size);
-      cursor: pointer;
-      z-index: 1;
-      transition: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-}
-.px-message-box .px-message-box__header .px-message-box__header-btn i {
-        color: var(--px-text-color-secondary);
-        font-size: inherit;
-}
-.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon {
-        cursor: pointer;
-        transition: none;
-}
-.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:hover {
-          color: var(--px-color-danger);
-          transform: translate(-1px, -1px);
-}
-.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:active {
-          transform: translate(1px, 1px);
-}
-.px-message-box .px-message-box__content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: var(--px-message-box-content-font-size);
-    font-family: var(--px-font-family);
-    color: var(--px-message-box-content-color);
-    padding-top: var(--px-message-box-padding-primary);
-}
-.px-message-box .px-message-box__content .px-message-box__message {
-      margin: 0;
-}
-.px-message-box .px-message-box__content .px-message-box__message p {
-        margin: 0;
-        line-height: var(--px-message-box-font-line-height);
-}
-.px-message-box .px-message-box__input {
-    position: relative;
-    z-index: 1;
-    padding-top: 12px;
-}
-.px-message-box .px-message-box__error {
-    position: relative;
-    z-index: 1;
-    color: var(--px-color-danger);
-    font-size: 12px;
-    font-family: var(--px-font-family);
-    margin-top: 4px;
-}
-.px-message-box .px-message-box__footer {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    padding-top: var(--px-message-box-padding-primary);
-    gap: 8px;
-}
-/* Type-colored borders */
-.px-message-box.px-message-box--info {
-    --px-message-box-border-color: var(--px-color-info);
-    --px-message-box-shadow-color: var(--px-color-info-dark);
-    --px-message-box-divider-color: var(--px-color-info-light-5, var(--px-color-info));
-}
-.px-message-box.px-message-box--success {
-    --px-message-box-border-color: var(--px-color-success);
-    --px-message-box-shadow-color: var(--px-color-success-dark);
-    --px-message-box-divider-color: var(--px-color-success-light-5, var(--px-color-success));
-}
-.px-message-box.px-message-box--warning {
-    --px-message-box-border-color: var(--px-color-warning);
-    --px-message-box-shadow-color: var(--px-color-warning-dark);
-    --px-message-box-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
-}
-.px-message-box.px-message-box--danger {
-    --px-message-box-border-color: var(--px-color-danger);
-    --px-message-box-shadow-color: var(--px-color-danger-dark);
-    --px-message-box-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
-}
-/* Dark mode — invert bevel highlights */
-.px-dark .px-message-box {
-  --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
-  --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
-}
-/* Animation */
-.fade-in-linear-enter-active .px-overlay-message-box {
-    animation: msgbox-fade-in 0.15s steps(3);
-}
-.fade-in-linear-leave-active .px-overlay-message-box {
-    animation: msgbox-fade-in 0.15s steps(3) reverse;
-}
-@keyframes msgbox-fade-in {
-0% {
-    transform: translate3d(0, -10px, 0);
-    opacity: 0;
-}
-100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-}
-}
+.px-message{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-border-color-dark);--px-message-text-color:var(--px-text-color-primary);--px-message-shadow-color:var(--px-shadow-color);--px-message-padding:12px 16px;--px-message-close-size:16px;--px-message-close-icon-color:var(--px-text-color-secondary);--px-message-close-hover-color:var(--px-text-color-primary);--px-message-icon-size:16px;--px-message-icon-margin:10px;--px-message-inset-highlight:inset 2px 2px 0 0 #ffffff59;--px-message-inset-shadow:inset -2px -2px 0 0 #00000014;box-sizing:border-box;width:fit-content;max-width:calc(100% - 32px);padding:var(--px-message-padding);font-family:var(--px-font-family);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-message-shadow-color));background:0 0;border:none;align-items:center;transition:none;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.px-message:before{content:"";background:var(--px-message-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-message:after{content:"";background:var(--px-message-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-message-inset-highlight), var(--px-message-inset-shadow);z-index:-1;position:absolute;inset:2px}.px-message .px-message__icon{color:var(--px-message-text-color);font-size:var(--px-message-icon-size);width:var(--px-message-icon-size);margin-right:var(--px-message-icon-margin);flex-shrink:0}.px-message .px-message__content{color:var(--px-message-text-color);overflow-wrap:break-word;font-size:var(--px-font-size-base);line-height:1.5}.px-message.is-close .px-message__content{padding-right:12px}.px-message.text-center{justify-content:center}.px-message .px-message__close{align-items:center;display:flex}.px-message .px-message__close .px-icon{cursor:pointer;color:var(--px-message-close-icon-color);font-size:var(--px-message-close-size);transition:none}.px-message .px-message__close .px-icon:hover{color:var(--px-message-close-hover-color);transform:translate(-1px,-1px)}.px-message .px-message__close .px-icon:active{transform:translate(1px,1px)}.px-message--error{--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-message--info{--px-message-bg-color:var(--px-color-info-light-9);--px-message-border-color:var(--px-color-info);--px-message-text-color:var(--px-color-info-dark);--px-message-shadow-color:var(--px-color-info-dark)}.px-message--info .px-message__close .px-icon{color:var(--px-color-info)}.px-message--info .px-message__close .px-icon:hover{color:var(--px-color-info-dark)}.px-message--success{--px-message-bg-color:var(--px-color-success-light-9);--px-message-border-color:var(--px-color-success);--px-message-text-color:var(--px-color-success-dark);--px-message-shadow-color:var(--px-color-success-dark)}.px-message--success .px-message__close .px-icon{color:var(--px-color-success)}.px-message--success .px-message__close .px-icon:hover{color:var(--px-color-success-dark)}.px-message--warning{--px-message-bg-color:var(--px-color-warning-light-9);--px-message-border-color:var(--px-color-warning);--px-message-text-color:var(--px-color-warning-dark);--px-message-shadow-color:var(--px-color-warning-dark)}.px-message--warning .px-message__close .px-icon{color:var(--px-color-warning)}.px-message--warning .px-message__close .px-icon:hover{color:var(--px-color-warning-dark)}.px-message--danger{--px-message-bg-color:var(--px-color-danger-light-9);--px-message-border-color:var(--px-color-danger);--px-message-text-color:var(--px-color-danger-dark);--px-message-shadow-color:var(--px-color-danger-dark)}.px-message--danger .px-message__close .px-icon{color:var(--px-color-danger)}.px-message--danger .px-message__close .px-icon:hover{color:var(--px-color-danger-dark)}.px-message--error{--px-message-bg-color:var(--px-color-error-light-9);--px-message-border-color:var(--px-color-error);--px-message-text-color:var(--px-color-error-dark);--px-message-shadow-color:var(--px-color-error-dark)}.px-message--error .px-message__close .px-icon{color:var(--px-color-error)}.px-message--error .px-message__close .px-icon:hover{color:var(--px-color-error-dark)}.px-message.is-plain{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-border-color-light);--px-message-shadow-color:var(--px-border-color-light)}.px-message--info.is-plain{--px-message-bg-color:var(--px-color-info-light-9);--px-message-border-color:var(--px-color-info-light-5,var(--px-color-info));--px-message-text-color:var(--px-color-info);--px-message-shadow-color:var(--px-color-info-light-5,var(--px-color-info))}.px-message--success.is-plain{--px-message-bg-color:var(--px-color-success-light-9);--px-message-border-color:var(--px-color-success-light-5,var(--px-color-success));--px-message-text-color:var(--px-color-success);--px-message-shadow-color:var(--px-color-success-light-5,var(--px-color-success))}.px-message--warning.is-plain{--px-message-bg-color:var(--px-color-warning-light-9);--px-message-border-color:var(--px-color-warning-light-5,var(--px-color-warning));--px-message-text-color:var(--px-color-warning);--px-message-shadow-color:var(--px-color-warning-light-5,var(--px-color-warning))}.px-message--danger.is-plain{--px-message-bg-color:var(--px-color-danger-light-9);--px-message-border-color:var(--px-color-danger-light-5,var(--px-color-danger));--px-message-text-color:var(--px-color-danger);--px-message-shadow-color:var(--px-color-danger-light-5,var(--px-color-danger))}.px-message--error.is-plain{--px-message-bg-color:var(--px-color-error-light-9);--px-message-border-color:var(--px-color-error-light-5,var(--px-color-error));--px-message-text-color:var(--px-color-error);--px-message-shadow-color:var(--px-color-error-light-5,var(--px-color-error))}.px-message.is-ghost{--px-message-bg-color:var(--px-fill-color-blank);--px-message-shadow-color:transparent;filter:none}.px-message--info.is-ghost{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-color-info);--px-message-text-color:var(--px-color-info);--px-message-shadow-color:transparent;filter:none}.px-message--success.is-ghost{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-color-success);--px-message-text-color:var(--px-color-success);--px-message-shadow-color:transparent;filter:none}.px-message--warning.is-ghost{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-color-warning);--px-message-text-color:var(--px-color-warning);--px-message-shadow-color:transparent;filter:none}.px-message--danger.is-ghost{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-color-danger);--px-message-text-color:var(--px-color-danger);--px-message-shadow-color:transparent;filter:none}.px-message--error.is-ghost{--px-message-bg-color:var(--px-fill-color-blank);--px-message-border-color:var(--px-color-error);--px-message-text-color:var(--px-color-error);--px-message-shadow-color:transparent;filter:none}.px-message__timer{background:var(--px-message-text-color);opacity:.5;transform-origin:0;height:2px;animation:linear forwards px-message-timer;position:absolute;bottom:2px;left:4px;right:4px}.px-message:hover .px-message__timer{animation-play-state:paused}@keyframes px-message-timer{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.px-dark .px-message{--px-message-inset-highlight:inset 2px 2px 0 0 #ffffff1a;--px-message-inset-shadow:inset -2px -2px 0 0 #00000040}.px-message.fade-up-enter-from,.px-message.fade-up-leave-to{opacity:0;transform:translate(-50%,-100%)}.px-message.fade-up-enter-active,.px-message.fade-up-leave-active{transition:opacity .15s steps(3,end),transform .15s steps(3,end)}.px-overlay[data-v-a64cd74a]{z-index:2000;background-color:#00000080;height:100%;position:fixed;inset:0;overflow:auto}.px-message-box{--px-message-box-title-color:var(--px-text-color-primary);--px-message-box-width:420px;--px-message-box-font-size:var(--px-font-size-large);--px-message-box-content-font-size:var(--px-font-size-base);--px-message-box-content-color:var(--px-text-color-regular);--px-message-box-padding-primary:16px;--px-message-box-font-line-height:1.5;--px-message-box-close-size:var(--px-font-size-base);--px-message-box-border-color:var(--px-border-color);--px-message-box-shadow-color:var(--px-shadow-color);--px-message-box-divider-color:var(--px-border-color-light);--px-message-box-inset-highlight:inset 2px 2px 0 0 #ffffff59;--px-message-box-inset-shadow:inset -2px -2px 0 0 #00000014}.px-overlay-message-box{text-align:center;background-color:#00000080;padding:16px;position:fixed;inset:0;overflow:auto}.px-overlay-message-box:after{content:"";vertical-align:middle;width:0;height:100%;display:inline-block}.px-message-box{max-width:var(--px-message-box-width);width:100%;padding:var(--px-message-box-padding-primary);vertical-align:middle;font-size:var(--px-message-box-font-size);font-family:var(--px-font-family);text-align:left;backface-visibility:hidden;box-sizing:border-box;overflow-wrap:break-word;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-message-box-shadow-color));background:0 0;border:none;border-radius:0;transition:none;display:inline-block;position:relative;overflow:hidden}.px-message-box:before{content:"";background:var(--px-message-box-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-message-box:after{content:"";background:var(--px-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-message-box-inset-highlight), var(--px-message-box-inset-shadow);z-index:0;position:absolute;inset:4px}.px-message-box:focus{outline:none!important}.px-message-box.is-center .px-message-box__title{justify-content:center;align-items:center;gap:6px;display:flex}.px-message-box.is-center .px-message-box__footer,.px-message-box.is-center .px-message-box__content{justify-content:center}.px-message-box.is-draggable .px-message-box__header{cursor:move;-webkit-user-select:none;user-select:none}.px-message-box .px-icon.px-icon-info{color:var(--px-color-info)!important}.px-message-box .px-icon.px-icon-success{color:var(--px-color-success)!important}.px-message-box .px-icon.px-icon-warning{color:var(--px-color-warning)!important}.px-message-box .px-icon.px-icon-danger,.px-message-box .px-icon.px-icon-error{color:var(--px-color-danger)!important}.px-message-box .px-message-box__header{z-index:1;padding-bottom:var(--px-message-box-padding-primary);justify-content:space-between;align-items:flex-start;display:flex;position:relative}.px-message-box .px-message-box__header .px-message-box__title{color:var(--px-message-box-title-color);font-size:var(--px-message-box-font-size);font-family:var(--px-font-family);font-weight:500;line-height:var(--px-message-box-font-line-height);flex:1}.px-message-box .px-message-box__header:after{content:"";background-image:repeating-linear-gradient(to right, var(--px-message-box-divider-color) 0px, var(--px-message-box-divider-color) 6px, transparent 6px, transparent 12px);height:2px;position:absolute;bottom:0;left:0;right:0}.px-message-box .px-message-box__header .px-message-box__header-btn{font-size:var(--px-message-box-close-size);cursor:pointer;z-index:1;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;margin-left:8px;padding:0;transition:none;display:flex}.px-message-box .px-message-box__header .px-message-box__header-btn i{color:var(--px-text-color-secondary);font-size:inherit}.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon{cursor:pointer;transition:none}.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:hover{color:var(--px-color-danger);transform:translate(-1px,-1px)}.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:active{transform:translate(1px,1px)}.px-message-box .px-message-box__content{z-index:1;font-size:var(--px-message-box-content-font-size);font-family:var(--px-font-family);color:var(--px-message-box-content-color);padding-top:var(--px-message-box-padding-primary);align-items:center;gap:12px;display:flex;position:relative}.px-message-box .px-message-box__content .px-message-box__message{margin:0}.px-message-box .px-message-box__content .px-message-box__message p{line-height:var(--px-message-box-font-line-height);margin:0}.px-message-box .px-message-box__input{z-index:1;padding-top:12px;position:relative}.px-message-box .px-message-box__error{z-index:1;color:var(--px-color-danger);font-size:12px;font-family:var(--px-font-family);margin-top:4px;position:relative}.px-message-box .px-message-box__footer{z-index:1;padding-top:var(--px-message-box-padding-primary);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex;position:relative}.px-message-box.px-message-box--info{--px-message-box-border-color:var(--px-color-info);--px-message-box-shadow-color:var(--px-color-info-dark);--px-message-box-divider-color:var(--px-color-info-light-5,var(--px-color-info))}.px-message-box.px-message-box--success{--px-message-box-border-color:var(--px-color-success);--px-message-box-shadow-color:var(--px-color-success-dark);--px-message-box-divider-color:var(--px-color-success-light-5,var(--px-color-success))}.px-message-box.px-message-box--warning{--px-message-box-border-color:var(--px-color-warning);--px-message-box-shadow-color:var(--px-color-warning-dark);--px-message-box-divider-color:var(--px-color-warning-light-5,var(--px-color-warning))}.px-message-box.px-message-box--danger{--px-message-box-border-color:var(--px-color-danger);--px-message-box-shadow-color:var(--px-color-danger-dark);--px-message-box-divider-color:var(--px-color-danger-light-5,var(--px-color-danger))}.px-dark .px-message-box{--px-message-box-inset-highlight:inset 2px 2px 0 0 #ffffff1a;--px-message-box-inset-shadow:inset -2px -2px 0 0 #00000040}.fade-in-linear-enter-active .px-overlay-message-box{animation:.15s steps(3,end) msgbox-fade-in}.fade-in-linear-leave-active .px-overlay-message-box{animation:.15s steps(3,end) reverse msgbox-fade-in}@keyframes msgbox-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translate(0,0)}}