.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
}