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

        .channel-privacy-type-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);
    }
}

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

#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,
.display_only_group_pill {
    /* Ensure middle alignment in table contexts. */
    vertical-align: middle;
    /* Resetting these values to prevent unintended inheritance from .pill-container styles. */
    padding: 0;
    border: 0;

    /* Particularly in light mode, pill colors are almost identical
       to the settings modal background. We place a higher-contrast
       outline on them accordingly. */
    .pill,
    .pill:focus {
        outline: 1px solid var(--color-outline-low-attention-input-pill);
        /* We offset the outline so that pills do not grow in size
           when presented with an outline. */
        outline-offset: -1px;

        /* Display `(you)` with the same 5px padding to the right
           as ordinary .pill-value text. */
        .my_user_status {
            padding-right: 5px;
        }

        /* Zero out the margin placed to the left of the bot icon,
           and add in the 5px of padding to the right. Specificity
           necessitates duplicating the .pill-label class here. */
        .pill-label .zulip-icon-bot {
            margin-left: 0;
            padding-right: 5px;
        }

        .deactivated-user-icon {
            padding-right: 5px;
        }
    }

    .pill:focus {
        /* We don't want to flash a focus outline
               when clicking on display-only pills. */
        box-shadow: unset;
        /* We also suppress the border on the pill
               image. */
        .pill-image-border {
            border: 0;
        }
    }
}

/* 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 {
    gap: 2px;
    flex-wrap: nowrap;

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

    &:hover {
        color: inherit;
    }

    > .pill {
        border: none;
        text-decoration: none;

        &:focus {
            color: inherit;
        }

        > .pill-label {
            margin: 0;

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

.creator_details > .display_only_pill {
    /* On channel and group creation details,
       align the pill contents better with
       the surrounding text. */
    vertical-align: baseline;
}

.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 {
    /* Reserve the same square box for the user-group
       icon as on pill images. */
    height: var(--height-input-pill);
    width: var(--height-input-pill);
    /* Center the icon in the box using flex. */
    display: flex;
    align-items: center;
    justify-content: center;
}

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