.px-button-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
.px-button {
  --button-size: var(--px-medium-size);
  --text-color: var(--px-neutral-1);
  height: var(--button-size);
  padding-left: 16px;
  padding-right: 16px;
  background-color: transparent;
  border-color: transparent;
  border-width: var(--px-bit);
  border-style: solid;
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  transition: 0.25s;
  z-index: 0;
  box-sizing: border-box;
  outline-offset: var(--px-bit);
  font-size: 14px;
}
.px-button.px-button__small.px-button__inner {
  padding-right: calc(12px + 1px + var(--px-bit));
}
.px-button.px-button__small.px-button__inner:last-child {
  padding-right: 12px;
}
.px-button.px-button__small.px-button__inner:last-child.px-button__circle,
.px-button.px-button__small.px-button__inner:last-child.px-button__square {
  padding-right: 0;
  width: var(--button-size);
}
.px-button.px-button__small.px-button__inner.px-button__circle,
.px-button.px-button__small.px-button__inner.px-button__square {
  width: calc(var(--button-size) + 1px + var(--px-bit));
  padding-right: calc(1px + var(--px-bit));
}
.px-button.px-button__medium.px-button__inner {
  padding-right: calc(16px + 1px + var(--px-bit));
}
.px-button.px-button__medium.px-button__inner:last-child {
  padding-right: 16px;
}
.px-button.px-button__medium.px-button__inner:last-child.px-button__circle,
.px-button.px-button__medium.px-button__inner:last-child.px-button__square {
  padding-right: 0;
  width: var(--button-size);
}
.px-button.px-button__medium.px-button__inner.px-button__circle,
.px-button.px-button__medium.px-button__inner.px-button__square {
  width: calc(var(--button-size) + 1px + var(--px-bit));
  padding-right: calc(1px + var(--px-bit));
}
.px-button.px-button__large.px-button__inner {
  padding-right: calc(20px + 1px + var(--px-bit));
}
.px-button.px-button__large.px-button__inner:last-child {
  padding-right: 20px;
}
.px-button.px-button__large.px-button__inner:last-child.px-button__circle,
.px-button.px-button__large.px-button__inner:last-child.px-button__square {
  padding-right: 0;
  width: var(--button-size);
}
.px-button.px-button__large.px-button__inner.px-button__circle,
.px-button.px-button__large.px-button__inner.px-button__square {
  width: calc(var(--button-size) + 1px + var(--px-bit));
  padding-right: calc(1px + var(--px-bit));
}
.px-button__large {
  padding-left: 20px;
  padding-right: 20px;
  --button-size: var(--px-large-size);
  font-size: 15px;
}
.px-button__small {
  padding-left: 12px;
  padding-right: 12px;
  --button-size: var(--px-small-size);
  font-size: 12px;
}
.px-button__circle,
.px-button__square {
  width: var(--button-size);
  padding: 0px;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.px-button__loading {
  cursor: auto;
}
.px-button__block {
  display: flex;
  width: 100%;
  justify-content: center;
}
.px-button__disabled {
  cursor: not-allowed;
}
.px-button-icon-wrapper {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.px-button-icon-wrapper__last {
  margin-right: 0;
}
.px-button.px-button__small .px-button-icon {
  height: 12px;
  width: 12px;
  fill: var(--text-color);
}
.px-button.px-button__medium .px-button-icon {
  height: 14px;
  width: 14px;
  fill: var(--text-color);
}
.px-button.px-button__large .px-button-icon {
  height: 15px;
  width: 15px;
  fill: var(--text-color);
}
.px-button.px-button__primary:focus-visible {
  outline-color: var(--px-primary-6);
}
.px-button.px-button__primary.px-button__plain {
  --text-color: var(--px-primary-6);
}
.px-button.px-button__primary.px-button__plain.px-button__disabled {
  --text-color: var(--px-primary-3);
}
.px-button.px-button__primary.px-button__plain:active.px-button__loading,
.px-button.px-button__primary.px-button__plain:hover.px-button__loading {
  --text-color: var(--px-primary-6);
}
.px-button.px-button__primary.px-button__plain:active.px-button__disabled,
.px-button.px-button__primary.px-button__plain:hover.px-button__disabled {
  --text-color: var(--px-primary-3);
}
.px-button.px-button__primary.px-button__text,
.px-button.px-button__primary.px-button__outline {
  --text-color: var(--px-primary-6);
}
.px-button.px-button__primary.px-button__text.px-button__disabled,
.px-button.px-button__primary.px-button__outline.px-button__disabled {
  --text-color: var(--px-primary-2);
}
.px-button.px-button__primary.px-button__text:active.px-button__loading,
.px-button.px-button__primary.px-button__outline:active.px-button__loading,
.px-button.px-button__primary.px-button__text:hover.px-button__loading,
.px-button.px-button__primary.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-primary-6);
}
.px-button.px-button__primary.px-button__text:active.px-button__disabled,
.px-button.px-button__primary.px-button__outline:active.px-button__disabled,
.px-button.px-button__primary.px-button__text:hover.px-button__disabled,
.px-button.px-button__primary.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-primary-2);
}
.px-button.px-button__primary.px-button__outline:hover {
  --text-color: var(--px-primary-5);
}
.px-button.px-button__primary.px-button__outline:active {
  --text-color: var(--px-primary-7);
}
.px-button.px-button__primary .px-button__text:hover {
  --text-color: var(--px-primary-6);
}
.px-button.px-button__primary .px-button__text:active {
  --text-color: var(--px-primary-7);
}
.px-button.px-button__sakura:focus-visible {
  outline-color: var(--px-sakura-6);
}
.px-button.px-button__sakura.px-button__plain {
  --text-color: var(--px-sakura-6);
}
.px-button.px-button__sakura.px-button__plain.px-button__disabled {
  --text-color: var(--px-sakura-3);
}
.px-button.px-button__sakura.px-button__plain:active.px-button__loading,
.px-button.px-button__sakura.px-button__plain:hover.px-button__loading {
  --text-color: var(--px-sakura-6);
}
.px-button.px-button__sakura.px-button__plain:active.px-button__disabled,
.px-button.px-button__sakura.px-button__plain:hover.px-button__disabled {
  --text-color: var(--px-sakura-3);
}
.px-button.px-button__sakura.px-button__text,
.px-button.px-button__sakura.px-button__outline {
  --text-color: var(--px-sakura-6);
}
.px-button.px-button__sakura.px-button__text.px-button__disabled,
.px-button.px-button__sakura.px-button__outline.px-button__disabled {
  --text-color: var(--px-sakura-2);
}
.px-button.px-button__sakura.px-button__text:active.px-button__loading,
.px-button.px-button__sakura.px-button__outline:active.px-button__loading,
.px-button.px-button__sakura.px-button__text:hover.px-button__loading,
.px-button.px-button__sakura.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-sakura-6);
}
.px-button.px-button__sakura.px-button__text:active.px-button__disabled,
.px-button.px-button__sakura.px-button__outline:active.px-button__disabled,
.px-button.px-button__sakura.px-button__text:hover.px-button__disabled,
.px-button.px-button__sakura.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-sakura-2);
}
.px-button.px-button__sakura.px-button__outline:hover {
  --text-color: var(--px-sakura-5);
}
.px-button.px-button__sakura.px-button__outline:active {
  --text-color: var(--px-sakura-7);
}
.px-button.px-button__sakura .px-button__text:hover {
  --text-color: var(--px-sakura-6);
}
.px-button.px-button__sakura .px-button__text:active {
  --text-color: var(--px-sakura-7);
}
.px-button.px-button__success:focus-visible {
  outline-color: var(--px-success-6);
}
.px-button.px-button__success.px-button__plain {
  --text-color: var(--px-success-6);
}
.px-button.px-button__success.px-button__plain.px-button__disabled {
  --text-color: var(--px-success-3);
}
.px-button.px-button__success.px-button__plain:active.px-button__loading,
.px-button.px-button__success.px-button__plain:hover.px-button__loading {
  --text-color: var(--px-success-6);
}
.px-button.px-button__success.px-button__plain:active.px-button__disabled,
.px-button.px-button__success.px-button__plain:hover.px-button__disabled {
  --text-color: var(--px-success-3);
}
.px-button.px-button__success.px-button__text,
.px-button.px-button__success.px-button__outline {
  --text-color: var(--px-success-6);
}
.px-button.px-button__success.px-button__text.px-button__disabled,
.px-button.px-button__success.px-button__outline.px-button__disabled {
  --text-color: var(--px-success-2);
}
.px-button.px-button__success.px-button__text:active.px-button__loading,
.px-button.px-button__success.px-button__outline:active.px-button__loading,
.px-button.px-button__success.px-button__text:hover.px-button__loading,
.px-button.px-button__success.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-success-6);
}
.px-button.px-button__success.px-button__text:active.px-button__disabled,
.px-button.px-button__success.px-button__outline:active.px-button__disabled,
.px-button.px-button__success.px-button__text:hover.px-button__disabled,
.px-button.px-button__success.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-success-2);
}
.px-button.px-button__success.px-button__outline:hover {
  --text-color: var(--px-success-5);
}
.px-button.px-button__success.px-button__outline:active {
  --text-color: var(--px-success-7);
}
.px-button.px-button__success .px-button__text:hover {
  --text-color: var(--px-success-6);
}
.px-button.px-button__success .px-button__text:active {
  --text-color: var(--px-success-7);
}
.px-button.px-button__warning:focus-visible {
  outline-color: var(--px-warning-6);
}
.px-button.px-button__warning.px-button__plain {
  --text-color: var(--px-warning-6);
}
.px-button.px-button__warning.px-button__plain.px-button__disabled {
  --text-color: var(--px-warning-3);
}
.px-button.px-button__warning.px-button__plain:active.px-button__loading,
.px-button.px-button__warning.px-button__plain:hover.px-button__loading {
  --text-color: var(--px-warning-6);
}
.px-button.px-button__warning.px-button__plain:active.px-button__disabled,
.px-button.px-button__warning.px-button__plain:hover.px-button__disabled {
  --text-color: var(--px-warning-3);
}
.px-button.px-button__warning.px-button__text,
.px-button.px-button__warning.px-button__outline {
  --text-color: var(--px-warning-6);
}
.px-button.px-button__warning.px-button__text.px-button__disabled,
.px-button.px-button__warning.px-button__outline.px-button__disabled {
  --text-color: var(--px-warning-2);
}
.px-button.px-button__warning.px-button__text:active.px-button__loading,
.px-button.px-button__warning.px-button__outline:active.px-button__loading,
.px-button.px-button__warning.px-button__text:hover.px-button__loading,
.px-button.px-button__warning.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-warning-6);
}
.px-button.px-button__warning.px-button__text:active.px-button__disabled,
.px-button.px-button__warning.px-button__outline:active.px-button__disabled,
.px-button.px-button__warning.px-button__text:hover.px-button__disabled,
.px-button.px-button__warning.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-warning-2);
}
.px-button.px-button__warning.px-button__outline:hover {
  --text-color: var(--px-warning-5);
}
.px-button.px-button__warning.px-button__outline:active {
  --text-color: var(--px-warning-7);
}
.px-button.px-button__warning .px-button__text:hover {
  --text-color: var(--px-warning-6);
}
.px-button.px-button__warning .px-button__text:active {
  --text-color: var(--px-warning-7);
}
.px-button.px-button__danger:focus-visible {
  outline-color: var(--px-danger-6);
}
.px-button.px-button__danger.px-button__plain {
  --text-color: var(--px-danger-6);
}
.px-button.px-button__danger.px-button__plain.px-button__disabled {
  --text-color: var(--px-danger-3);
}
.px-button.px-button__danger.px-button__plain:active.px-button__loading,
.px-button.px-button__danger.px-button__plain:hover.px-button__loading {
  --text-color: var(--px-danger-6);
}
.px-button.px-button__danger.px-button__plain:active.px-button__disabled,
.px-button.px-button__danger.px-button__plain:hover.px-button__disabled {
  --text-color: var(--px-danger-3);
}
.px-button.px-button__danger.px-button__text,
.px-button.px-button__danger.px-button__outline {
  --text-color: var(--px-danger-6);
}
.px-button.px-button__danger.px-button__text.px-button__disabled,
.px-button.px-button__danger.px-button__outline.px-button__disabled {
  --text-color: var(--px-danger-2);
}
.px-button.px-button__danger.px-button__text:active.px-button__loading,
.px-button.px-button__danger.px-button__outline:active.px-button__loading,
.px-button.px-button__danger.px-button__text:hover.px-button__loading,
.px-button.px-button__danger.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-danger-6);
}
.px-button.px-button__danger.px-button__text:active.px-button__disabled,
.px-button.px-button__danger.px-button__outline:active.px-button__disabled,
.px-button.px-button__danger.px-button__text:hover.px-button__disabled,
.px-button.px-button__danger.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-danger-2);
}
.px-button.px-button__danger.px-button__outline:hover {
  --text-color: var(--px-danger-5);
}
.px-button.px-button__danger.px-button__outline:active {
  --text-color: var(--px-danger-7);
}
.px-button.px-button__danger .px-button__text:hover {
  --text-color: var(--px-danger-6);
}
.px-button.px-button__danger .px-button__text:active {
  --text-color: var(--px-danger-7);
}
.px-button.px-button__notice:focus-visible {
  outline-color: var(--px-notice-6);
}
.px-button.px-button__notice.px-button__plain {
  --text-color: var(--px-notice-6);
}
.px-button.px-button__notice.px-button__plain.px-button__disabled {
  --text-color: var(--px-notice-3);
}
.px-button.px-button__notice.px-button__plain:active.px-button__loading,
.px-button.px-button__notice.px-button__plain:hover.px-button__loading {
  --text-color: var(--px-notice-6);
}
.px-button.px-button__notice.px-button__plain:active.px-button__disabled,
.px-button.px-button__notice.px-button__plain:hover.px-button__disabled {
  --text-color: var(--px-notice-3);
}
.px-button.px-button__notice.px-button__text,
.px-button.px-button__notice.px-button__outline {
  --text-color: var(--px-notice-6);
}
.px-button.px-button__notice.px-button__text.px-button__disabled,
.px-button.px-button__notice.px-button__outline.px-button__disabled {
  --text-color: var(--px-notice-2);
}
.px-button.px-button__notice.px-button__text:active.px-button__loading,
.px-button.px-button__notice.px-button__outline:active.px-button__loading,
.px-button.px-button__notice.px-button__text:hover.px-button__loading,
.px-button.px-button__notice.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-notice-6);
}
.px-button.px-button__notice.px-button__text:active.px-button__disabled,
.px-button.px-button__notice.px-button__outline:active.px-button__disabled,
.px-button.px-button__notice.px-button__text:hover.px-button__disabled,
.px-button.px-button__notice.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-notice-2);
}
.px-button.px-button__notice.px-button__outline:hover {
  --text-color: var(--px-notice-5);
}
.px-button.px-button__notice.px-button__outline:active {
  --text-color: var(--px-notice-7);
}
.px-button.px-button__notice .px-button__text:hover {
  --text-color: var(--px-notice-6);
}
.px-button.px-button__notice .px-button__text:active {
  --text-color: var(--px-notice-7);
}
.px-button.px-button__info {
  --text-color: var(--px-neutral-10);
}
.px-button.px-button__info:focus-visible {
  outline-color: var(--px-neutral-10);
}
.px-button.px-button__info.px-button__disabled {
  --text-color: var(--px-neutral-7);
}
.px-button.px-button__info.px-button__text,
.px-button.px-button__info.px-button__plain,
.px-button.px-button__info.px-button__outline {
  --text-color: var(--px-neutral-10);
}
.px-button.px-button__info.px-button__text.px-button__disabled,
.px-button.px-button__info.px-button__plain.px-button__disabled,
.px-button.px-button__info.px-button__outline.px-button__disabled {
  --text-color: var(--px-neutral-7);
}
.px-button.px-button__info.px-button__text:active.px-button__disabled,
.px-button.px-button__info.px-button__plain:active.px-button__disabled,
.px-button.px-button__info.px-button__outline:active.px-button__disabled,
.px-button.px-button__info.px-button__text:hover.px-button__disabled,
.px-button.px-button__info.px-button__plain:hover.px-button__disabled,
.px-button.px-button__info.px-button__outline:hover.px-button__disabled {
  --text-color: var(--px-neutral-7);
}
.px-button.px-button__info.px-button__text:active.px-button__loading,
.px-button.px-button__info.px-button__plain:active.px-button__loading,
.px-button.px-button__info.px-button__outline:active.px-button__loading,
.px-button.px-button__info.px-button__text:hover.px-button__loading,
.px-button.px-button__info.px-button__plain:hover.px-button__loading,
.px-button.px-button__info.px-button__outline:hover.px-button__loading {
  --text-color: var(--px-neutral-10);
}
.px-button.px-button__info.px-button__outline:hover {
  --text-color: var(--px-neutral-9);
}
.px-button.px-button__info.px-button__outline:active {
  --text-color: var(--px-neutral-8);
}
.px-button.px-button__info .px-button__text:hover {
  --text-color: var(--px-neutral-7);
}
.px-button.px-button__info .px-button__text:active {
  --text-color: var(--px-neutral-8);
}