@import url(../var.less);

@directions: rtl, ltr, ttb, btt;

@keyframes w-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.drawer-animation(@direction) when (@direction = ltr) {
  @drawer-in: ~"@{direction}-drawer-in";
  @drawer-out: ~"@{direction}-drawer-out";

  @keyframes @drawer-in {
    0% {
      transform: translate(-100%, 0px);
    }

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

  @keyframes @drawer-out {
    0% {
      transform: translate(0px, 0px);
    }

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

.drawer-animation(@direction) when (@direction = rtl) {
  @drawer-in: ~"@{direction}-drawer-in";
  @drawer-out: ~"@{direction}-drawer-out";

  @keyframes @drawer-in {
    0% {
      transform: translate(100%, 0px)
    }

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

  @keyframes @drawer-out {
    0% {
      transform: translate(0px, 0px);
    }

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

.drawer-animation(@direction) when (@direction = ttb) {
  @drawer-in: ~"@{direction}-drawer-in";
  @drawer-out: ~"@{direction}-drawer-out";

  @keyframes @drawer-in {
    0% {
      transform: translate(0px, -100%)
    }

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

  @keyframes @drawer-out {
    0% {
      transform: translate(0px, 0px);
    }

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

.drawer-animation(@direction) when (@direction = btt) {
  @drawer-in: ~"@{direction}-drawer-in";
  @drawer-out: ~"@{direction}-drawer-out";

  @keyframes @drawer-in {
    0% {
      transform: translate(0px, 100%)
    }

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

  @keyframes @drawer-out {
    0% {
      transform: translate(0px, 0px);
    }

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

.animation-in(@direction) {
  @drawer-in: ~"@{direction}-drawer-in";

  .w-drawer__open &.@{direction} {
    animation: @drawer-in .3s 1ms;
  }
}

.animation-out(@direction) {
  @drawer-out: ~"@{direction}-drawer-out";

  &.@{direction} {
    animation: @drawer-out .3s ;
  }
}