.category-box {
  padding: 1em;
  max-width: 400px;
  position: absolute;
  top: -480px;
  padding: 2em;
  border-radius: 2px;
  background-color: $white;
  box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
  z-index: 2;
}

.category-label {
  min-width: 100px;
  border-radius: 100px;
  background-color: $gray-600;
  padding: 4px 12px;
  display: inline-block;
  margin-right: 4px;
  margin-top: 8px;
  text-align: center;

  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: $gray-100;
}

.category-label-purple {
  color: white;
  background: $purple-300;
}

.category-label-blue {
  color: white;
  background: $blue-50;
}

.category-label-green {
  color: white;
  background: $green-50;
}

.category-select {
  border-radius: 2px;
  background-color: $white;
  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
  padding: 1em;
}

.category-select:hover {
  cursor: pointer;
}

.category-wrap {
  margin-top: .5em;
}
