/* Collection Box Component Styles */
.collection-box {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--color-light);
  border: 2px solid var(--color-gray);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.1em;
  transition: all 0.2s;
}

.collection-box:hover {
  border-color: var(--color-dark-purple);
}

.collection-box.collection-box--selected {
  /*background: var(--color-light);*/
  background: color-mix(in srgb, var(--color-gray), transparent 80%);
  border-color: var(--color-light-purple);
  color: var(--color-dark);
}

.collection-box--selected:hover {
  border-color: var(--color-gray);
}