/**
 * Auto-Add Select Component Styles
 * SPEC: SPEC-DESIGNSYS-002
 * Requirements: REQ-AAS-002 (Visual highlight feedback 500ms)
 *
 * Provides animation styles for the auto-add select component.
 */

/* Chip item highlight animation on add (REQ-AAS-002) */
.chip-item.highlight-new {
  animation: highlight-fade 0.5s ease;
}

@keyframes highlight-fade {
  0% {
    background-color: var(--color-success-light);
    border-color: var(--color-success-border);
    transform: scale(1.02);
  }

  50% {
    background-color: var(--color-success-medium);
    border-color: var(--color-success-border);
  }

  100% {
    background-color: var(--color-chip-bg);
    border-color: var(--color-chip-border);
    transform: scale(1);
  }
}

/* Chip item base styles */
.chip-item {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Chip item hover state */
.chip-item:hover {
  background-color: var(--color-chip-hover);
}

/* Remove button styles */
.chip-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.chip-remove-btn:hover:not(:disabled) {
  background-color: var(--color-error-hover);
}

.chip-remove-btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

/* Auto-add select wrapper */
.auto-add-select-wrapper {
  width: 100%;
}

/* Smooth show/hide transitions for chip list */
.auto-add-select-wrapper [x-show] {
  transition: opacity 0.2s ease;
}