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

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

.tab {
    float: left;

    .em {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 8px;
        cursor: pointer;
        text-indent: -99999px;
    }

    label {
        display: block;
        position: relative;
        left: 1px;
        margin-left: -1px;
        border: 1px solid $background-grey;
        background: $background-grey;
        cursor: pointer;
        padding: 4px;
        height: 32px;

        img {
            position: relative;
            margin: 3px 4px 0;
        }
    }

    .content {
        @include scrollbar;
        position: absolute;
        top: 32px + 8px + 1px;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid #ffffff;
        background: #ffffff;
        padding: 10px 10px 0;
        overflow-y: scroll;

        &::selection {
            background: rgba(255, 255, 255, 0);
        }
    }

    [type='radio'] {
        display: none;

        &:checked ~ label {
            z-index: 2;
            border-bottom: 1px solid #ffffff;
            background: #ffffff;
        }

        &:checked ~ label ~ .content {
            z-index: 1;
        }
    }
}