.color-picker {
  display: flex;
  flex-wrap: wrap;
}
.color-box {
  margin: 4px 4px 4px 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.1s cubic-bezier(0.75, 0, 0.5, 1);
}
.color-box:hover {
  outline: 2px solid var(--ion-color-primary);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  transform: scale(1.1);
  transform-origin: center;
}
.color-box-selected {
  outline: 2px solid var(--ion-color-primary);
  transform: scale(1.1);
  transform-origin: center;
}
.color-box-not-selected {
  opacity: 0.5;
}