zulip/web/styles/input_pill.css

.pill-container {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 0;

    padding: 2px;
    border: 1px solid hsl(0deg 0% 0% / 15%);
    border-radius: 4px;
    align-items: center;

    cursor: text;

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

        height: 20px;
        margin: 1px 2px;

        color: inherit;
        border: 1px solid transparent;

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

        &:focus {
            border-color: var(--color-focus-outline-input-pill);
            outline: none;
        }

        .pill-image {
            height: 20px;
            width: 20px;
            border-radius: 4px 0 0 4px;
        }

        .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 5px;
        }

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

        .pill-close-button {
            font-size: 10px;
            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 {
            width: 16px;
            height: 16px;
            display: flex;
            justify-content: center;
            margin-right: 2px;
            border-radius: 2px;
        }

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

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

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

            &: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
                );
            }
        }
    }

    &.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;
        padding: 2px 4px;

        min-width: 2px;
        word-break: break-all;

        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;
        }
    }
}

#compose-direct-recipient .pill-container {
    padding: 0 2px;
    border: 1px solid hsl(0deg 0% 0% / 20%);
    background-color: hsl(0deg 0% 100%);

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

    .pill + .input:empty::before {
        content: attr(data-some-recipients-text);
        opacity: 0.5;
    }
}

#invitee_emails_container .pill-container {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-background-invitee-emails-pill-container);
}

.add_subscribers_container .pill-container,
.add_members_container .pill-container {
    width: 100%;
    background-color: hsl(0deg 0% 100%);

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

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

    &: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;
            }
        }
    }
}

.stream_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: none;
            }

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

@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);
    }
}