/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.5/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.3_webpack@5.99.5/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.5_sass@1.86.3_webpack@5.99.5/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/modal/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.bntn-modal {
  position: fixed !important;
  display: none;
  opacity: 0;
  box-sizing: border-box;
  outline: none;
  transition-behavior: allow-discrete;
  overflow: visible;
  max-width: var(--max-width) !important;
  max-height: calc(100vh - 210px);
  translate: var(--translate-x) var(--translate-y);
  z-index: 10;
  width: calc(100% - var(--wp--style--root--padding-left, 1rem) - var(--wp--style--root--padding-right, 1rem));
}
.bntn-modal[open] {
  display: grid;
  grid-template-columns: minmax(min(300px, 100%), 1fr);
}
.bntn-modal[open]::backdrop {
  background: var(--backdrop-color);
}
.bntn-modal.align-top-left {
  top: 0;
  left: 0;
  margin-right: auto !important;
  margin-left: 0 !important;
  translate: var(--translate-x, 0) var(--translate-y, 0);
}
.bntn-modal.align-top-center {
  top: 0;
  left: 50%;
  translate: calc(-50% + var(--translate-x, 0)) var(--translate-y, 0);
}
.bntn-modal.align-top-right {
  top: 0;
  right: 0;
  margin-left: auto !important;
  margin-right: 0 !important;
  translate: var(--translate-x, 0) var(--translate-y, 0);
}
.bntn-modal.align-center-left {
  top: 50%;
  left: 0;
  margin-right: auto !important;
  margin-left: 0 !important;
  translate: var(--translate-x, 0) calc(-50% + var(--translate-y, 0));
}
.bntn-modal.align-center-center {
  top: 50%;
  left: 50%;
  translate: calc(-50% + var(--translate-x, 0)) calc(-50% + var(--translate-y, 0));
}
.bntn-modal.align-center-right {
  top: 50%;
  right: 0;
  margin-left: auto !important;
  margin-right: 0 !important;
  translate: var(--translate-x, 0) calc(-50% + var(--translate-y, 0));
}
.bntn-modal.align-bottom-left {
  bottom: 0;
  left: 0;
  margin-right: auto !important;
  margin-left: 0 !important;
  margin-top: auto !important;
  translate: var(--translate-x, 0) var(--translate-y, 0);
}
.bntn-modal.align-bottom-center {
  bottom: 0;
  left: 50%;
  margin-top: auto !important;
  translate: calc(-50% + var(--translate-x, 0)) var(--translate-y, 0);
}
.bntn-modal.align-bottom-right {
  bottom: 0;
  right: 0;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: auto !important;
  translate: var(--translate-x, 0) var(--translate-y, 0);
}
.bntn-modal > button, .bntn-modal > form button {
  position: absolute;
  z-index: 2;
}
.bntn-modal > div {
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.bntn-modal.is-fullscreen {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
.bntn-modal__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: none;
  border: none;
  line-height: 0;
  padding: 0.75em;
  margin: 0;
  cursor: pointer;
  background: var(--close-button-bg-color);
  border-radius: 50%;
  transition: background-color ease-in-out 0.2s;
  position: relative;
  z-index: 10000;
}
.bntn-modal__close.is-top-left {
  top: 0;
  left: 0;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-top-center {
  top: 0;
  left: 50%;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-top-right {
  top: 0;
  right: 0;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-bottom-left {
  bottom: 0;
  left: 0;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-bottom-center {
  bottom: 0;
  left: 50%;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-bottom-right {
  bottom: 0;
  right: 0;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-center-left {
  top: 50%;
  left: 0;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-center-center {
  top: 50%;
  left: 50%;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close.is-center-right {
  top: 50%;
  right: 0;
  translate: var(--close-button-translate-x) var(--close-button-translate-y);
}
.bntn-modal__close svg {
  width: var(--close-button-width);
  fill: var(--close-button-color);
  transition: fill ease-in-out 0.2s;
}
.bntn-modal__close svg:hover {
  fill: var(--close-button-hover-color);
}
.bntn-modal__close:focus {
  outline: none;
}
.bntn-modal[open].topRightCornerIn {
  transform-origin: 100% 0%;
  animation: cornerScaleIn 0.3s 0.1s forwards ease-in-out;
}
.bntn-modal[open].bottomLeftCornerIn {
  transform-origin: 0% 100%;
  animation: cornerScaleIn 0.3s 0.1s forwards ease-in-out;
}
.bntn-modal.bottomLeftCornerOut {
  transform-origin: 0% 100%;
  animation: cornerScaleOut 0.3s forwards ease-in-out;
}
.bntn-modal.topRightCornerOut {
  opacity: 0;
  transform-origin: 100% 0%;
  animation: cornerScaleOut 0.3s forwards ease-in-out;
}
@keyframes cornerScaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes cornerScaleOut {
  from {
    display: grid;
    opacity: 1;
    transform: scale(1.1);
  }
  to {
    display: none;
    opacity: 0;
    transform: scale(0);
  }
}
.bntn-modal[open].scaleUpFromTop {
  animation: scaleUpFromTop 0.3s forwards ease-in-out;
}
.bntn-modal[open].scaleUpFromBottom {
  animation: scaleUpFromBottom 0.3s 0.1s forwards ease-in-out;
}
.bntn-modal.scaleDownToBottom {
  opacity: 0;
  animation: scaleDownToBottom 0.3s forwards ease-in-out;
}
.bntn-modal.scaleDownToTop {
  opacity: 0;
  animation: scaleDownToTop 0.3s forwards ease-in-out;
}
@keyframes scaleUpFromTop {
  from {
    opacity: 0;
    transform: translateY(-75%) scale(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes scaleUpFromBottom {
  from {
    opacity: 0;
    transform: translateY(75%) scale(0);
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes scaleDownToBottom {
  from {
    display: grid;
    opacity: 1;
    transform: translateY(-25%) scale(1.1);
  }
  to {
    display: none;
    opacity: 0;
    transform: translateY(75%) scale(0);
  }
}
@keyframes scaleDownToTop {
  from {
    display: grid;
    opacity: 1;
    transform: translateY(25%) scale(1.1);
  }
  to {
    display: none;
    opacity: 0;
    transform: translateY(-75%) scale(0);
  }
}
.bntn-modal[open].slideUp {
  animation: slideUp 0.4s forwards ease-in-out;
}
.bntn-modal.slideDown {
  opacity: 0;
  animation: slideDown 0.4s forwards ease-in-out;
}
.bntn-modal[open].showUp {
  animation: showUp 0.4s forwards ease-in-out;
}
.bntn-modal.hideDown {
  opacity: 0;
  animation: hideDown 0.4s forwards ease-in-out;
}
@keyframes slideDown {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: translateY(150%);
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(150%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes showUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hideDown {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: scale(0.5);
  }
}
.bntn-modal[open].growUp {
  animation: growUp 0.4s 0.3s forwards;
}
.bntn-modal.growDown {
  opacity: 0;
  animation: growDown 0.4s forwards;
}
@keyframes growUp {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes growDown {
  from {
    display: grid;
    opacity: 1;
    transform: scale(0.7);
  }
  to {
    display: none;
    opacity: 0;
    transform: scale(1.3);
  }
}
.bntn-modal[open].scaleUp {
  animation: scaleUp 0.4s 0.3s forwards;
}
.bntn-modal.scaleDown {
  opacity: 0;
  animation: scaleDown 0.4s forwards;
}
@keyframes scaleUp {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scaleDown {
  from {
    display: grid;
    transform: scale(1.3);
    opacity: 0.5;
  }
  100% {
    display: none;
    transform: scale(0);
    opacity: 0;
  }
}
.bntn-modal[open].growRotateUp {
  animation: growRotateUp 0.4s 0.3s forwards;
}
.bntn-modal.growRotateDown {
  opacity: 0;
  animation: growRotateDown 0.4s forwards;
}
@keyframes growRotateUp {
  0% {
    transform: rotate(-25deg) scale(0);
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}
@keyframes growRotateDown {
  from {
    display: grid;
    opacity: 1;
    transform: rotate(5deg) scale(0.7);
  }
  to {
    display: none;
    opacity: 0;
    transform: rotate(25deg) scale(1.3);
  }
}
.bntn-modal[open].shrinkRotateIn {
  animation: shrinkRotateIn 0.4s 0.2s forwards ease-in-out;
}
.bntn-modal.shrinkRotateOut {
  opacity: 0;
  animation: shrinkRotateOut 0.4s forwards ease-in-out;
}
@keyframes shrinkRotateIn {
  0% {
    transform: rotate(10deg) scale(1.3);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
@keyframes shrinkRotateOut {
  from {
    display: grid;
    opacity: 0.5;
    transform: rotate(-5deg) scale(1.3);
  }
  to {
    display: none;
    opacity: 0;
    transform: rotate(-25deg) scale(0);
  }
}
.bntn-modal[open].heartBeatIn {
  animation: growUp 0.4s 0.3s forwards ease-in-out;
}
.bntn-modal.heartBeatOut {
  opacity: 0;
  animation: heartBeatOut 0.4s forwards ease-in-out;
}
@keyframes heartBeatOut {
  0% {
    display: grid;
    opacity: 0.8;
    transform: scale(1.3);
  }
  80% {
    display: grid;
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  100% {
    display: none;
    opacity: 0;
    transform: scale(0.5);
    animation-timing-function: ease-out;
  }
}
.bntn-modal[open].rotate3dSlideInRight {
  animation: rotate3DSlideInRight 0.3s 0.1s forwards ease-in-out;
}
.bntn-modal.rotate3dSlideOutLeft {
  opacity: 0;
  animation: rotate3DSlideOutLeft 0.3s forwards ease-in-out;
}
@keyframes rotate3DSlideInRight {
  from {
    transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
  }
  to {
    transform: translateX(0) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
@keyframes rotate3DSlideOutLeft {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
  }
}
.bntn-modal[open].rotate3dSlideInLeft {
  animation: rotate3DSlideInLeft 0.3s 0.1s forwards;
}
.bntn-modal.rotate3dSlideOutRight {
  opacity: 0;
  animation: rotate3DSlideOutRight 0.3s forwards;
}
@keyframes rotate3DSlideInLeft {
  from {
    transform: translateX(-40%) rotateY(45deg) translateZ(-300px);
  }
  to {
    transform: translateX(0) rotateY(0deg) translateZ(0);
    opacity: 1;
  }
}
@keyframes rotate3DSlideOutRight {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: translateX(40%) rotateY(-45deg) translateZ(-300px);
  }
}
.bntn-modal[open].slideInFromLeft {
  animation: slideInFromLeft 0.4s 0.5s forwards cubic-bezier(0, 0, 0, 1);
}
.bntn-modal.rotate3dOutRight {
  opacity: 0;
  animation: rotate3DOutRight 1s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-200%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rotate3DOutRight {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: translate(50%) rotateY(-70deg) rotateX(20deg) translateZ(-300px);
  }
}
.bntn-modal[open].slideInFromRight {
  animation: slideInFromRight 0.4s 0.5s forwards cubic-bezier(0, 0, 0, 1);
}
.bntn-modal.rotate3dOutLeft {
  opacity: 0;
  animation: rotate3DOutLeft 1s forwards cubic-bezier(0.7, 0, 0.3, 1);
}
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(200%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rotate3DOutLeft {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: translate(-50%) rotateY(70deg) rotateX(20deg) translateZ(-300px);
  }
}
.bntn-modal[open].throwFromRight {
  animation: throwFromRight 0.4s 0.1s forwards ease-out;
}
.bntn-modal.scaleThrowDown {
  opacity: 0;
  animation: scaleThrowDown 0.5s forwards ease-out;
}
@keyframes throwFromRight {
  from {
    opacity: 1;
    transform: translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0);
  }
}
@keyframes scaleThrowDown {
  from {
    display: grid;
    opacity: 1;
    transform: scale(1);
  }
  to {
    display: none;
    transform: scale(0.9);
    opacity: 0;
  }
}
.bntn-modal[open].throwFromLeft {
  animation: throwFromLeft 0.4s 0.1s forwards ease-out;
}
@keyframes throwFromLeft {
  from {
    opacity: 1;
    transform: translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0);
  }
}
.bntn-modal[open].rotateInFromRight {
  transform-origin: 200% 50%;
  animation: RotateInFromRight 0.2s forwards ease-out;
}
.bntn-modal.rotateOutToRight {
  opacity: 0;
  transform-origin: 400% 50%;
  animation: RotateOutToRight 0.2s forwards ease-out;
}
@keyframes RotateInFromRight {
  from {
    opacity: 0.5;
    transform: rotateZ(-45deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes RotateOutToRight {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: rotateZ(20deg);
  }
}
.bntn-modal[open].rotateInFromLeft {
  transform-origin: -100% 50%;
  animation: RotateInFromLeft 0.2s forwards ease-out;
}
.bntn-modal.rotateOutToLeft {
  opacity: 0;
  transform-origin: -200% 50%;
  animation: RotateOutToLeft 0.2s forwards;
}
@keyframes RotateInFromLeft {
  from {
    opacity: 0.5;
    transform: rotateZ(45deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes RotateOutToLeft {
  from {
    display: grid;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
    transform: rotateZ(-20deg);
  }
}
.bntn-modal[open].skewInFromRight {
  animation: skewInFromRight 0.4s forwards ease-in;
}
.bntn-modal.skewOutToLeft {
  opacity: 0;
  animation: skewOutToLeft 0.4s forwards ease-in-out;
}
@keyframes skewInFromRight {
  0% {
    transform: skew(0deg) translateX(150%);
  }
  50% {
    animation-timing-function: ease-out;
    transform: skew(-20deg) translateX(75%);
  }
  100% {
    transform: skew(0) translateX(0);
    opacity: 1;
  }
}
@keyframes skewOutToLeft {
  from {
    display: grid;
    opacity: 0.7;
    animation-timing-function: ease-out;
    transform: skew(-20deg) translateX(-75%);
  }
  to {
    display: none;
    opacity: 0;
    transform: skew(0deg) translateX(-150%);
  }
}
.bntn-modal[open].skewInFromLeft {
  animation: skewInFromLeft 0.4s forwards ease-in;
}
.bntn-modal.skewOutToRight {
  opacity: 0;
  animation: skewOutToRight 0.4s forwards ease-in;
}
@keyframes skewInFromLeft {
  0% {
    transform: skew(0deg) translateX(-150%);
  }
  50% {
    animation-timing-function: ease-out;
    transform: skew(20deg) translateX(-75%);
  }
  100% {
    transform: skew(0) translateX(0);
    opacity: 1;
  }
}
@keyframes skewOutToRight {
  from {
    display: grid;
    opacity: 0.7;
    animation-timing-function: ease-out;
    transform: skew(20deg) translateX(75%);
  }
  to {
    display: none;
    opacity: 0;
    transform: skew(0deg) translateX(150%);
  }
}
.bntn-modal[open].slideInBounceRight {
  animation: slideInBounceRight 0.3s forwards linear;
}
.bntn-modal.slideOutBounceLeft {
  opacity: 0;
  animation: slideOutBounceLeft 0.3s forwards linear;
}
@keyframes slideInBounceRight {
  0% {
    opacity: 0;
    transform: translateX(200%);
  }
  50% {
    opacity: 0.5;
    transform: translateX(100%) rotate(-7deg);
  }
  75% {
    opacity: 0.7;
    transform: translateX(50%) rotate(7deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes slideOutBounceLeft {
  from {
    display: grid;
    opacity: 0.9;
    transform: translateX(-50%) rotate(-7deg);
  }
  to {
    display: none;
    opacity: 0;
    transform: translateX(-200%) rotate(0deg);
  }
}
.bntn-modal[open].slideInBounceLeft {
  animation: slideInBounceLeft 0.3s forwards linear;
}
.bntn-modal.slideOutBounceRight {
  opacity: 0;
  animation: slideOutBounceRight 0.3s forwards linear;
}
@keyframes slideInBounceLeft {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-100%) rotate(7deg);
  }
  75% {
    opacity: 0.7;
    transform: translateX(-50%) rotate(-7deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}
@keyframes slideOutBounceRight {
  from {
    display: grid;
    opacity: 0.9;
    transform: translateX(50%) rotate(7deg);
  }
  to {
    display: none;
    opacity: 0;
    transform: translateX(200%) rotate(0deg);
  }
}
.bntn-modal[open].shuffleRightBackIn {
  transform-origin: -50% -50%;
  animation: shuffleRightBackIn 0.5s forwards;
}
.bntn-modal.shuffleRightFrontOut {
  opacity: 0;
  transform-origin: -50% -50%;
  animation: shuffleRightFrontOut 0.5s forwards;
}
@keyframes shuffleRightBackIn {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
    transform: rotate(-20deg);
  }
  51% {
    opacity: 0.8;
    transform: rotate(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes shuffleRightFrontOut {
  from {
    display: grid;
    opacity: 1;
    transform: rotate(30deg);
  }
  to {
    display: none;
    opacity: 0;
    transform: rotate(0deg);
  }
}
.bntn-modal[open].shuffleLeftBackIn {
  transform-origin: 150% -50%;
  animation: shuffleLeftBackIn 0.5s forwards;
}
.bntn-modal.shuffleLeftFrontOut {
  opacity: 0;
  transform-origin: 150% -50%;
  animation: shuffleLeftFrontOut 0.5s forwards;
}
@keyframes shuffleLeftBackIn {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
    transform: rotate(20deg);
  }
  51% {
    opacity: 0.8;
    transform: rotate(20deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes shuffleLeftFrontOut {
  from {
    display: grid;
    opacity: 0.6;
    transform: rotate(0deg);
    transform: rotate(-30deg);
  }
  to {
    display: none;
    opacity: 0;
    transform: rotate(0deg);
  }
}

/*# sourceMappingURL=style-index.css.map*/