/*

In this file:

// A. Variables
// B. Badge Utility

*/

//////////////////////////////////////////////
// A. Variables
//////////////////////////////////////////////

:root {
    --badge-padding-x: 1em;
    --badge-padding-y: 0.375em;

    --badge-background-color: color-mix(in srgb, currentColor 10%, transparent);

    --badge-border-radius: var(--border-radius-pill);

    --badge-font-size: var(--font-size-sm);
    --badge-font-weight: var(--font-weight-bold);
    --badge-font-family: var(--body-font-family);

    --badge-gap: 0.25em;
}

//////////////////////////////////////////////
// B. Badge Utility
//////////////////////////////////////////////

@layer utility {

    .badge {

        display: inline-flex;

        width: fit-content;

        padding: var(--badge-padding-y) var(--badge-padding-x);

        border-radius: var(--badge-border-radius);

        font-size: var(--badge-font-size);
        font-family: var(--badge-font-family);
        font-weight: var(--badge-font-weight);
        
        line-height: normal;


        &:not([class*="theme-"]) {
            background-color: var(--badge-background-color);
        }

        &:has([class*="icon-"]) {
            --badge-padding-x: 1em;

            align-items: center;

            gap: var(--badge-gap);
        }
    }

    :is(a, button).badge {
        --_badge-opacity-hover: 0.75;

        transition: opacity 0.5s ease-out;

        &:hover,
        &:focus {
            opacity: var(--_badge-opacity-hover);
            text-decoration: underline;
        }
    }

    :is(a, button):has(> .badge) {
        display: flex;
        align-items: center;

        width: fit-content;

        gap: 0.5em;

        text-decoration: none;

        &:hover,
        &:focus {
            > :is(.text, [class*="__text"]) {
                text-decoration: underline;
            }
        }

        .badge {
            margin-block: calc(var(--badge-padding-y) * -1);

            text-decoration: none;
        }
    }

} // end @layer