@mussonindustrial/pyro-mui-joy/src/classes/chip.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

[psc='Joy/Container/chip'],
[psc='Joy/Container/chip-button'] {
    @include variant-support(Chip);
    @include variant-default(Chip, outlined);
    @include palette-default(Chip, neutral);

    --joy-Chip-decoratorChildOffset: min(
        calc(
            var(--joy-Chip-paddingInline) -
                (
                    var(--joy-_Chip-minHeight) - 2 *
                        var(--joy-variant-borderWidth, 0px) -
                        var(--joy-Chip-decoratorChildHeight)
                ) / 2
        ),
        var(--joy-Chip-paddingInline)
    );
    --joy-Chip-decoratorChildRadius: max(
        var(--joy-_Chip-radius) - var(--joy-variant-borderWidth, 0px) -
            var(--joy-_Chip-paddingBlock),
        min(
            var(--joy-_Chip-paddingBlock) + var(--joy-variant-borderWidth, 0px),
            var(--joy-_Chip-radius) / 2
        )
    );
    --joy-Chip-deleteRadius: var(--joy-Chip-decoratorChildRadius);
    --joy-Chip-deleteSize: var(--joy-Chip-decoratorChildHeight);
    --joy-Avatar-radius: var(--joy-Chip-decoratorChildRadius);
    --joy-Avatar-size: var(--joy-Chip-decoratorChildHeight);
    --joy-Icon-margin: initial;
    --joy-Icon-color: currentColor;
    --joy-unstable_actionRadius: var(--joy-_Chip-radius);
    --joy-_Chip-radius: var(--joy-Chip-radius, 1.5rem);
    --joy-_Chip-paddingBlock: max(
        (
                var(--joy-_Chip-minHeight) - 2 *
                    var(--joy-variant-borderWidth, 0px) -
                    var(--joy-Chip-decoratorChildHeight)
            ) / 2,
        0px
    );

    --joy-Chip-deleteMargin: 0 calc(var(--joy-Chip-decoratorChildOffset) * -1) 0
        0;

    min-height: var(--joy-_Chip-minHeight);
    max-width: max-content;
    padding-inline: var(--joy-Chip-paddingInline);
    border-radius: var(--joy-_Chip-radius);
    gap: var(--joy-Chip-gap);
    line-height: var(--joy-lineHeight-md);
    font-weight: var(--joy-fontWeight-md);
    font-family: var(--joy-fontFamily-body);
    display: inline-flex;

    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    box-sizing: border-box;

    /* Force chip behaviour */
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;

    /* Default to medium size */
    --joy-Chip-gap: 0.25rem;
    --joy-Chip-paddingInline: 0.5rem;
    --joy-Chip-decoratorChildHeight: calc(
        var(--joy-_Chip-minHeight) - 0.25rem - 2 *
            var(--joy-variant-borderWidth)
    );
    --joy-Icon-fontSize: var(--joy-fontSize-md);
    --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.5rem);
    font-size: var(--joy-fontSize-sm);

    /* Defaults */
    border-style: none;

    /* Variant */
    color: var(--joy-Chip-Color);
    background-color: var(--joy-Chip-Bg);
    border-color: var(--joy-Chip-Border);
    border-width: var(--joy-Chip-borderWidth);
    border-style: var(--joy-Chip-borderStyle);

    &[psc='Joy/Size/sm'] {
        --joy-Chip-gap: 0.125rem;
        --joy-Chip-paddingInline: 0.375rem;
        --joy-Chip-decoratorChildHeight: calc(
            var(--joy-_Chip-minHeight) - 2 * var(--joy-variant-borderWidth)
        );
        --joy-Icon-fontSize: var(--joy-fontSize-sm);
        --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.25rem);
        font-size: var(--joy-fontSize-xs);
    }

    &[psc='Joy/Size/md'] {
        --joy-Chip-gap: 0.25rem;
        --joy-Chip-paddingInline: 0.5rem;
        --joy-Chip-decoratorChildHeight: calc(
            var(--joy-_Chip-minHeight) - 0.25rem - 2 *
                var(--joy-variant-borderWidth)
        );
        --joy-Icon-fontSize: var(--joy-fontSize-md);
        --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.5rem);
        font-size: var(--joy-fontSize-sm);
    }

    &[psc='Joy/Size/lg'] {
        --joy-Chip-gap: 0.375rem;
        --joy-Chip-paddingInline: 0.75rem;
        --joy-Chip-decoratorChildHeight: calc(
            var(--joy-_Chip-minHeight) - 0.375rem - 2 *
                var(--joy-variant-borderWidth)
        );
        --joy-Icon-fontSize: var(--joy-fontSize-lg);
        --joy-_Chip-minHeight: var(--joy-Chip-minHeight, 1.75rem);
        font-size: var(--joy-fontSize-md);
    }

    > *:last-child {
        --joy-IconButton-margin: 0
            calc(var(--joy-Chip-decoratorChildOffset) * -1) 0
            calc(-1 * var(--joy-Chip-paddingInline) / 3);
        --joy-Icon-margin: 0 calc(var(--joy-Chip-paddingInline) / -4) 0 0;
    }

    > *:first-child {
        --joy-IconButton-margin: 0 calc(-1 * var(--joy-Chip-paddingInline) / 3)
            0 calc(var(--joy-Chip-decoratorChildOffset) * -1);
        --joy-Icon-margin: 0 0 0 calc(var(--joy-Chip-paddingInline) / -4);
    }

    svg {
        user-select: none;
        width: 1em !important;
        height: 1em !important;
        display: inline-block;
        fill: currentColor;
        flex: 0 0 auto !important;
        transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        margin: var(--joy-Icon-margin);
        font-size: var(--joy-Icon-fontSize, var(--joy-fontSize-xl2));
        color: var(
            --joy-Icon-color,
            var(
                --joy-palette-text-icon,
                var(--joy-palette-neutral-500, #636b74)
            )
        );
    }
}

[psc='Joy/Container/chip-button'] {
    user-select: none;

    &:hover {
        @include component-state(Chip, Hover);
        cursor: pointer;
    }

    &:active {
        @include component-state(Chip, Active);
    }

    &:disabled {
        @include component-state(Chip, Disabled);

        pointer-events: none;
        cursor: default;
    }
}

[psc='Joy/Container/chip']
    [psc='Joy/Container/chip-delete'][data-component='ia.input.button'],
[psc='Joy/Container/chip-button']
    [psc='Joy/Container/chip-delete'][data-component='ia.input.button'] {
    --joy-IconButton-size: var(--joy-Chip-deleteSize, 2rem);
    border-radius: var(--joy-Chip-deleteRadius);
    min-width: var(--joy-IconButton-size, 2rem);
    min-height: var(--joy-IconButton-size, 2rem);
    margin: var(--joy-IconButton-margin);
    padding: 0px;
}

/* Resets */

.responsive-container > [psc='Joy/Container/chip'],
.responsive-container > [psc='Joy/Container/chip-button'] {
    min-height: var(--joy-_Chip-minHeight);
    max-width: max-content;
}