.tag_group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: bold;
}

/* 6eb4e6ff light blue */
/* 1e325aff dark blue */

.tag_label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100px;

    padding: 4px 8px;
    border-radius: 6px;
    background: #f2f2f2;

    cursor: pointer;
    transition: max-width 0.3s ease, background 0.2s ease;

    overflow: hidden;
    white-space: nowrap;
}

/* default: show short text */
.tag_label .full {
    display: none;
}

/* hover expands */
.tag_label:hover {
    max-width: 300px;
    background: #bdbcbc;
}

/* when expanded show full text */
.tag_label:hover .short {
    display: none;
}

.tag_label:hover .full {
    display: inline;
}

/* active (clicked) state */
.tag_label.active {
    max-width: 300px;
    background: #1e325aff;
    color: white;
}

.tag_label.active .short {
    display: none;
}

.tag_label.active .full {
    display: inline;
}