/* panel基本样式及动画  */

.sticker-panel * {
    max-width: none !important;
    box-sizing: border-box !important;

}


.sticker-panel {
    all: initial;
    position: relative;
    display: flex;

    height: 2.3rem;
    width: 2.3rem;
    margin: -0.3em 0.5em 1em 0.5em;
    /* padding: 0.2em; */

    background-color: #f0f0f0;
    outline: #dfdfdf solid 1px;
    border-radius: 3px;
}


.sticker-panel>img {
    height: 2.3rem;
    width: 2.3rem;

    padding: 0.1rem;
}


.sticker-panel label {
    /* all: initial; */
    
    margin: 0 !important;
    padding: 0 !important;
}


.sticker-panel img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*iOS*/
    -webkit-touch-callout: none
}



/* hover弹出元素 */
.sticker-popmenu {
    all: initial;
    
    height: 15em;
    width: 23em;
    font-size: 16px;
    background-color: #f8f8f8;
    /*outline: #dddddd solid 2px;*/
    border-radius: 5px;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.15);
    position: absolute;

    /* 致敬每一位把元素z-index设成999的傻逼😅 */
    z-index: 99999;

    overflow: hidden;

    /* display: none; */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s linear;
}

.sticker-panel:hover .sticker-popmenu {
    opacity: 1;
    visibility: visible;
    transition: all 0.2s linear;
}

.sticker-panel:hover .sticker-rad-list {
    visibility: visible;
}



/* 顶部选择栏样式 */
.sticker-rad-list {
    /* 防止主题样式污染 */
    all: initial;

    width: 100%;
    height: 23%;
    padding-left: 0.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    background-color: #f3f3f3;
    box-sizing: border-box;
    visibility: hidden;

    overflow-x: auto;
    overflow-y: hidden;
}


/* 表情选择radio */
.sticker-rad {
    appearance: none;
    display: none !important;
}

.sticker-rad:checked+label img {
    background-color: #e4e4e4;

    transition: all 0.2s linear;
}

/* logo 样式 */
.sticker-logo-thumb {

    box-sizing: border-box;

    background-color: #00000000;
    height: 2.7em;
    width: 2.7em;

    margin: 0em 0.4em;
    padding: 0.3em;

    border-radius: 3px;

    transition: all 0.2s linear;
}



/*选择区样式*/
.sticker-list {
    height: 76%;
    padding: 1em;

    overflow-y: auto;
    overflow-x: hidden;
}


.sticker-sublist{
    /* columns: 4em; */
    display: grid;
    grid-template-columns: repeat(auto-fill, 4em);
    grid-column-gap: 0.7em;
    justify-content: space-around;
}



/*表情样式*/
.sticker-img {
    box-sizing: border-box;

    display: inline;
    
    height: 3.9em;
    width: 3.9em;
    padding: 4px;
    border-radius: 4px;

    background-color: #00000000;
    transition: all 0.15s linear;
}

.sticker-img:hover {
    background-color: #e4e4e4;
    transition: all 0.15s linear;
}




/**  
 * 滚动条样式
 */

.sticker-list::-webkit-scrollbar-button,
.sticker-rad-list::-webkit-scrollbar-button {
    display: none;
}

.sticker-list::-webkit-scrollbar {
    width: 5px;
}

.sticker-rad-list::-webkit-scrollbar {
    height: 5px;
}

.sticker-list::-webkit-scrollbar-thumb,
.sticker-rad-list::-webkit-scrollbar-thumb {
    background-color: #d4d4d4;
    border-radius: 5px;
}


/*版权文本样式*/
.sticker-copyright {
    position: relative;
    /* bottom: 5px; */
    left: 5px;
    font-size: 0.7em;
    color: gray;
}


.text-sticker-img {
    display: inline;
    height: 3.5em;
    width: 3.5em;

    max-width: none !important;
    max-height: none !important;

    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /*iOS*/
    -webkit-touch-callout: none
}


@media screen and ( max-width: 450px ) {
    .sticker-popmenu {
        width: 82vw !important;
        /* left: -10vw; */
    }
}