.ax-popup.data-v-22adda78{ --duration: 150ms; --mask-background: transparent; display: flex; align-items: center; justify-content: center; flex-direction: column; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; } .ax-popup .__mask.data-v-22adda78{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-backdrop-filter: var(--mask-blur); backdrop-filter: var(--mask-blur); background-color: var(--mask-background); z-index: 0; -webkit-animation: showMask-data-v-22adda78 var(--duration) ease-out 1; animation: showMask-data-v-22adda78 var(--duration) ease-out 1; } @-webkit-keyframes showMask-data-v-22adda78{ 0%{opacity: 0;} 100%{opacity: 1;} } @keyframes showMask-data-v-22adda78{ 0%{opacity: 0;} 100%{opacity: 1;} } .ax-popup .__body.data-v-22adda78{ position: relative; z-index: 1; -webkit-animation: showBody-data-v-22adda78 var(--duration) ease-out 1; animation: showBody-data-v-22adda78 var(--duration) ease-out 1; } @-webkit-keyframes showBody-data-v-22adda78{ 0%{-webkit-transform: translateY(75%);transform: translateY(75%);opacity: 0;} 100%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} } @keyframes showBody-data-v-22adda78{ 0%{-webkit-transform: translateY(75%);transform: translateY(75%);opacity: 0;} 100%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} } .ax-popup.black .__mask.data-v-22adda78{ --mask-background: rgba(0, 0, 0, 0.35); } .ax-popup.white .__mask.data-v-22adda78{ --mask-background: rgba(255, 255, 255, 0.85); } .ax-popup.close .__mask.data-v-22adda78{ -webkit-animation-name: closeMask-data-v-22adda78; animation-name: closeMask-data-v-22adda78; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes closeMask-data-v-22adda78{ 0%{opacity: 1;} 100%{opacity: 0;} } @keyframes closeMask-data-v-22adda78{ 0%{opacity: 1;} 100%{opacity: 0;} } .ax-popup.close .__body.data-v-22adda78{ -webkit-animation-name: closeBody-data-v-22adda78; animation-name: closeBody-data-v-22adda78; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes closeBody-data-v-22adda78{ 0%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} 100%{-webkit-transform: translateY(-75%);transform: translateY(-75%);opacity: 0;} } @keyframes closeBody-data-v-22adda78{ 0%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} 100%{-webkit-transform: translateY(-75%);transform: translateY(-75%);opacity: 0;} } .ax-popup.top.data-v-22adda78{ justify-content: flex-start; } .ax-popup.top .__body.data-v-22adda78{ -webkit-animation-name: showTopBody-data-v-22adda78; animation-name: showTopBody-data-v-22adda78; } .ax-popup.top.close .__body.data-v-22adda78{ -webkit-animation-name: closeTopBody-data-v-22adda78; animation-name: closeTopBody-data-v-22adda78; } @-webkit-keyframes showTopBody-data-v-22adda78{ 0%{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity: 0;} 100%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} } @keyframes showTopBody-data-v-22adda78{ 0%{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity: 0;} 100%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} } @-webkit-keyframes closeTopBody-data-v-22adda78{ 0%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} 100%{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity: 0;} } @keyframes closeTopBody-data-v-22adda78{ 0%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} 100%{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity: 0;} } .ax-popup.bottom.data-v-22adda78{ justify-content: flex-end; } .ax-popup.bottom .__body.data-v-22adda78{ -webkit-animation-name: showBottomBody-data-v-22adda78; animation-name: showBottomBody-data-v-22adda78; } .ax-popup.bottom.close .__body.data-v-22adda78{ -webkit-animation-name: closeBottomBody-data-v-22adda78; animation-name: closeBottomBody-data-v-22adda78; } @-webkit-keyframes showBottomBody-data-v-22adda78{ 0%{-webkit-transform: translateY(100%);transform: translateY(100%);opacity: 0;} 100%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} } @keyframes showBottomBody-data-v-22adda78{ 0%{-webkit-transform: translateY(100%);transform: translateY(100%);opacity: 0;} 100%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} } @-webkit-keyframes closeBottomBody-data-v-22adda78{ 0%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} 100%{-webkit-transform: translateY(100%);transform: translateY(100%);opacity: 0;} } @keyframes closeBottomBody-data-v-22adda78{ 0%{-webkit-transform: translateY(0%);transform: translateY(0%);opacity: 1;} 100%{-webkit-transform: translateY(100%);transform: translateY(100%);opacity: 0;} } .ax-popup.left.data-v-22adda78{ align-items: flex-start; } .ax-popup.left .__body.data-v-22adda78{ -webkit-animation-name: showLeftBody-data-v-22adda78; animation-name: showLeftBody-data-v-22adda78; } .ax-popup.left.close .__body.data-v-22adda78{ -webkit-animation-name: closeLeftBody-data-v-22adda78; animation-name: closeLeftBody-data-v-22adda78; } @-webkit-keyframes showLeftBody-data-v-22adda78{ 0%{-webkit-transform: translateX(-100%);transform: translateX(-100%);opacity: 0;} 100%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} } @keyframes showLeftBody-data-v-22adda78{ 0%{-webkit-transform: translateX(-100%);transform: translateX(-100%);opacity: 0;} 100%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} } @-webkit-keyframes closeLeftBody-data-v-22adda78{ 0%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} 100%{-webkit-transform: translateX(-100%);transform: translateX(-100%);opacity: 0;} } @keyframes closeLeftBody-data-v-22adda78{ 0%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} 100%{-webkit-transform: translateX(-100%);transform: translateX(-100%);opacity: 0;} } .ax-popup.right.data-v-22adda78{ align-items: flex-end; } .ax-popup.right .__body.data-v-22adda78{ -webkit-animation-name: showRightBody-data-v-22adda78; animation-name: showRightBody-data-v-22adda78; } .ax-popup.right.close .__body.data-v-22adda78{ -webkit-animation-name: closeRightBody-data-v-22adda78; animation-name: closeRightBody-data-v-22adda78; } @-webkit-keyframes showRightBody-data-v-22adda78{ 0%{-webkit-transform: translateX(100%);transform: translateX(100%);opacity: 0;} 100%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} } @keyframes showRightBody-data-v-22adda78{ 0%{-webkit-transform: translateX(100%);transform: translateX(100%);opacity: 0;} 100%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} } @-webkit-keyframes closeRightBody-data-v-22adda78{ 0%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} 100%{-webkit-transform: translateX(100%);transform: translateX(100%);opacity: 0;} } @keyframes closeRightBody-data-v-22adda78{ 0%{-webkit-transform: translateX(0%);transform: translateX(0%);opacity: 1;} 100%{-webkit-transform: translateX(100%);transform: translateX(100%);opacity: 0;} }