:root {
    --tagButtonBackground: rgb(241, 241, 241);
    --tagButtonText: rgb(70, 70, 70);

    @media (prefers-color-scheme: dark) {
        --tagButtonBackground: rgb(70, 70, 70);
        --tagButtonText: rgb(218, 218, 218);
    }
}

.TagButton_noWrap {
    white-space: nowrap;
}

.TagButton_shrinkable {
    flex-shrink: 1;
    /*flex-grow: 1;*/
    flex-basis: content;
    overflow-x: hidden;
}

.TagButton {
    color: var(--tagButtonText) !important;
    border-radius: var(--badgeBorderRadius);
    display: inline-block;
    align-items: baseline;
    padding: 5px 5px 5px 5px !important;
    margin: 1px 3px 1px 1px;
    text-align: left;
    word-break: break-word;
    border: none;
}

.TagButton, .TagButton * {
    cursor: grab !important;
}

.TagButton_dashed {
    border: dashed 1px gray !important;
}

.TagButton_shrinkable {
    display: inline-flex;
    flex-direction: row;
    min-width: 0;
}

.TagButton:not(:hover) {
    background: var(--tagButtonBackground) !important;
}

.TagButton_pinButton {
    font-size: 16px !important;
    color: lightgray;
    cursor: default !important;
}

.TagButton * {
    font-size: 20px;
}

.TagButton_label {
    text-decoration: none;
    color: var(--tagButtonText) !important;
    flex: 1;
}

.TagButton_searchLabel {
    color: lightgray;
}

.TagButton_description, .TagButton_alternativeSpellings {
    color: var(--tagButtonText) !important;
    font-size: 14px;
    flex: 1;
}

.TagButton_removeButton {
    padding: 3px;
    margin-top: -10px;
    line-height: 20px;
    font-size: 32px;
    width: 32px;
    height: 32px;
    cursor: default !important;
}

.TagButton_nonexistent {
    text-decoration: line-through;
}

/** it's only for tag buttons in the tag editor */
.noteEditorTagBtn {
    border: none;
    margin: 1px;
    padding: 1px 5px;

    @media (prefers-color-scheme: dark) {
        background: #868686;
    }
}

.tagButtonFlash {
    animation-name: tagButtonFlash;
    box-shadow: 0 0 50px dodgerblue;
    z-index: 1000000;
    isolation: isolate; /* force shadow over siblings */
}

@keyframes tagButtonFlash {
    0%, 50%, 100% {
        background: dodgerblue;
        box-shadow: 0 0 100px dodgerblue;
    }
    25%, 75% {
        background: unset;
        box-shadow: none;
    }
}