:root {
  --tagify-dd-color-primary: var(--gin-bg-layer3);
  --tagify-dd-bg-color: var(--gin-bg-layer2);
}

.tagify.form-element--api-entity-autocomplete-tagify-user-list:focus,
.tagify.form-element--type-select-multiple:focus,
.tagify.form-element--type-select:focus,
.tagify.form-element--api-entity-autocomplete-tagify-user-list:focus-within,
.tagify.form-element--type-select-multiple:focus-within,
.tagify.form-element--type-select:focus-within {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus) !important;
}

.tagify.form-element--api-entity-autocomplete-tagify:focus,
.tagify.form-element--type-select-multiple:focus,
.tagify.form-element--type-select:focus,
.tagify.form-element--api-entity-autocomplete-tagify:focus-within,
.tagify.form-element--type-select-multiple:focus-within,
.tagify.form-element--type-select:focus-within {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus) !important;
}

#tagify__tag-remove-button:focus {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

.tagify__dropdown__item--active {
  background: var(--gin-color-primary) !important;
}

.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
  --tag-bg: var(--gin-color-primary-light-hover) !important;
}

/* Loading spinner */
.tagify--loading .tagify__input::after {
  right: 5px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--gin-bg-input);
  border-top: 2px solid var(--gin-color-primary);
  border-radius: 50%;
}

.tagify--loading-text {
  color: var(--gin-color-primary);
}

.tagify.form-select.form-element--type-select
  .tagify__tag--editable
  .tagify__tag__info-label-wrap,
.tagify__tag--editable .tagify__tag-entity-id {
  color: var(--gin-color-text);
  background: var(--gin-color-primary-light-hover) !important;
}

.tagify.form-select.form-element--type-select
  .tagify__tag--editable
  > div::before {
  box-shadow: 0 0 0 2px var(--gin-color-primary-light-hover) inset !important;
}

/* Gin dark mode */
.gin--dark-mode .tagify {
  --tag-text-color--edit: var(--gin-color-text);
  --tag-remove-btn-color: var(--gin-color-text);
  --tag-text-color: var(--gin-color-text);
  --tag-bg: var(--gin-bg-layer);
  --placeholder-color: var(--gin-color-text-light);
  --placeholder-color-focus: var(--gin-color-text);
}

.gin--dark-mode .tagify__tag:hover > #tagify__tag-remove-button {
  color: #55565b;
  background: #dedfe4;
}

.gin--dark-mode .tagify__dropdown__item--active {
  color: var(--gin-color-primary-hover) !important;
  background-color: var(--gin-bg-item-hover) !important;
}

.gin--dark-mode #tagify__tag-remove-button:hover {
  background: #c77777 !important;
}

.gin--dark-mode .tagify__dropdown.users-list .tagify__dropdown__count {
  color: var(--gin-color-text);
  border-bottom: 1px solid #55565b;
  background-color: var(--gin-bg-layer);
}

.gin--dark-mode .tagify__tag-entity-id,
.gin--dark-mode #tagify__tag__entity-id-wrap,
.gin--dark-mode #tagify__tag__info-label-wrap {
  color: var(--gin-color-text);
  background-color: #55565b;
}

.gin--dark-mode #tagify__tag-items .tagify__tag__info-label-wrap {
  transition: none;
}

.gin--dark-mode .tagify__tag:hover > #tagify__tag-items .tagify__tag-entity-id,
.gin--dark-mode
  .tagify__tag:hover
  > #tagify__tag-items
  .tagify__tag__info-label-wrap {
  color: #55565b;
  background-color: var(--gin-color-text);
}

.gin--dark-mode
  .tagify.form-select.form-element--type-select
  .tagify__tag--editable
  #tagify__tag-remove-button {
  background: none !important;
}

.gin--dark-mode
  .tagify.form-select.form-element--type-select.tagify__tag--editable.tagify__tag:hover
  > #tagify__tag-items
  .tagify__tag-entity-id,
.gin--dark-mode
  .tagify.form-select.form-element--type-select
  .tagify__tag--editable.tagify__tag:hover
  > #tagify__tag-items
  .tagify__tag__info-label-wrap {
  color: var(--gin-color-text);
}