.px-message-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}
.px-message {
  --text-color: var(--px-neutral-10);
  color: var(--text-color);
  position: relative;
  border-color: transparent;
  border-width: var(--px-bit);
  border-style: solid;
  padding: 4px 8px;
  display: flex;
  transition: 0.25s;
  pointer-events: auto;
}
.px-message-fade-enter-to,
.px-message-fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.px-message-fade-enter-from,
.px-message-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
.px-message-icon-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 8px;
}
.px-message-icon-wrapper svg {
  width: 16px;
  height: 16px;
  fill: var(--text-color);
}
.px-message-close-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.px-message-close-wrapper .px-message-icon {
  cursor: pointer;
  width: 1em;
  height: 1em;
  fill: var(--text-color);
  transition: 0.25s;
}
.px-message.px-message__sakura {
  --text-color: var(--px-sakura-6);
}
.px-message.px-message__sakura .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-sakura-5);
}
.px-message.px-message__sakura .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-sakura-7);
}
.px-message.px-message__success {
  --text-color: var(--px-success-6);
}
.px-message.px-message__success .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-success-5);
}
.px-message.px-message__success .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-success-7);
}
.px-message.px-message__warning {
  --text-color: var(--px-warning-6);
}
.px-message.px-message__warning .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-warning-5);
}
.px-message.px-message__warning .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-warning-7);
}
.px-message.px-message__notice {
  --text-color: var(--px-notice-6);
}
.px-message.px-message__notice .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-notice-5);
}
.px-message.px-message__notice .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-notice-7);
}
.px-message.px-message__info {
  --text-color: var(--px-primary-6);
}
.px-message.px-message__info .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-primary-5);
}
.px-message.px-message__info .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-primary-7);
}
.px-message.px-message__error {
  --text-color: var(--px-danger-6);
}
.px-message.px-message__error .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-danger-5);
}
.px-message.px-message__error .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-danger-7);
}
.px-message.px-message__loading {
  --text-color: var(--px-neutral-8);
}
.px-message.px-message__loading .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-neutral-7);
}
.px-message.px-message__loading .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-neutral-9);
}
.px-message.px-message__normal {
  --text-color: var(--px-neutral-10);
}
.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon {
  fill: var(--px-neutral-8);
}
.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon:hover {
  fill: var(--px-neutral-7);
}
.px-message.px-message__normal .px-message-close-wrapper > .px-message-icon:active {
  fill: var(--px-neutral-9);
}