lostplaces-frontend/components/_tagify.scss

.tagify {
    @extend .LP-Input__Field;

    &+input,
    &+textarea {
        display: none;
    }

    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tagify--focus {
    @extend .LP-Input__Field--active
}

.tagify__tag {
    @extend .LP-Tag;
    @extend .LP-TagList__Item;
    background-color: #bdbdbd;

    &:hover {
        background-color: #e9e9e9;
    }

    display: inline-flex;
    cursor: default;
    transition: .13s ease-out;
    height: max-content;

    align-items: center;
    gap: 3px;
}

.tagify__input {
    flex-grow: 1;
    display: inline-block;
    min-width: 110px;
    margin: 5px;
    line-height: inherit;
    position: relative;
    white-space: pre-wrap;
    margin-left: 15px;
}

.tagify__tag__removeBtn {
    order: 5;
    cursor: pointer;
    font: 1em/1 Arial;
    transition: .2s ease-out;
    color: $-wine-red;
}

.tagify__tag__removeBtn::after {
    content: "\00D7"
}

.tagify__tag__removeBtn:hover {
    color: $-grey;
}

.tagify__tag__removeBtn:hover+div>span {
    opacity: .5
}

.tagify__tag__removeBtn:hover+div::before {
    box-shadow: 0 0 0 1.1em rgba(211, 148, 148, .3) inset !important;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important;
    transition: .2s
}

.tagify__tag--loading .tagify__tag__removeBtn {
    display: none
}

.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
    display: none
}

.tagify__dropdown {
    position: absolute;
    z-index: 9999;
    transform: translateY(1px);
    overflow: hidden
}

.tagify__dropdown[placement=top] {
    margin-top: 0;
    transform: translateY(-100%)
}

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

.tagify__dropdown[position=text] {
    box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), .1);
    font-size: .9em
}

.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
    border-width: 1px
}

.tagify__dropdown__wrapper {
    max-height: 300px;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .2);
    transition: .25s cubic-bezier(0, 1, .5, 1)
}

.tagify__dropdown__wrapper:hover {
    overflow: auto
}

.tagify__dropdown--initial .tagify__dropdown__wrapper {
    max-height: 20px;
    transform: translateY(-1em)
}

.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
    transform: translateY(2em)
}

.tagify__dropdown__item {
    box-sizing: inherit;
    padding: .3em .5em;
    margin: 1px;
    cursor: pointer;
    border-radius: 2px;
    position: relative;
    outline: 0;

    font-family: $-primary-sans-serif-font;
}

.tagify__dropdown__item--active {
    color: $-almost-white;
    background-color: gray;
}

.tagify__dropdown__item:active {
    filter: brightness(105%)
}