/**
 * @since 2018-05-20 13:55:28
 * @author vivaxy
 */

body {
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.item {
  background: #999999;
  position: absolute;
  color: #333;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.new-array {
  position: absolute;
  height: 50%;
  top: 0;
  opacity: 0;
}

.new-array.show {
  opacity: 1;
}

.new-array-B {
  background: #ccccff;
}

.new-array-C {
  background: #ccffcc;
}

.mark:after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-10px);
}

.item.compare {
  animation-name: flash;
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}