/* Base tagify wrapper */
.tagify {
    --tags-border-color: #D1D5DB;
    --tags-hover-border-color: #C4CADA;
    --tags-focus-border-color: #00355E;
    border: 1px solid var(--tags-border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    height: auto;
    min-height: 2.5rem;
    gap: 0 !important;
}

.tagify__input {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* Base tagify styles */
.tagify.input {
    padding-left: 0.5rem;
    padding-right: 2rem;
}

/* Increase padding-left when .select2-icon is present */
.relative .tagify-icon+.tagify.input {
    padding-left: 1.75rem;
    /* Adjust to ensure text doesn’t overlap with the icon */
}

.tagify__tag-text {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #4B5675;
}

/* Tagify focus state */
.tagify:hover {
    border-color: var(--tags-hover-border-color);
}

.tagify--focus,
.tagify:focus-within {
    border-color: var(--tags-focus-border-color);
    box-shadow: 0 0 0 0.2px var(--tags-focus-border-color);
    outline: 0.2px solid transparent;
    outline-offset: 2px;
}

/* Individual tag styling */
.tagify__tag {
    --tag-bg: #E5E7EB;
    --tag-hover: #D1D5DB;
    --tag-text-color: #1F2937;
    --tag-border-radius: 0.375rem;
    --tag-remove-btn-bg--hover: #EF4444;
    margin-left: 10px;
}

/* Tag remove button */
.tagify__tag__removeBtn {
    border-radius: 9999px;
}

.tagify__tag__removeBtn:hover {
    background: var(--tag-remove-btn-bg--hover);
    color: white;
}

/* Input placeholder */
.tagify__input::before {
    color: #99A1B7;
}

.tagify__input:focus::before {
    color: #4B5675;
}

/* Dark mode styles */
.dark .tagify {
    --tags-border-color: #4B5563;
    --tags-hover-border-color: #646D7C;
    --tags-focus-border-color: #006AE6;
    background-color: #1F212A;
}

.dark .tagify__tag {
    --tag-bg: #374151;
    --tag-hover: #4B5563;
    --tag-text-color: #E5E7EB;
}

.dark .tagify__tag-text {
    color: #E5E7EB;
}

.dark .tagify__input::before {
    color: #6B7280;
}

.dark .tagify__input {
    color: #E5E7EB;
}

.dark .tagify__input:focus::before {
    color: #6B7280;
}