/* 外部容器，保持行内布局 */
.flow-layout {
    display: flex;
    flex-wrap: wrap;
    /* 支持换行 */
}

/* 每个子div，使用 inline-block 布局 */
.single-emoji {
    display: inline-block;
    /* 设置为行内块级元素 */
    /* width: 200px; */
    /* 设置宽度为200px */
    height: 42px;
    /* 设置高度为70px */
    /* margin-right: 0.5rem; */
    /* 子项之间的间距 */
    margin-bottom: 1rem;
    /* border: 1px solid #ccc; */
    vertical-align: top;
    /* 确保所有div在同一行顶部对齐 */
    /* padding: 5px; */
    /* 内边距 */
    box-sizing: border-box;
    /* 包括边框在宽高内 */
}

/* 使用 Grid 布局 */
.single-emoji-grid {
    display: grid;
    grid-template-columns: 34px 150px;
    /* 设置为1:2的列比例 */
    height: 100%;
    /* 高度占满父容器 */
}

/* 左侧部分 */
.part-left {
    text-align: center;
    vertical-align: middle;
    line-height: 34px;
    font-size: 28.8px;
    /* 垂直居中 */
}

/* 右侧部分 */
.part-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    /* 上下分为两行 */
    text-align: left;
    font-size: 12px;
}

/* 上层文本 */
.part-right .top {
    font-size: 12.8px;
    font-weight: bold;
    /* 加粗显示 */
    line-height: 1.5;
    /* 行间距 */
}

/* 下层显示 Unicode 和 16 进制 */
.part-right .bottom {
    display: flex;
    /* justify-content: space-between; */
    /* margin-right: 5px; */
    text-align: left;
    font-size: 12px;
    color: #555;
    /* 设置颜色为灰色 */
}

.single_emoji_image {
    width: 34px;
    height: 34px;
    line-height: 42px;
}


.copyable {
    cursor: pointer;
    /* color: blue; */
}

.single-span {
    margin-right: 5px;
}


/**
新的
*/

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* gap: 12px; */
}

.emoji-item {
    /* border: 1px solid #eee; */
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    font-size: .88rem;
    /* font-size: 13px; */
}

.emoji {
    /* font-size: 40px; */
    /* font-size: 1.8rem; */
    font-size: 1.4rem;
    /* font-size: 26px; */
    display: block;
    margin-bottom: 6px;
}

.emoji-name {
    word-break: break-word;
    color: #333;
}