.bounceModalFrame-enter-active {
   animation: bounce-in 0.2s;

   .animationBox {
      animation: bounce-in-box 0.2s;
   }
}

.bounceModalFrame-leave-active {
   animation: bounce-out 0.2s;

   .animationBox {
      animation: bounce-out-box 0.2s;
   }
}

@keyframes bounce-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes bounce-out {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@keyframes bounce-in-box {
   0% {
      transform: translate(0, -30px);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes bounce-out-box {
   0% {
      transform: translate(0, 0);
   }

   100% {
      transform: translate(0, -30px);
   }
}

.h-modalFrame {
   --modalFrameTitHeight: 40px;
   --modalFrameBtnHeight: 50px;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1234567;
   background-color: $overlay-color-lighter;

   .animationBox {
      width: 100%;
      height: 100%;
   }

   .modalFrameBox {
      background-color: $bg-color;
      box-shadow: $box-shadow-light;
      border-radius: 4px;

      /*modalFrameTitle*/
      .modalFrameTitle {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 20px;
         width: 100%;
         height: var(--modalFrameTitHeight);
         border-bottom: 1px solid $border-color-lighter;
         font-size: $font-size-medium;
         color: $text-color-primary;
         cursor: move;

         &.noMove {
            cursor: auto;
         }

         .icon {
            font-size: 24px;
            color: $text-color-regular;
            cursor: pointer;

            &:hover {
               opacity: $opacity-hover;
            }
         }
      }

      /*frameBox*/
      .frameBox {
         width: 100%;
         height: calc(100% - (var(--modalFrameTitHeight) + var(--modalFrameBtnHeight)));
         overflow: hidden;
      }

      .frameBox.frameBtnNone {
         height: calc(100% - var(--modalFrameTitHeight));
      }

      /*frameBtn*/
      .frameBtn {
         padding: 0 20px;
         width: 100%;
         height: var(--modalFrameBtnHeight);
         display: flex;
         justify-content: flex-end;
         align-items: center;
      }
   }
}
