/* Tagify styles for Recipe Tags */
.tagify__custom {
  padding-left: 2rem !important;
}

.tagify__tag {
  margin: 2px;
}

.tagify__tag > div {
  border-radius: var(--tag-border-radius);
}

.tagify__tag__removeBtn {
  color: var(--tag-text-color);
  opacity: 0.6;
}

.tagify__tag__removeBtn:hover {
  opacity: 1;
  background: transparent;
}

.tagify__input {
  min-width: 120px;
}

.tagify-dropdown {
  z-index: 50;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  max-height: 200px;
  overflow-y: auto;
  background: white;
}

.tagify__dropdown__item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.tagify__dropdown__item--active {
  background: var(--tag-bg);
  color: var(--tag-text-color);
}

/* Override default styles for seamless integration */
.tagify.tagify--focus {
  border-color: var(--tags-focus-border-color);
  box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1);
}

/* Remove default Tagify outline to keep the form's outline style */
.tagify-input.tagify--focus {
  outline: none;
}