.popover {
    &:has(.o-EmojiPicker) {
        max-width: calc(300px + 2 * var(--popover-border-width)) !important;
    }

    .o-EmojiPicker {
        width: 300px;
        height: 365px;
    }
}

.o-EmojiPicker-content {
    padding-left: map-get($spacers, 1) * 3 / 2;
    padding-right: map-get($spacers, 1) * 3 / 2;
}

.o-EmojiPicker {
    --EmojiPicker-active: #{rgba($o-action, .15)};

    background-color: var(--EmojiPicker-background-color, $gray-100);

    .o-Emoji {
        padding-left: map-get($spacers, 1);
        padding-right: map-get($spacers, 1);
        font-size: var(--EmojiPicker-emoji-font-size, $h2-font-size);
        aspect-ratio: 1;

        &:hover, &.o-active {
            background-color: var(--EmojiPicker-active);
        }
    }


    .o-EmojiPicker-navbar {
        --border-opacity: .5;
        padding-top: map-get($spacers, 1) / 2;
        padding-bottom: map-get($spacers, 1) / 2;

        .o-Emoji {
            > span {
                filter: grayscale(1);
            }
            &:not(.o-active) > span {
                opacity: 50%;
            }
        }
    }

    .o-EmojiPicker-section {
        background-color: var(--EmojiPicker-background-color, $gray-100);

        .o-EmojiPicker-sectionIcon {
            filter: grayscale(1);
        }
    }

    .o-EmojiPicker-sectionIcon + small,
    .o-EmojiPicker-empty + span,
    .o-EmojiPicker-search input:focus + .oi-search {
        color: var(--EmojiPicker-text-color, $text-muted);
    }

    .o-EmojiPicker-sectionIcon,
    .o-EmojiPicker-navbar-icon,
    .o-EmojiPicker-empty + span {
        font-size: var(--EmojiPicker-font-size, $h5-font-size);
    }

    .o-EmojiPicker-empty {
        font-size: 5rem !important;
        filter: grayscale(0.25);
    }
}

.o-EmojiPicker-category:before {
    // invisible character so that category has constant height, regardless of text content.
    content: "\200b"; /* unicode zero width space character */
}

.o-EmojiPicker-search {
    input {
        font-size: var(--EmojiPicker-font-size, $input-font-size);

        &, &:focus {
            background-color: var(--EmojiPicker-background-color, $o-view-background-color);
            color: var(--EmojiPicker-input-color, $input-color);
        }

        &::placeholder {
            opacity: var(--EmojiPicker-placeholderOpacity, 50%);
            color: var(--EmojiPicker-text-color, $input-placeholder-color);
        }

        & + .oi-search {
            color: var(--EmojiPicker-text-color, $body-color);
        }
    }
}