/* Advanced Chips base styles */

.ace-chips-wrapper {
  --ace-chip-typo-size: 1rem;
  --ace-chip-typo-weight: 400;
  --ace-chip-typo-transform: none;
  --ace-chip-typo-style: normal;
  --ace-chip-typo-decor: none;
  --ace-chip-line-height: 1.2;
  --ace-chip-letter-spacing: 0;
  --ace-chip-word-spacing: 0;

  --ace-chip-text-color: #111;
  --ace-chip-bg: #f5f5f5;
  --ace-chip-border-color: #ddd;
  --ace-chip-border-width: 1px;
  --ace-chip-radius: 999px;
  --ace-chip-shadow: none;

  --ace-chip-text-color-hover: var(--ace-chip-text-color);
  --ace-chip-bg-hover: #eee;
  --ace-chip-border-color-hover: var(--ace-chip-border-color);
  --ace-chip-shadow-hover: none;

  --ace-chip-text-color-active: #fff;
  --ace-chip-bg-active: #1976d2;
  --ace-chip-border-color-active: #1976d2;
  --ace-chip-shadow-active: none;

  --ace-chip-text-color-disabled: #888;
  --ace-chip-bg-disabled: #f0f0f0;
  --ace-chip-border-color-disabled: #e0e0e0;
  --ace-chip-shadow-disabled: none;

  --ace-chip-gap: 8px;
  --ace-chip-inner-gap: 8px;
  --ace-chip-padding-y: 6px;
  --ace-chip-padding-x: 12px;
  --ace-chip-height: auto;

  --ace-avatar-size: 24px;
  --ace-avatar-bg: #ccc;
  --ace-avatar-text-color: #111;
  --ace-avatar-radius: 50%;

  --ace-icon-padding: 0; /* inner padding for icon container */

  --ace-delete-size: 18px;
  --ace-delete-color: #666;
  --ace-delete-color-hover: #111;
  --ace-delete-radius: 50%;

  display: flex;
  flex-wrap: wrap;
  gap: var(--ace-chip-gap);
}

.ace-chips-wrapper.no-wrap { flex-wrap: nowrap; }
.ace-chips-wrapper.align-left { justify-content: flex-start; }
.ace-chips-wrapper.align-center { justify-content: center; }
.ace-chips-wrapper.align-right { justify-content: flex-end; }
.ace-chips-wrapper.align-justified { justify-content: space-between; }

.ace-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: var(--ace-chip-height);
  padding: var(--ace-chip-padding-y) var(--ace-chip-padding-x);
  gap: var(--ace-chip-inner-gap);
  border: var(--ace-chip-border-width) solid var(--ace-chip-border-color);
  border-radius: var(--ace-chip-radius);
  background: var(--ace-chip-bg);
  color: var(--ace-chip-text-color);
  box-shadow: var(--ace-chip-shadow);
  font-size: var(--ace-chip-typo-size);
  font-weight: var(--ace-chip-typo-weight);
  text-transform: var(--ace-chip-typo-transform);
  font-style: var(--ace-chip-typo-style);
  text-decoration: var(--ace-chip-typo-decor);
  line-height: var(--ace-chip-line-height);
  letter-spacing: var(--ace-chip-letter-spacing);
  word-spacing: var(--ace-chip-word-spacing);
  cursor: default;
  text-decoration: none;
  position: relative; /* needed for absolute delete */
}

.ace-chip.clickable { cursor: pointer; }
.ace-chip.outlined { background: transparent; }
.ace-chip.disabled,
.ace-chip[aria-disabled="true"] {
  pointer-events: none;
  color: var(--ace-chip-text-color-disabled);
  background: var(--ace-chip-bg-disabled);
  border-color: var(--ace-chip-border-color-disabled);
  box-shadow: var(--ace-chip-shadow-disabled);
  opacity: 0.7;
}

.ace-chip:hover:not(.disabled):not([aria-disabled="true"]) {
  color: var(--ace-chip-text-color-hover);
  background: var(--ace-chip-bg-hover);
  border-color: var(--ace-chip-border-color-hover);
  box-shadow: var(--ace-chip-shadow-hover);
}

.ace-chip.is-active:not(.disabled):not([aria-disabled="true"]) {
  color: var(--ace-chip-text-color-active);
  background: var(--ace-chip-bg-active);
  border-color: var(--ace-chip-border-color-active);
  box-shadow: var(--ace-chip-shadow-active);
}

/* Avatar/Icon containers */
.ace-chip .ace-avatar,
.ace-chip .ace-icon {
  width: var(--ace-avatar-size);
  height: var(--ace-avatar-size);
  border-radius: var(--ace-avatar-radius);
  background: var(--ace-avatar-bg);
  color: var(--ace-avatar-text-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.ace-chip .ace-icon { padding: var(--ace-icon-padding); }

.ace-chip .ace-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ace-chip .ace-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Delete control: absolute inside chip; auto space via .has-delete */
.ace-chip .ace-delete {
  position: absolute;
  top: 50%;
  right: var(--ace-chip-padding-x);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ace-delete-size);
  height: var(--ace-delete-size);
  border-radius: var(--ace-delete-radius);
  color: var(--ace-delete-color);
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}

.ace-chip .ace-delete:hover { color: var(--ace-delete-color-hover); }

.ace-chip.has-delete {
  padding-right: calc(var(--ace-chip-padding-x) + var(--ace-delete-size) + var(--ace-chip-inner-gap));
}