.px-alert-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
.px-alert {
  --text-color: var(--px-neutral-1);
  min-height: var(--px-medium-sub-size);
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  flex-grow: 1;
  align-items: center;
  position: relative;
  color: var(--text-color);
  transition: 0.25s;
  z-index: 0;
  border-color: transparent;
  border-width: var(--px-bit);
  border-style: solid;
  padding: 4px 8px;
  font-size: 14px;
}
.px-alert__text-align-start {
  justify-content: flex-start;
}
.px-alert__text-align-center {
  justify-content: center;
}
.px-alert__text-align-end {
  justify-content: flex-end;
}
.px-alert__icon-start.px-alert__show-icon {
  padding-left: 30px;
}
.px-alert__icon-start .px-alert-icon-wrapper {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.px-alert__closable {
  padding-right: 26px;
}
.px-alert__has-title.px-alert__icon-start.px-alert__show-icon {
  padding-left: 44px;
}
.px-alert__has-title .px-alert-icon-wrapper {
  height: 28px;
  width: 28px;
}
.px-alert__has-title .px-alert-icon-wrapper > svg {
  height: 28px;
  width: 28px;
  font-size: 28px;
}
.px-alert-title {
  font-size: 16px;
}
.px-alert-icon-wrapper {
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.px-alert-icon-wrapper > svg {
  height: 14px;
  width: 14px;
  font-size: 14px;
  color: var(--text-color);
}
.px-alert-icon-wrapper > .px-alert-icon {
  fill: var(--text-color);
}
.px-alert-close-icon-wrapper {
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.px-alert-close-icon-wrapper > svg {
  height: 10px;
  width: 10px;
  font-size: 10px;
  color: var(--text-color);
  cursor: pointer;
}
.px-alert-close-icon-wrapper > .px-alert-close-icon {
  fill: var(--text-color);
}
.px-alert-close-icon-wrapper > .px-alert-close-icon:focus {
  outline: 0;
}
.px-alert.px-alert__info .px-alert-close-icon:hover,
.px-alert.px-alert__info .px-alert-close-icon:focus {
  fill: var(--px-primary-2);
}
.px-alert.px-alert__info .px-alert-close-icon:active {
  fill: var(--px-primary-3);
}
.px-alert.px-alert__info.px-alert__plain {
  --text-color: var(--px-primary-6);
}
.px-alert.px-alert__info.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__info.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-primary-5);
}
.px-alert.px-alert__info.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-primary-7);
}
.px-alert.px-alert__sakura .px-alert-close-icon:hover,
.px-alert.px-alert__sakura .px-alert-close-icon:focus {
  fill: var(--px-sakura-2);
}
.px-alert.px-alert__sakura .px-alert-close-icon:active {
  fill: var(--px-sakura-3);
}
.px-alert.px-alert__sakura.px-alert__plain {
  --text-color: var(--px-sakura-6);
}
.px-alert.px-alert__sakura.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__sakura.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-sakura-5);
}
.px-alert.px-alert__sakura.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-sakura-7);
}
.px-alert.px-alert__success .px-alert-close-icon:hover,
.px-alert.px-alert__success .px-alert-close-icon:focus {
  fill: var(--px-success-2);
}
.px-alert.px-alert__success .px-alert-close-icon:active {
  fill: var(--px-success-3);
}
.px-alert.px-alert__success.px-alert__plain {
  --text-color: var(--px-success-6);
}
.px-alert.px-alert__success.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__success.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-success-5);
}
.px-alert.px-alert__success.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-success-7);
}
.px-alert.px-alert__warning .px-alert-close-icon:hover,
.px-alert.px-alert__warning .px-alert-close-icon:focus {
  fill: var(--px-warning-2);
}
.px-alert.px-alert__warning .px-alert-close-icon:active {
  fill: var(--px-warning-3);
}
.px-alert.px-alert__warning.px-alert__plain {
  --text-color: var(--px-warning-6);
}
.px-alert.px-alert__warning.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__warning.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-warning-5);
}
.px-alert.px-alert__warning.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-warning-7);
}
.px-alert.px-alert__error .px-alert-close-icon:hover,
.px-alert.px-alert__error .px-alert-close-icon:focus {
  fill: var(--px-danger-2);
}
.px-alert.px-alert__error .px-alert-close-icon:active {
  fill: var(--px-danger-3);
}
.px-alert.px-alert__error.px-alert__plain {
  --text-color: var(--px-danger-6);
}
.px-alert.px-alert__error.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__error.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-danger-5);
}
.px-alert.px-alert__error.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-danger-7);
}
.px-alert.px-alert__notice .px-alert-close-icon:hover,
.px-alert.px-alert__notice .px-alert-close-icon:focus {
  fill: var(--px-notice-2);
}
.px-alert.px-alert__notice .px-alert-close-icon:active {
  fill: var(--px-notice-3);
}
.px-alert.px-alert__notice.px-alert__plain {
  --text-color: var(--px-notice-6);
}
.px-alert.px-alert__notice.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__notice.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-notice-5);
}
.px-alert.px-alert__notice.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-notice-7);
}
.px-alert.px-alert__loading .px-alert-close-icon:hover,
.px-alert.px-alert__loading .px-alert-close-icon:focus {
  fill: var(--px-neutral-6);
}
.px-alert.px-alert__loading .px-alert-close-icon:active {
  fill: var(--px-neutral-7);
}
.px-alert.px-alert__loading.px-alert__plain {
  --text-color: var(--px-neutral-8);
}
.px-alert.px-alert__loading.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__loading.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-neutral-7);
}
.px-alert.px-alert__loading.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-neutral-9);
}
.px-alert.px-alert__normal .px-alert-close-icon:hover,
.px-alert.px-alert__normal .px-alert-close-icon:focus {
  fill: var(--px-neutral-6);
}
.px-alert.px-alert__normal .px-alert-close-icon:active {
  fill: var(--px-neutral-7);
}
.px-alert.px-alert__normal.px-alert__plain {
  --text-color: var(--px-neutral-10);
}
.px-alert.px-alert__normal.px-alert__plain .px-alert-close-icon:hover,
.px-alert.px-alert__normal.px-alert__plain .px-alert-close-icon:focus {
  fill: var(--px-neutral-8);
}
.px-alert.px-alert__normal.px-alert__plain .px-alert-close-icon:active {
  fill: var(--px-neutral-9);
}