@innovaccer/design-system/css/src/ai-components/chip.module.css

React components library project for Innovaccer Design System

.AIChip {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-30);
  padding: var(--spacing-05) var(--spacing-20);
  cursor: pointer;
  width: fit-content;
  border: 0;
  position: relative;
  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
}

.AIChip:hover {
  background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
}

.AIChip:active {
  background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
}

.AIChip:focus,
.AIChip:focus-visible {
  outline: var(--border-width-05) solid var(--primary-dark);
  outline-offset: var(--spacing-05);
  border-radius: var(--border-radius-full);
}

.AIChip-icon {
  width: var(--spacing-40);
  height: var(--spacing-40);
  font-size: var(--spacing-40) !important;
  margin-right: var(--spacing-10);
  background-clip: text;
  color: var(--inverse);
}

.AIChip-text {
  color: var(--inverse);
  font-size: var(--font-size);
  line-height: var(--font-height);
  font-family: var(--font-family);
}

/* Disabled Chip */

.AIChip--disabled {
  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
}

.AIChip-icon--disabled {
  background-clip: text;
  color: var(--inverse-lightest);
}

.AIChip-text--disabled {
  color: var(--inverse-lightest);
}

.AIChip:disabled {
  cursor: not-allowed;
  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
}

.AIChip-AIIcon {
  position: absolute;
  top: calc(-1 * var(--spacing-05));
  right: calc(-1 * var(--spacing-05));
}