/*
 * MMDB shared UI components
 *
 * This is the ONE visual definition for tag pills.
 * Entity Overview and MMDB Meta both use .mmdb-tag-pill.
 */

.mmdb-tag-pill {
    display: inline-flex;

    min-height: var(--tag-min-height, 32px);
    padding:
        var(--tag-padding-y, 6px)
        var(--tag-padding-x, 11px);

    flex: 0 0 auto;
    align-items: center;

    background: var(
        --tag-bg,
        var(--color-bg-surface, #191919)
    );
    color: var(
        --tag-text,
        var(--color-text-muted, #aaaaaa)
    );

    border: 1px solid var(
        --tag-border,
        var(--color-border-control, #333333)
    );
    border-radius: var(--tag-radius, 999px);

    font-size: var(--tag-font-size, 13px);
    font-weight: var(--tag-font-weight, 500);
    line-height: var(--tag-line-height, 1);
    letter-spacing: var(--tag-letter-spacing, 0.02em);

    text-decoration: none;
    transform: none !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.mmdb-tag-pill:hover,
.mmdb-tag-pill:focus-visible,
.mmdb-tag-pill.is-active {
    background: var(
        --tag-bg-hover,
        var(--color-bg-hover, #242424)
    );
    color: var(
        --tag-text-hover,
        var(--color-text-hover, #ffffff)
    );

    /*
     * This is intentionally much lighter than the default outline.
     * It is the exact same hover behavior everywhere the component is used.
     */
    border-color: var(
        --tag-border-hover,
        var(--color-text-muted, #aaaaaa)
    );

    transform: none !important;
}


/* Same component, primary-purple semantic variant for Entity Type. */

.mmdb-tag-pill--type {
    color: var(
        --tag-type-text,
        var(--color-primary-soft, #a995e8)
    );

    border-color: var(
        --tag-type-border,
        var(--color-primary-muted, #75699b)
    );
}

.mmdb-tag-pill--type:hover,
.mmdb-tag-pill--type:focus-visible {
    color: var(
        --tag-type-text-hover,
        var(--color-primary-hover, #ded4ff)
    );

    border-color: var(
        --tag-type-border-hover,
        var(--color-primary, #c7b3ff)
    );

    transform: none !important;
}