@use 'sass:math';
@keyframes expand {
  0% {
    transform: translateX(100%);
  }

  35% {
    transform: translateX(100%);
  }

  85% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(0%);
  }
}

@keyframes exiting {
  100% {
    transform: translateX(100%);
  }

  65% {
    transform: translateX(100%);
  }

  50% {
    opacity: 0;
  }

  15% {
    transform: translateX(-5%);
    opacity: 1;
  }

  0% {
    transform: translateX(0%);
  }
}
$duration: 1s;

.elementExiting {
  animation-duration: $duration !important;
  animation-name: exiting;
  position: absolute;
}

.elementEntering {
  animation-duration: $duration !important;
  animation-name: expand;
}
.elementExitingReverse {
  animation-duration: $duration !important;
  animation-name: exiting;
}

.elementEnteringReverse {
  animation-duration: $duration !important;
  animation-name: expand;
  position: absolute;
}

.resetHeight {
  transition: max-height math.div($duration, 2) $duration * 0.2;
  min-height: initial;
  align-items: flex-start !important;
  flex-shrink: 0;
  > * {
    justify-content: flex-start !important;
  }
}

.maxHeight {
  max-height: 0px;
}

@keyframes nothing {
  100% {
    transform: translateX(0%);
  }

  0% {
    transform: translateX(0%);
  }
}

.elementShrinking {
  animation-duration: $duration !important;
  animation-name: nothing;
  position: absolute;
}

.elementExpanding {
  animation-duration: $duration !important;
  animation-name: nothing;
}
.elementShrinkingReverse {
  animation-duration: $duration !important;
  animation-name: nothing;
}

.elementExpandingReverse {
  animation-duration: $duration !important;
  animation-name: nothing;
  position: absolute;
}
