/* tag-select.css */

.tag-filter-drawer .btn {
    display: flex; /* Allow icon and text to align */
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
}

.tag-filter-drawer .selected-tags-summary {
    background-color: #28a745; /* Green color for the selected count, similar to your current "Žymos 6 pasirinktos" button */
    color: #ffffff;
    font-size: 0.8em;
    padding: 0.25em 0.6em;
    border-radius: 0.5em;
    display: inline-block; /* Make sure it takes space even if it has no content initially */
}

.tags-container {
    background-color: var(--clr-highlight-background); /* Background for the drawer content */
    border: 1px solid var(--clr-border);
    border-top: none; /* No top border, as it's below the button */
    border-radius: 0 0 0.5rem 0.5rem; /* Rounded corners only at the bottom */
}

/* Base styling for all tag bubbles */
.tag-bubble {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 25px; /* Pill shape */
    border: 1px solid var(--clr-border); /* Adjust to your border color */
    background-color: #f0f0f0; /* Example light gray for unselected, adjust to your theme */
    border-color: #ddd;
    color: #333;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    text-decoration: none;
}

.tag-bubble:hover {
    background-color: #e0e0e0; /* Slightly darker on hover */
    border-color: #ccc;
}

/* Active/selected state for tag bubbles */
.tag-bubble.active {
    background-color: #6c757d; /* Darker grey for active, similar to your "Išvalyti žymas" button in pic */
    border-color: #6c757d;
    color: #ffffff; /* White text for active tags */
    font-weight: bold; /* Make selected text bolder */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tag-bubble.active:hover {
    background-color: #5a6268; /* Even darker on hover for active state */
    border-color: #545b62;
}

/* Clear tags button - ensure it matches the active tag color for consistency */
.clear-tags-btn {
    font-size: 0.8em;
    padding: 0.3em 0.7em;
    align-self: flex-start;
    margin-right: auto;
    background-color: #6c757d; /* Match active tag color */
    color: #ffffff; /* White text */
    border: 1px solid #6c757d;
}
.clear-tags-btn:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Ensure the input group for filters aligns well with the new drawer */
.input-group.mb-3 {
    align-items: flex-start; /* Align items to the top if they have different heights */
}

.input-group > .tag-filter-drawer {
    flex-grow: 1; /* Allow the drawer to grow if inside input-group */
}