/* Timebank customizations for tagify package */

@keyframes tags--bump {
    30% {
        transform: scale(1.1);
    }
}

.tagify__tag__removeBtn {
    transition: 0.05s ease-out;
    pointer-events: auto;
    width: 24px !important;
    height: 24px !important;
    font-size: 20px !important;
}

.tagify__tag__removeBtn:hover+div>span {
    opacity: 1; 
}

.tagify__tag:hover:not([readonly]) div::before,
.tagify__tag:focus div::before {
    --tag-bg-inset: -0.5px;
    --tag-bg: var(--tag-hover);
}


.tagify__tag {
	transition: 0.2s ease-out;
        pointer-events: auto;
}


.tagify {
    --tags-disabled-bg: #F1F1F1;
    --tags-border-color: #dee2e6;
    --tags-hover-border-color: #dee2e6;
    --tags-focus-border-color: #2563eb;
    --tag-border-radius: 0.375rem;
    --tag-bg: #E5E5E5;
    --tag-hover: #E5E5E5;
    --tag-text-color: black;
    --tag-text-color--edit: black;
    --tag-pad: 0.5em 1.0em;
    --tag-inset-shadow-size: 3.0em;
    --tag-invalid-color: #D39494;
    --tag-invalid-bg: rgba(211, 148, 148, 0.5);
    --tag-remove-bg: rgba(211, 148, 148, 0.3);
    --tag-remove-btn-color: black;
    --tag-remove-btn-bg: none;
    --tag-remove-btn-bg--hover: #c77777;
    --readonly-striped: 1;
    border: 1px solid var(--tags-border-color);
    border-radius: 0.375rem;
    transition: 0.1s;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}


.tagify__dropdown__item--active {
    background: rgb(153 155 156);
    color: white;
}

.tagify__dropdown__wrapper {
    border: 1px solid;
    border-color: lightgray;
}

.tagify__dropdown__item {
    margin: 6px;
    border-radius: 3px;
}

.tagify__dropdown {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

.tagify__dropdown[placement="top"] .tagify__dropdown__wrapper {
    border-top-width: 1px;
    border-radius: 8px;
}

.tagify__dropdown[placement="bottom"] .tagify__dropdown__wrapper {
    border-top-width: 1px;
    border-radius: 8px;
}

.tagify__input {
    min-width: 150px;
}

/* Foreign-locale tags: show diagonal stripes to signal untranslated, but keep remove button visible */
.tagify__tag.tag-foreign-locale > div::before {
    animation: readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused;
}