.color-list {
  list-style: none;
  padding: 0 .5rem;
  margin: 0;
}

.color-list li {
  display: inline-block;
  margin: 1px;
}

.color {
  height: .8rem;
  width: .8rem;
  border-radius: 100px;
  background-color: attr(data-color);
  transition: transform 0.3s;
}

.color:not(.active):hover {
  cursor: pointer;
  transform: scale(1.2);
}

.color.active {
  border: 5px solid #ddd;
  width: 1.1rem;
  height: 1.1rem;
}