:host {
  display: inline-block;
}

.container {
  display: flex;
  min-height: 1.25em;
  align-items: center;
  padding: 0 8px;
  border-radius: 9999px;
  font-family: var(--ifx-font-family);
}
.container.no-border {
  padding: 0;
}
.container.border-engineering-100 {
  border: 1px solid #f7f7f7;
}
.container.border-engineering-200 {
  border: 1px solid #eeeded;
}
.container.border-engineering-300 {
  border: 1px solid #bfbbbb;
}
.container.border-engineering-400 {
  border: 1px solid #8d8786;
}
.container.border-engineering-500 {
  border: 1px solid #575352;
}
.container.border-engineering-600 {
  border: 1px solid #3c3a39;
}
.container.border-ocean-100 {
  border: 1px solid #dff4f3;
}
.container.border-ocean-200 {
  border: 1px solid #b8deda;
}
.container.border-ocean-300 {
  border: 1px solid #6cb4ad;
}
.container.border-ocean-400 {
  border: 1px solid #3b9b91;
}
.container.border-ocean-500 {
  border: 1px solid #0a8276;
}
.container.border-ocean-600 {
  border: 1px solid #08665c;
}
.container.border-ocean-700 {
  border: 1px solid #06534b;
}
.container.border-red-500 {
  border: 1px solid #cd002f;
}
.container.border-red-600 {
  border: 1px solid #a2001e;
}
.container.border-red-700 {
  border: 1px solid #900021;
}
.container.border-orange-500 {
  border: 1px solid #e16b25;
}
.container.border-green-500 {
  border: 1px solid #4ca460;
}
.container.border-lawn-400 {
  border: 1px solid #b9d257;
}
.container.border-lawn-500 {
  border: 1px solid #9bba43;
}
.container.border-lawn-700 {
  border: 1px solid #3c6c0f;
}
.container.border-berry-400 {
  border: 1px solid #be3283;
}
.container.border-berry-500 {
  border: 1px solid #9c216e;
}
.container.border-sun-400 {
  border: 1px solid #ff9737;
}
.container.border-sun-500 {
  border: 1px solid #f97414;
}
.container.border-sand-400 {
  border: 1px solid #fbe273;
}
.container.border-sand-500 {
  border: 1px solid #fcd442;
}

.text {
  margin: 0;
  padding-left: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: inline;
  color: #1d1d1d;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.dot.engineering-100 {
  background-color: #f7f7f7;
}
.dot.engineering-200 {
  background-color: #eeeded;
}
.dot.engineering-300 {
  background-color: #bfbbbb;
}
.dot.engineering-400 {
  background-color: #8d8786;
}
.dot.engineering-500 {
  background-color: #575352;
}
.dot.engineering-600 {
  background-color: #3c3a39;
}
.dot.ocean-100 {
  background-color: #dff4f3;
}
.dot.ocean-200 {
  background-color: #b8deda;
}
.dot.ocean-300 {
  background-color: #6cb4ad;
}
.dot.ocean-400 {
  background-color: #3b9b91;
}
.dot.ocean-500 {
  background-color: #0a8276;
}
.dot.ocean-600 {
  background-color: #08665c;
}
.dot.ocean-700 {
  background-color: #06534b;
}
.dot.red-500 {
  background-color: #cd002f;
}
.dot.red-600 {
  background-color: #a2001e;
}
.dot.red-700 {
  background-color: #900021;
}
.dot.orange-500 {
  background-color: #e16b25;
}
.dot.green-500 {
  background-color: #4ca460;
}
.dot.lawn-400 {
  background-color: #b9d257;
}
.dot.lawn-500 {
  background-color: #9bba43;
}
.dot.lawn-700 {
  background-color: #3c6c0f;
}
.dot.berry-400 {
  background-color: #be3283;
}
.dot.berry-500 {
  background-color: #9c216e;
}
.dot.sun-400 {
  background-color: #ff9737;
}
.dot.sun-500 {
  background-color: #f97414;
}
.dot.sand-400 {
  background-color: #fbe273;
}
.dot.sand-500 {
  background-color: #fcd442;
}