$bar: 160px;
$foo: $bar * 8;
$color: #e2e4ec;

.loader {
  margin-bottom: 39px;
  overflow: auto;
}

.sidenav {
  overflow-x: hidden;
}

@keyframes move {
  0% {
    left: 0;
  }

  16.7% {
    left: 0;
  }

  33.3% {
    left: calc($foo / 2);
  }

  50% {
    left: $foo - $bar;
  }

  66.7% {
    left: calc($foo / 2);
  }

  83.3% {
    left: 0;
  }

  100% {
    left: 0;
  }
}

@keyframes grow {
  0% {
    width: $bar;
  }

  16.7% {
    width: calc($foo / 2);
  }

  33.3% {
    width: calc($foo / 2);
  }

  50% {
    width: $bar;
  }

  66.7% {
    width: calc($foo / 2);
  }

  83.3% {
    width: calc($foo / 2);
  }

  100% {
    width: $bar;
  }
}