.commafield {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  overflow: hidden;
  height: 33px;
  padding: 3px 8px;
  margin: 0;
  font-size: 17px;

  font-family: inherit;
}

.commafield input {
  font-size: 1em;

  /* Kill default styles */
  outline: none;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
  background-color: transparent;

  /* Layout */
  margin: 2px 5px 3px 0;
  padding: 0;
  flex: 2;
  height: 85%;
}

.item {
  background-color: rgba(139, 205, 255, 0.6);
  color: #333;

  padding: 2px 8px;
  margin: -1px 5px 0 0;
  display: flex;
  align-items: center;
  border-radius: 3px;

  flex: 0 0 auto;

  cursor: pointer;

  transition: background-color 0.3s ease-in-out;
}

.item::after {
  /* Font styles */
  font-size: 0.75em;
  color: rgb(241, 62, 34);

  /* Add a close button */
  font-family: Ionicons;
  content: "\00a0\f12a";

  /* Allow animating the unfurl of the close button */
  transition: max-width 0.3s ease-in-out, padding 0.1s 0.2s ease-in-out;
  overflow: hidden;
  display: inline-block;
  transform: translateY(7%);
  max-width: 0;
}

.item:not(.locked):hover {
  background-color: rgba(255, 121, 100, 0.6);
}

.item:not(.locked):hover::after {
  max-width: 17px; /* Animate the x unfurling. */
  padding-left: 3px;
  padding-right: 1px;
  transition: max-width 0.3s ease-in-out, padding-left 0.1s ease-in-out;
}

.item.locked {
  cursor: not-allowed;
  background-color: rgba(140, 161, 175, 0.6);
}