:root {
    --rt-emoji-size: 15px;
    --rt-emoji-picker-button-size: 40px;
    --rt-emoji-picker-button-bg-hover: var(--rt-bg-surface);
}

.emoji {
    width: var(--rt-emoji-size);
    height: var(--rt-emoji-size);
    image-rendering: pixelated;
    object-fit: none;
    vertical-align: middle;
    margin: 0 1px;
}

.emoji__first {
    object-position: 0 0;
}

.emoji--m {
    transform: scale(2);
}

.emoji-picker {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 5px;
    padding: 5px;
}

.emoji-picker__header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.emoji-picker__content {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.emoji-picker__sidebar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 5px;
}

.emoji-picker__button {
    display: flex;
    border: 1px solid var(--rt-border-subtle);
    background: var(--rt-color-background);
    min-width: var(--rt-emoji-picker-button-size);
    max-width: var(--rt-emoji-picker-button-size);
    min-height: var(--rt-emoji-picker-button-size);
    max-height: var(--rt-emoji-picker-button-size);
    align-items: center;
    justify-content: center;
}

.emoji-picker__button:hover,
.emoji-picker__button.active {
    background: var(--rt-emoji-picker-button-bg-hover);
    cursor: pointer;
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(5, var(--rt-emoji-picker-button-size));
    gap: 5px;
    max-height: 250px;
    overflow-y: auto;
    width: 240px;
    align-content: start;
}