@use "../../wc";

:host {
  display: inline-block;
  vertical-align: middle;
}

.chip {
  display: inline-flex;
  font-size: var(--zn-text-chip-font-size);
  font-family: var(--zn-font-family-sans);
  font-weight: var(--zn-text-chip-font-weight);
  border-radius: var(--zn-border-radius-small);
  padding-inline: var(--zn-spacing-x-small);
  padding-block: 0;
  height: var(--zn-spacing-medium);
  text-align: center;
  gap: var(--zn-spacing-x-small);
  width: fit-content;
  justify-content: center;
  align-items: center;
  line-height: var(--zn-text-chip-line-height);
  letter-spacing: var(--zn-letter-spacing-loose);
  white-space: nowrap;

  &--flush {
    padding: 0;
    height: auto;
  }

  &--flush-x {
    padding-inline: 0;
  }

  &--flush-y {
    padding-block: 0;
    height: auto;
  }
}

.chip--primary {
  color: rgba(var(--zn-primary), 0.9);
  background: rgba(var(--zn-primary), .10);
}

.chip--error {
  color: rgb(var(--zn-color-error));
  background: rgba(var(--zn-color-error), .10);
}

.chip--info {
  color: rgb(var(--zn-color-info));
  background: rgba(var(--zn-color-info), .10);
}

.chip--warning {
  color: rgb(var(--zn-color-warning));
  background: rgba(var(--zn-color-warning), .10);
}

.chip--success {
  color: rgb(var(--zn-color-success));
  background: rgba(var(--zn-color-success), .10);
}

.chip--neutral {
  color: rgb(var(--zn-text));
  background: rgba(var(--zn-border-color), .10);
}

.chip--transparent {
  color: rgb(var(--zn-text));
  background: transparent;
}

.chip--custom {
  color: rgb(var(--zn-text));
  background-color: hsl(from var(--chip-color-override, inherit) h s l / 0.1);
}

.chip__value {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: var(--zn-text-chip-transform);
}

.chip__caption {
  opacity: 0.7;
  font-weight: var(--zn-text-chip-font-weight);
  text-transform: var(--zn-text-chip-transform);

  &::after {
    content: ":";
  }
}

.chip--no-content {
  padding: var(--zn-spacing-3x-small) var(--zn-spacing-2x-small);
}

.chip--with-icon {
  padding-left: var(--zn-spacing-2x-small);
}