@freshworks/crayons/dist/collection/components/pill/pill.css

Crayons Web Components library

/* Need to check with designer */
/* Need to check with designer */
:host {
  font-family: var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/**
  @prop --fw-pill-color: Pill color
  @prop --fw-pill-background-color: Pill background color
  @prop --fw-pill-padding: Pill padding
  @prop --fw-pill-border: Pill border
  @prop --fw-pill-border-radius: Pill border radius
*/
:host {
  --fw-pill-border: none;
  --fw-pill-border-radius: 16px;
  --fw-pill-padding: 5px 12px 5px 8px;
  --fw-pill-color: #475867;
  --fw-pill-background-color: #ebeff3;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fw-pill-color);
  background-color: var(--fw-pill-background-color);
  padding: var(--fw-pill-padding);
  border: var(--fw-pill-border);
  border-radius: var(--fw-pill-border-radius);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
}
.pill ::slotted(*) {
  height: 14px;
  width: 14px;
}
.pill .pill-icon {
  height: 14px;
  width: 14px;
  margin-right: 6px;
}
.pill ::slotted(fw-icon) {
  --fw-icon-size: 14px;
  --fw-icon-color: #475867;
}
.pill--blue {
  background-color: #e5f2fd;
  color: #2c5cc5;
}
.pill--blue ::slotted(fw-icon) {
  --fw-icon-color: #2c5cc5;
}
.pill--red {
  background-color: #ffecf0;
  color: #d72d30;
}
.pill--red ::slotted(fw-icon) {
  --fw-icon-color: #d72d30;
}
.pill--green {
  background-color: #e0f5f1;
  color: #00795b;
}
.pill--green ::slotted(fw-icon) {
  --fw-icon-color: #00795b;
}
.pill--yellow {
  background-color: #fef1e1;
  color: #e86f25;
}
.pill--yellow ::slotted(fw-icon) {
  --fw-icon-color: #e86f25;
}
.pill--grey {
  background-color: #ebeff3;
  color: #475867;
}
.pill--grey ::slotted(fw-icon) {
  --fw-icon-color: #475867;
}