:root {
  --bzn-trans-cubic-bezier: cubic-bezier(0.215, 0.61, 0.455, 1);
  --bzn-trans-duration: 0.4s;
  --bzn-color-success: #0f5132;
  --bzn-background-color-success: #d1e7dd;
  --bzn-border-color-success: #badbcc;
  --bzn-color-danger: #842029;
  --bzn-background-color-danger: #f8d7da;
  --bzn-border-color-danger: #f5c2c7;
  --bzn-color-warning: #664d03;
  --bzn-background-color-warning: #fff3cd;
  --bzn-border-color-warning: #ffecb5;
  --bzn-color-info: #055160;
  --bzn-background-color-info: #cff4fc;
  --bzn-border-color-info: #b6effb;
}
@keyframes fadeOutTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-50px);
    opacity: 0;
  }
}
@keyframes fadeOutBottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}
@keyframes fadeInTop {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeInBottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: var(--bzn-trans-cubic-bezier);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceInUp {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: var(--bzn-trans-cubic-bezier);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes slideInBlurredTop {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(240px);
    opacity: 0;
  }
  to {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideOutBlurredTop {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 0%;
    filter: blur(0);
    opacity: 1;
  }
  to {
    transform: translateY(-1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(240px);
    opacity: 0;
  }
}
@keyframes slideInBlurredBottom {
  0% {
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(240px);
    opacity: 0;
  }
  to {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideOutBlurredBottom {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  to {
    transform: translateY(1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(240px);
    opacity: 0;
  }
}
[data-notify] {
  position: relative;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  width: 10vw;
}
[data-notify] [data-notify-wrapper-position] {
  position: fixed;
}
[data-notify] [data-notify-wrapper-position='top-left'] {
  top: 10px;
  left: 10px;
}
[data-notify] [data-notify-wrapper-position='top-center'] {
  top: 10px;
  left: 50%;
  transform: translate(-50%);
}
[data-notify] [data-notify-wrapper-position='top-right'] {
  top: 10px;
  right: 10px;
}
[data-notify] [data-notify-wrapper-position='bottom-left'] {
  bottom: 10px;
  left: 10px;
}
[data-notify] [data-notify-wrapper-position='bottom-center'] {
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
[data-notify] [data-notify-wrapper-position='bottom-right'] {
  bottom: 10px;
  right: 10px;
}
[data-notify] [data-notify-wrapper-position|='top'] .fade-active {
  animation: fadeInTop var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='bottom'] .fade-active {
  animation: fadeInBottom var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='top'] .fade-leave {
  animation: fadeOutTop var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='bottom'] .fade-leave {
  animation: fadeOutBottom var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='top'] .bounce-active {
  animation: bounceInDown var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='bottom'] .bounce-active {
  animation: bounceInUp var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='top'] .bounce-leave {
  animation: bounceOutUp var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='bottom'] .bounce-leave {
  animation: bounceOutDown var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='top'] .slide-blurred-active {
  animation: slideInBlurredTop var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='bottom'] .slide-blurred-active {
  animation: slideInBlurredBottom var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='top'] .slide-blurred-leave {
  animation: slideOutBlurredTop var(--bzn-trans-duration);
}
[data-notify] [data-notify-wrapper-position|='bottom'] .slide-blurred-leave {
  animation: slideOutBlurredBottom var(--bzn-trans-duration);
}
[data-notify] .notify {
  box-sizing: border-box;
  width: fit-content;
  display: grid;
  grid-template-areas: var(---area);
  column-gap: 0.33rem;
  padding: 0.25rem;
  padding-right: calc(0.33rem + 0.25rem);
  margin: auto;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: opacity var(--bzn-trans-duration);
  user-select: none;
  cursor: pointer;
}
[data-notify] .notify__title {
  grid-area: title;
  align-self: center;
  font-weight: 500;
  color: #0b2e13;
}
[data-notify] .notify__icon {
  display: flex;
  grid-area: icon;
  align-self: center;
  justify-self: center;
}
[data-notify] .notify__content {
  grid-area: content;
}
[data-notify] .notify--success {
  color: var(--bzn-color-success);
  background-color: var(--bzn-background-color-success);
  border-color: var(--bzn-border-color-success);
}
[data-notify] .notify--danger {
  color: var(--bzn-color-danger);
  background-color: var(--bzn-background-color-danger);
  border-color: var(--bzn-border-color-danger);
}
[data-notify] .notify--warning {
  color: var(--bzn-color-warning);
  background-color: var(--bzn-background-color-warning);
  border-color: var(--bzn-border-color-warning);
}
[data-notify] .notify--info {
  color: var(--bzn-color-info);
  background-color: var(--bzn-background-color-info);
  border-color: var(--bzn-border-color-info);
}