/* Fix spatie/nova-tags-field styling to match Nova 5 form inputs */
.tags-input.form-control {
  box-sizing: border-box;
  min-height: 2.25rem;
  height: auto;
  padding: 0.375rem 0.75rem !important;
  gap: 0.25rem;
  background-color: rgb(255 255 255) !important;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-color: rgba(var(--colors-gray-950), 0.1);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

.dark .tags-input.form-control,
.tags-input.form-control:is(.dark *) {
  background-color: rgba(var(--colors-gray-900)) !important;
  --tw-ring-color: rgba(var(--colors-gray-100), 0.1);
}

.tags-input.form-control:focus-within {
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-color: rgba(var(--colors-primary-500));
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

.tags-input.form-control input {
  width: auto !important;
  flex: 1 1 8rem;
  min-width: 8rem;
  background: transparent !important;
}

.tags-input.form-control span.bg-primary-500 {
  background-color: rgba(var(--colors-primary-500)) !important;
}