/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
@keyframes pulse {
  0% {
    scale: 100%;
    opacity: 1;
  }
  20% {
    scale: 140%;
    opacity: 0;
  }
  21% {
    scale: 100%;
    opacity: 1;
  }
  40% {
    scale: 140%;
    opacity: 0;
  }
  41% {
    scale: 140%;
    opacity: 0;
  }
  100% {
    scale: 140%;
    opacity: 0;
  }
}
.color--system {
  background-color: var(--color-system, #B2DFFD);
  color: var(--color-system, #B2DFFD);
}
.color--danger {
  background-color: var(--color-error, #f99f9f);
  color: var(--color-error, #f99f9f);
}
.color--warning {
  background-color: var(--color-warning, #fde99b);
  color: var(--color-warning, #fde99b);
}
.color--success {
  background-color: var(--color-success, #84ebbc);
  color: var(--color-success, #84ebbc);
}
.color--neutral {
  background-color: var(--color-surface-3, #CFCFCF);
  color: var(--color-surface-3, #CFCFCF);
}

:host {
  display: inline-flex;
}

.chip_size {
  min-width: 24px;
}

.chip_badge .status {
  width: 8px;
  height: 8px;
}
.chip_badge .status--circle {
  width: 0;
  height: 0;
  border: 4px solid;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .status--circle-true::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  border: 1px solid;
  border-radius: 8px;
  animation: pulse 2s ease-out infinite;
}
.chip_badge .status--triangle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid;
}
.chip_badge .status--triangle-reverse {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid;
}
.chip_badge .status--polygon {
  width: 0;
  height: 0;
  border: 4px solid;
  rotate: 45deg;
}
.chip_badge .status--square {
  width: 0;
  height: 0;
  border: 4px solid;
}
.chip_badge .icon {
  position: relative;
}
.chip_badge .icon bds-icon {
  position: absolute;
}
.chip_badge .icon .bds-icon {
  color: var(--color-content-default, #454545);
}
.chip_badge .icon--circle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .icon--circle .trim {
  width: 24px;
  height: 24px;
  border-radius: 16px;
}
.chip_badge .icon--circle .trim-true::before {
  content: "";
  width: 24px;
  height: 24px;
  left: -2px;
  top: -2px;
  position: absolute;
  border: 2px solid;
  border-radius: 16px;
  animation: pulse 2s ease-out infinite;
}
.chip_badge .icon--triangle {
  display: flex;
  justify-content: center;
  align-items: end;
}
.chip_badge .icon--triangle .trim {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.chip_badge .icon--triangle-reverse {
  display: flex;
  justify-content: center;
  align-items: start;
}
.chip_badge .icon--triangle-reverse .trim {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.chip_badge .icon--polygon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .icon--polygon .trim {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.chip_badge .icon--square {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .icon--square .trim {
  width: 24px;
  height: 24px;
}
.chip_badge .number {
  display: flex;
  height: 24px;
  padding: 0 8px;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  position: relative;
}
.chip_badge .number--true::before {
  content: "";
  width: 100%;
  height: 24px;
  left: -2px;
  top: -2px;
  position: absolute;
  border: 2px solid;
  border-radius: 16px;
  animation: pulse 2s ease-out infinite;
}
.chip_badge .number .number_text {
  color: var(--color-content-default, #454545);
}
.chip_badge .empty {
  display: flex;
  min-height: 24px;
  min-width: 24px;
  position: relative;
}
.chip_badge .empty--true::before {
  content: "";
  width: 100%;
  height: 24px;
  left: -2px;
  top: -2px;
  position: absolute;
  border: 2px solid;
  border-radius: 16px;
  animation: pulse 2s ease-out infinite;
}
.chip_badge .empty--circle {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .empty--circle .trim {
  width: 24px;
  height: 24px;
  border-radius: 16px;
}
.chip_badge .empty--circle .trim-true::before {
  content: "";
  width: 24px;
  height: 24px;
  left: -2px;
  top: -2px;
  position: absolute;
  border: 2px solid;
  border-radius: 16px;
  animation: pulse 2s ease-out infinite;
}
.chip_badge .empty--triangle {
  display: flex;
  justify-content: center;
  align-items: end;
}
.chip_badge .empty--triangle .trim {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.chip_badge .empty--triangle-reverse {
  display: flex;
  justify-content: center;
  align-items: start;
}
.chip_badge .empty--triangle-reverse .trim {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.chip_badge .empty--polygon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .empty--polygon .trim {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.chip_badge .empty--square {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chip_badge .empty--square .trim {
  width: 24px;
  height: 24px;
}