/* 选中图层后，直接在图层边缘以鼠标或触屏调整大小与角度。 */
.eg-emoji-palette {
  grid-template-columns: repeat(14, minmax(0, 1fr));
  max-height: 238px;
  padding: 5px;
}

.eg-palette-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 6px;
  color: #8c7a99;
  font-size: .7rem;
  font-weight: 800;
}

.eg-palette-meta strong {
  color: #91631b;
  font-size: .72rem;
}

.eg-palette-emoji {
  font-size: 1.48rem;
}

.eg-creator-canvas .eg-clue-layer.selected {
  overflow: visible;
  touch-action: none;
}

.eg-transform-handle {
  position: absolute;
  z-index: 2;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(73, 44, 104, .28);
  touch-action: none;
}

.eg-transform-handle.resize {
  right: -14px;
  bottom: -14px;
  background: linear-gradient(135deg, #ffd944, #ff9d42);
  cursor: nwse-resize;
}

.eg-transform-handle.rotate {
  right: -10px;
  top: -36px;
  background: linear-gradient(135deg, #9b77ff, #ef5f98);
  cursor: grab;
}

.eg-transform-handle.rotate::after {
  position: absolute;
  right: 8px;
  top: 18px;
  width: 2px;
  height: 16px;
  background: #a185bb;
  content: "";
}

.eg-transform-handle:focus-visible {
  outline: 3px solid rgba(93, 60, 210, .34);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .eg-emoji-palette {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    max-height: 202px;
  }

  .eg-transform-handle {
    width: 26px;
    height: 26px;
  }

  .eg-transform-handle.resize {
    right: -17px;
    bottom: -17px;
  }

  .eg-transform-handle.rotate {
    right: -13px;
    top: -43px;
  }

  .eg-transform-handle.rotate::after {
    right: 11px;
    top: 24px;
    height: 18px;
  }
}