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;

    padding: var(--outer-spacing-input-pill-container);
    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: 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: 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: var(--length-input-pill-image);
            width: var(--length-input-pill-image);
            border-radius: 4px 0 0 4px;
        }

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

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

        .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;
        /* This keeps the input sized to
           the same height as pills. */
        line-height: var(--height-input-pill);
        padding: 0 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;
        }
    }

    &.not-editable-by-user {
        cursor: not-allowed;
        background-color: hsl(0deg 0% 93%);

        .pill {
            cursor: not-allowed;
        }

        .exit {
            display: none;
        }
    }

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

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

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

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

#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_streams_container .pill-container,
.add-user-group-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);
    }
}

.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-triple-users {
    font-size: 19px;
}

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