/* The emoji picker: a card that floats over the bottom right of the
   timeline, for a reaction or for the composer. */

.emoji-picker {
    position: absolute;
    right: var(--space-8);
    bottom: calc(100% + var(--space-4));
    z-index: 3;
    width: min(var(--picker-width), calc(100vw - 2 * var(--space-8)));
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    box-shadow: 0 8px 24px var(--color-scrim);
}

/* For a reaction it is not inside the composer; it sits above it all the same. */
.room-main {
    position: relative;
}

.room-main > .emoji-picker {
    bottom: calc(var(--bar-height) + var(--space-8));
}

.picker-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    font-size: var(--text-s);
}

.picker-head .dim {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-tabs {
    display: flex;
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--picker-cell), 1fr));
    align-content: start;
    gap: var(--space-1);
    height: var(--picker-height);
    overflow-y: auto;
    padding: var(--space-5);
}

.picker-tabs button, .picker-grid button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border-radius: var(--radius-m);
    font-family: var(--font-emoji), sans-serif;
    line-height: 1;
}

.picker-tabs button {
    flex: 1;
    height: var(--control-size);
    font-size: var(--text-l);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    opacity: .6;
}

.picker-tabs button.on {
    opacity: 1;
    box-shadow: inset 0 -2px var(--color-accent);
}

.picker-grid button {
    height: var(--picker-cell);
    font-size: var(--text-xxl);
}

.picker-grid button:not(:disabled):hover, .picker-tabs button:not(:disabled):hover {
    background: var(--color-fill);
    filter: none;
    opacity: 1;
}

.picker-grid .emote {
    height: 1.2em;
}

.picker-empty {
    grid-column: 1 / -1;
    padding: var(--space-8);
    text-align: center;
    font-size: var(--text-s);
}

@media (max-width: 720px) {
    .emoji-picker, .room-main > .emoji-picker {
        left: var(--space-5);
        right: var(--space-5);
        width: auto;
    }
}