.vc-dialog-mask {
  @apply fixed top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none overflow-x-hidden;
}
.vc-dialog {
  @apply flex flex-col pointer-events-auto box-border rounded-md border-none;
  max-height: 90%;
  transform: scale(1);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);

  .vc-dialog-content {
    @apply overflow-y-auto bg-white text-default-text py-4 px-8 flex-grow flex-shrink-0;
    &.vc-dialog-no-footer {
      @apply rounded-b-md;
    }
    max-height: 60vh;
  }
  .vc-dialog-header {
    @apply
    flex
    items-center
    justify-between
    flex-shrink-0
    border-b
    border-ui-lines
    rounded-t-md
    bg-white bg-white p-4 flex-shrink-0 justify-between;
    .vc-dialog-title {
      @apply flex flex-grow text-center justify-center text-xl font-semibold;
    }
  }
  .vc-dialog-footer {
    @apply flex-shrink-0 border-t
    border-ui-lines bg-white
    text-default-text p-4 flex
    justify-end rounded-b-md;
  }

  .vc-dialog-header-icons {
    @apply flex flex-shrink-0 items-center justify-end;
  }
  .vc-dialog-header-icon {
    @apply flex items-center justify-center overflow-hidden relative;
    transition: all .38s ease;
    @apply text-inactive-elements;
    &:hover {
      @apply text-active-elements--focus;
    }
  }
  /* Fluid */
  .vc-fluid .vc-dialog-footer .vc-button {
    width: auto;
  }
}

.vc-component-overlay {
  @apply pointer-events-auto;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition-duration: 0.3s;
}

.vc-component-overlay-enter {
  animation: vc-component-overlay-enter-animation 150ms forwards;
}
.vc-component-overlay-leave {
  animation: vc-component-overlay-leave-animation 150ms forwards;
}

/* Animation */
/* Center */
.vc-dialog-enter-active {
  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.vc-dialog-leave-active {
  transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.vc-dialog-enter-from,
.vc-dialog-leave-to {
  opacity: 0;
  transform: scale(0.7);
}

/* Top, Bottom, Left, Right, Top* and Bottom* */
.vc-dialog-top .vc-dialog,
.vc-dialog-bottom .vc-dialog,
.vc-dialog-left .vc-dialog,
.vc-dialog-right .vc-dialog,
.vc-dialog-top-left .vc-dialog,
.vc-dialog-top-right .vc-dialog,
.vc-dialog-bottom-left .vc-dialog,
.vc-dialog-bottom-right .vc-dialog {
  margin: .75rem;
  transform: translate3d(0px, 0px, 0px);
}
.vc-dialog-top .vc-dialog-enter-active,
.vc-dialog-top .vc-dialog-leave-active,
.vc-dialog-bottom .vc-dialog-enter-active,
.vc-dialog-bottom .vc-dialog-leave-active,
.vc-dialog-left .vc-dialog-enter-active,
.vc-dialog-left .vc-dialog-leave-active,
.vc-dialog-right .vc-dialog-enter-active,
.vc-dialog-right .vc-dialog-leave-active,
.vc-dialog-top-left .vc-dialog-enter-active,
.vc-dialog-top-left .vc-dialog-leave-active,
.vc-dialog-top-right .vc-dialog-enter-active,
.vc-dialog-top-right .vc-dialog-leave-active,
.vc-dialog-bottom-left .vc-dialog-enter-active,
.vc-dialog-bottom-left .vc-dialog-leave-active,
.vc-dialog-bottom-right .vc-dialog-enter-active,
.vc-dialog-bottom-right .vc-dialog-leave-active {
  transition: all .3s ease-out;
}
.vc-dialog-top .vc-dialog-enter-from,
.vc-dialog-top .vc-dialog-leave-to {
  transform: translate3d(0px, -100%, 0px);
}
.vc-dialog-bottom .vc-dialog-enter-from,
.vc-dialog-bottom .vc-dialog-leave-to {
  transform: translate3d(0px, 100%, 0px);
}
.vc-dialog-left .vc-dialog-enter-from,
.vc-dialog-left .vc-dialog-leave-to,
.vc-dialog-top-left .vc-dialog-enter-from,
.vc-dialog-top-left .vc-dialog-leave-to,
.vc-dialog-bottom-left .vc-dialog-enter-from,
.vc-dialog-bottom-left .vc-dialog-leave-to {
  transform: translate3d(-100%, 0px, 0px);
}
.vc-dialog-right .vc-dialog-enter-from,
.vc-dialog-right .vc-dialog-leave-to,
.vc-dialog-top-right .vc-dialog-enter-from,
.vc-dialog-top-right .vc-dialog-leave-to,
.vc-dialog-bottom-right .vc-dialog-enter-from,
.vc-dialog-bottom-right .vc-dialog-leave-to {
  transform: translate3d(100%, 0px, 0px);
}
/* Maximize */
.vc-dialog-maximized {
  @apply transition-none transform-none;
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  max-height: 100%;

  &.vc-dialog {
    @apply m-0;
  }
  .vc-dialog-content {
    max-height: unset;
  }
}
.vc-dialog-maximized .vc-dialog-content {
  @apply flex-grow;
}
/* Position */
.vc-dialog-left {
  @apply justify-start;
}
.vc-dialog-right {
  @apply justify-end;
}
.vc-dialog-top {
  @apply items-start;
}
.vc-dialog-top-left {
  @apply items-start justify-start;
}
.vc-dialog-top-right {
  @apply items-start justify-end;
}
.vc-dialog-bottom {
  @apply items-end;
}
.vc-dialog-bottom-left {
  @apply justify-start items-end;
}
.vc-dialog-bottom-right {
  @apply justify-end items-end;
}
.vc-confirm-dialog .vc-dialog-content {
  @apply flex items-center;
}

@keyframes vc-component-overlay-enter-animation {
  from {
    background-color: transparent;
  }
  to {
    background-color:  rgba(0, 0, 0, 0.4);
  }
}
@keyframes vc-component-overlay-leave-animation {
  from {
    background-color:  rgba(0, 0, 0, 0.4);
  }
  to {
    background-color: transparent;
  }
}
