/*
 * Reusable utility classes. Keep this file small. If a class is used by
 * a single component, prefer Blazor CSS isolation (a sibling .razor.css file)
 * over adding it here.
 */

.text-overflow-ellipses {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "NEW" indicator badge shown on recently-created table rows. */
.description-cell {
    position: relative;
}

.new-indicator {
    position: absolute;
    top: 0;
    left: -50px;
    background-color: red;
    color: white;
    padding: 2px 5px;
    font-size: 0.75rem;
    border-radius: 10px;
}

/* Overlapping chip stack, used to visually group avatars/chips. */
.overlapping-chip {
    margin-left: -10px;
    border: 2px solid #cccccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.overlapping-chip:first-child {
    margin-left: 0;
}

.overlapping-chip-group {
    position: relative;
    transition: margin 0.15s ease-in-out, transform 0.15s ease-in-out, z-index 0s 0.05s;
    border: 1px solid #999;
    margin-left: -15px;
}

.overlapping-chip-group:hover {
    z-index: 999;
    transform: translateY(-2px) scale(1.05);
}