@import "../../styles/variables.scss";

.pill{
  color: $brand-grey;
  border: $base-border;
  white-space: nowrap;
  padding: $s-spacing $base-spacing;
  display: flex;
  width: fit-content;
  height: fit-content;
  align-items: center;
  line-height: 1;

  &:not(:last-child) {
    margin-right: $s-spacing;
  }
}

.round {
  border-radius: 16px;
}

.rectangle {
  border-radius: $base-border-radius;
}

.closeButton {
  cursor: pointer;
  color: $brand-blue;
  font-size: $body-small-font-size;
  margin-left: $base-spacing;

  &:hover {
    color: $brand-blue-hover;
  }
}

.purple {
  background-color: $brand-purple;
}

.blue {
  background-color: $brand-blue;
}

.orange {
  background-color: $brand-orange;
}

.green {
  background-color: $brand-green;
}

.red {
  background-color: $brand-red;
}

.nearWhite {
  background-color: $brand-nearWhite;
}

.hoverwhite {
  &:hover {
    background-color: $brand-white;
  }
}

.hovernearWhite {
  &:hover {
    cursor: pointer;
    background-color: $brand-nearWhite;
  }
}

.whiteBorder {
  border-color: $brand-white;
}


.lightGreyBorder {
  border-color: $brand-lightGrey;
}

.noBorder {
  border: none;
}