//animations
.popup-t-enter, .popup-t-leave-to /* .popup-t-leave-active below version 2.1.8 */
  opacity: 0 !important;

//box popup
.popup-t-enter .vs-popup /* .fade-leave-active below version 2.1.8 */
  transform: scale(.9) !important;

.popup-t-leave-to .vs-popup /* .fade-leave-active below version 2.1.8 */
  transform: scale(.9) !important;

// animation: rebound .3s;


@keyframes rebound
  0%
    transform: scale(.9)
  50%
    transform: scale(1.08)
  100%
    transform: scale(1)


// cancel / text
.popup-t-enter .vs-popup-cancel, .popup-t-leave-to .vs-popup-cancel
  border-radius: 50% !important;
  propWithDir(transform, null, (8px -8px), scale(.5) !important)

.popup-t-enter .vs-popup-text, .popup-t-leave-to .vs-popup-text
  opacity: 0;
  propWithDir(transform, null, (-15px), !important)


.popup-t-enter header h3, .popup-t-leave-to header h3
  propWithDir(transform, null, (-50px), !important)
  opacity: 0;


.con-vs-popup
  transition: all .2s;
  width: 100%;
  height: 100%;
  position: fixed;
  propWithDir(left, null, 0)
  top: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;

  &.fullscreen
    .vs-popup
      width: 100%
      height: 100%

  .vs-popup
    transition: all .2s;
    z-index: 100;
    width: 600px
    margin: 10px;
    max-width: calc(100% - 30px);
    max-height: calc(100% - 30px);
    border-radius: 6px;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
    background: rgb(255, 255, 255);
    animation: rebound .3s;

    &.locked
      // background: rgb(3, 41, 203) !important;
      transform: scale(1.02);


.vs-popup--header
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, .05)
  border-radius: 5px 5px;
  position: relative;

  .before
    transition: all .23s ease .1s;
    position: absolute;
    propWithDir(left, null, 0);
    top: 50%;
    transform: translate(0, -50%);
    width: 3px;
    height: 100%;
    display: block;


.vs-popup--footer
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;

  button
    propWithDir(margin, left, 0)

.vs-popup--content
  padding: 13px;
  font-size: 0.9em;
  transition: all .23s ease .1s;
  overflow auto
  max-height: calc(100vh - 100px)
  propWithDir(margin, right, 5px)
  margin-top: 5px
  margin-bottom: 5px
  width: calc(100% - 5px)

.vs-popup--close
  transition: all .23s ease .1s;
  position: relative;
  padding: 8px;
  cursor: pointer;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
  border-radius: 5px;
  propWithDir(transform, null, (8px -8px));
  background: rgb(255, 255, 255);
  font-size: 1.25em;
  color: rgba(0, 0, 0, .6)

  &:hover
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1)
    propWithDir(transform, null, (5px -5px));

.vs-popup--title
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 5px 5px 0 0;

  h3
    transition: all .23s ease .1s;
    padding: 8px;
    padding-left: 12px;
    font-size: 1.2rem;

.vs-popup--background
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  propWithDir(left, null, 0)
  top: 0;
  height: 100%;
  z-index: 10;
  transition: all .250s ease;
  opacity: 1;

for colorx, i in $vs-colors
  .vs-popup-{colorx}
    .vs-popup--header
      color: getColor(colorx, 1)

      .before
        background: getColor(colorx, 1)