zulip/web/styles/input_pill.css

.pill-container {
    display: inline-flex;
    gap: var(--vertical-spacing-input-pill) var(--horizontal-spacing-input-pill);
    flex-wrap: wrap;
    min-width: 0;

    background-color: var(--color-background-pill-container);

    padding: var(--outer-spacing-input-pill-container);
    border: 1px solid var(--color-border-pill-container);
    border-radius: 4px;
    align-items: center;

    cursor: text;

    .pill {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-width: 0;
        position: relative;

        height: var(--height-input-pill);
        /* Make sure the `height` property
           is the authoritative source of an
           input pill's height, without being
           affected by borders, etc. */
        box-sizing: border-box;
        margin: 0;

        color: inherit;

        border-radius: 4px;
        background-color: var(--color-background-input-pill);
        cursor: pointer;

        /* Not focus-visible, because we want to support mouse+backpace to
           delete pills */
        &:focus {
            /* Box shadow instead of border, because user pills have avatars
               that extend all the way to the edge of the pill. */
            box-shadow: 0 0 0 1px var(--color-focus-outline-input-pill) inset;
            outline: none;

            /* For user pills with avatars, the avatar covers up the box
               shadow, so we also have to make a border around the avatar. */
            .pill-image-border {
                border-right: none;
                border-radius: 4px 0 0 4px;
                border-color: var(--color-focus-outline-input-pill);
            }
        }

        .pill-image {
            height: var(--height-input-pill);
            width: var(--height-input-pill);
            border-radius: 4px;
        }

        .pill-image-border {
            height: var(--height-input-pill);
            width: var(--height-input-pill);
            position: absolute;
            box-sizing: border-box;
            border: 1px solid;
            border-radius: 4px;
            border-color: var(--color-border-input-pill-image);
        }

        .zulip-icon {
            padding-right: 2px;
        }

        .pill-label {
            /* Treat as flex container to better position status
               emoji and control ellipsis on the pill value. */
            display: flex;
            /* Allow label to collapse for ellipsis effect. */
            min-width: 0;
            align-items: center;
            margin: 0 var(--input-pill-side-padding);

            .zulip-icon-bot {
                margin-left: 0.4em;
            }
        }

        .pill-value {
            flex: 0 1 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
        }

        .pill-close-button,
        .pill-expand-button {
            font-size: 0.7142em; /* 10px at 14px em */
            text-decoration: none;
            /* Let the close button's box stretch,
               but no larger than the height of the
               banner box when the action button
               achieves its full height (margin,
               padding, and height), which keeps
               the X vertically centered with it. */
            align-self: stretch;
            max-height: 52px;
            /* Display as flexbox to better control
               the X icon's position. This creates
               an anonymous flexbox item out of the
               ::before content where the icon sits. */
            display: flex;
            align-items: center;
            /* !important overrides `.dark-theme:root a:hover` */
            color: var(--color-input-pill-close) !important;
            opacity: 0.7;
        }

        .exit,
        .expand {
            width: var(--length-input-pill-exit);
            height: var(--length-input-pill-exit);
            display: flex;
            justify-content: center;
            margin-right: 2px;
            border-radius: 2px;

            &:hover {
                background: var(--color-background-input-pill-exit-hover);

                .pill-close-button,
                .pill-expand-button {
                    opacity: 1;
                }
            }
        }

        .group-members-count {
            opacity: 0.65;
        }

        &.deactivated-pill {
            background-color: var(--color-background-deactivated-user-pill);
            opacity: 0.7;

            &:focus {
                border-color: var(--color-focus-outline-deactivated-user-pill);
            }

            .pill-close-button {
                /* !important overrides `.dark-theme:root a:hover` */
                color: var(--color-close-deactivated-user-pill) !important;
            }

            .exit:hover {
                background: var(
                    --color-background-exit-hover-deactivated-user-pill
                );
            }

            > img {
                opacity: 0.5;
            }
        }
    }

    .slashed-circle-icon {
        position: absolute;
        background-color: var(--color-background-deactivated-user-pill);
        padding: 0.2em;
        font-size: 0.7em;
        border-radius: 0.625em;
        bottom: -0.0625em;
        left: 1.1em;
        opacity: 1;
    }

    &.not-editable {
        cursor: not-allowed;
        border: none;
        background-color: transparent;
        padding: 0;

        .pill {
            padding-right: 4px;
            cursor: not-allowed;

            &:focus {
                color: inherit;
                border: 1px solid hsl(0deg 0% 0% / 15%);
                background-color: hsl(0deg 0% 0% / 7%);
            }

            .exit {
                display: none;
            }
        }
    }

    .input {
        display: inline-block;
        /* This keeps the input sized to
           the same height as pills. */
        line-height: var(--height-input-pill);
        padding: 0 4px;

        min-width: 2px;
        overflow-wrap: anywhere;
        flex: 1 1 auto;

        outline: none;

        &.shake {
            animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
        }
    }

    &.not-editable-by-user {
        cursor: not-allowed;

        .pill {
            cursor: not-allowed;
        }

        .exit {
            display: none;
        }
    }

    &.invalid {
        border-color: var(--color-invalid-input-border);
        box-shadow: var(--invalid-input-box-shadow);
    }
}

#compose-direct-recipient .pill-container {
    border: 1px solid var(--color-compose-recipient-box-border-color);

    .input:first-child:empty::before {
        content: attr(data-no-recipients-text);
        opacity: 0.5;
    }

    &:has(.input:focus) {
        border-color: var(--color-compose-recipient-box-has-focus);
    }
}

#invitee_emails_container .pill-container,
#integration-url-filter-branches .pill-container {
    width: 100%;
    box-sizing: border-box;
    background-color: var(
        --color-background-pill-container-without-placeholder
    );
}

#invitee_emails_container .pill-container.not-editable-by-user {
    height: var(--height-input-pill);
    background-color: var(--color-background-pill-container-input-disabled);
}

.add_subscribers_container .pill-container,
.add_streams_container .pill-container,
.add-user-group-container .pill-container,
.add_members_container .pill-container {
    width: 100%;

    .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }
}

.add_streams_container .input,
.add-user-group-container .input {
    flex-grow: 1;
}

.display_only_pill {
    /* Ensure middle alignment in table contexts. */
    vertical-align: middle;
}

/* These pill are similar to .not-editable, but are meant to show
   profile cards when clicked. */
.panel_user_list > .pill-container,
.creator_details > .display_only_pill {
    background-color: hsl(0deg 0% 0% / 7%);
    gap: 2px;
    flex-wrap: nowrap;

    &.inline_with_text_pill > .pill-deactivated {
        font-size: 0.9em;
        padding-right: 2px;
    }

    &:hover {
        color: inherit;
    }

    > .pill {
        background-color: transparent;
        border: none;
        text-decoration: none;

        &:focus {
            color: inherit;
        }

        > .pill-label {
            margin: 0;

            > .pill-value {
                padding: 5px;
                max-width: 165px;
            }
        }
    }
}

.creator_details > .display_only_pill.inline_with_text_pill {
    padding: 0;

    > .pill {
        margin: 0;
        align-items: baseline;

        > .pill-image {
            /* Add line-height equal to height to mimic baseline alignment. */
            line-height: 20px;
            align-self: center;
        }

        > .pill-label {
            > .pill-value {
                padding: 0 5px;
                max-width: 200px;
            }

            > .my_user_status {
                margin-right: 2px;
            }
        }
    }
}

.display_only_group_pill .zulip-icon-user-group {
    font-size: 1.3571em; /* 19px at 14px / em */
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(3px, 0, 0);
    }
}