threema-web/src/sass/components/_emoji_picker.scss

.twemoji-picker {
    min-height: 216px;
    margin: 0;
    padding: 0 8px 0;
    background-color: $background-grey;

    &.outline {
        border-radius: 4px;
        border: 2px solid #dbdbdb;
        width: 366px;
    }
}

.tab {
    float: left;

    .em {
        @include mouse-hand;
        margin-bottom: 8px;
        margin-right: 5px;
        margin-bottom: 12px;
        display: inline-block;
        text-indent: -99999px;
    }

    label {
        background: $background-grey;
        display: block;
        height: 32px;
        padding: 4px;
        border: 1px solid $background-grey;
        position: relative;
        left: 1px;
        margin-left: -1px;
        .em {
            position: relative;
            left: 2px;
            transform: scale(0.75);
        }
    }

    .content {
        position: absolute;
        top: 32px + 8px + 1px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 10px 0;
        background: white;
        border: 1px solid white;
        overflow-y: scroll;
        @include scrollbar;
        &::selection {
            background: rgba(255, 255, 255, 0.0);
        }
    }

    [type=radio] {
        display: none;
    }

    [type=radio]:checked ~ label {
        background: white;
        border-bottom: 1px solid white;
        z-index: 2;
    }

    [type=radio]:checked ~ label ~ .content {
        z-index: 1;
    }
}