﻿.tag-editor {
    min-height: 38px;
    border: 1px solid var(--input-border-color);
    border-radius: .25rem;
}

    .tag-editor .tag-editor-spacer {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .tag-editor li:nth-child(2) .tag-editor-spacer {
        /*width: 2px;*/
    }

    .tag-editor .tag-editor-tag {
        padding: 4px;
        padding-left: 15px;
        padding-right: 5px;
        border-radius: 0.18rem 0 0 0.18rem;
        border: 1px solid var(--primary-color);
        border-right: 0;
        color: var(--primary-color);
    }

        .tag-editor .tag-editor-tag.active {
            border: 0;
            padding-right: 0px;
            margin-right: -10px;
        }

    .tag-editor > li:last-child .tag-editor-tag.active {
        padding-left: 5px;
    }

    .tag-editor .tag-editor-delete {
        padding: 4px;
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        border-radius: 0 0.18rem 0.18rem 0;
        border: 1px solid var(--primary-color);
        border-left: 0;
        color: var(--primary-color);
    }

        .tag-editor .tag-editor-delete i:before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 25px;
        }

    /*placeholder*/
    .tag-editor div {
        padding: 5px;
        font-size: 1rem;
    }

    .tag-editor .placeholder {
        pointer-events: none;
    }

/* Automatische Tags */
.tag-editor-tag__automatisch .tag-editor-tag {
    background-color: #c0d5f9;
}

.tag-editor-tag__automatisch .tag-editor-delete {
    background-color: #c0d5f9;
}

/* System Tags - nicht loeschbar*/
.tag-editor-tag__system {
    cursor: not-allowed;
}

    .tag-editor-tag__system .tag-editor-tag {
        background-color: #f7b8b8;
        pointer-events: none;
    }

    .tag-editor-tag__system .tag-editor-delete {
        background-color: #f7b8b8;
        padding-left: 0;
        padding-right: 10px;
        pointer-events: none;
    }

        .tag-editor-tag__system .tag-editor-delete i {
            opacity: 0;
        }
