@use "../utility/globals";

.container {
  box-sizing: inherit;
  display: inline-block;
  position: relative;
}

.enter {
  opacity: 0;

  .top & {
    transform: translateY(-50px);
  }

  .bottom & {
    transform: translateY(50px);
  }

  .left & {
    transform: translateX(-50px);
  }

  .right & {
    transform: translateX(50px);
  }
}

.enterActive {
  opacity: 1;
  transition: all 200ms;

  .container & {
    transform: none;
  }
}

.exit {
  opacity: 1;
}

.exitActive {
  opacity: 0;
  transition: all 200ms;
}