/* label-emoji.css — a label's emoji (label-emoji.js): before its name
 * wherever the name is drawn, and the Emoji box in the label form. */

.crm-lemoji { flex: 0 0 auto; font-size: 1em; line-height: 1; margin-inline-end: 4px; }
div.label > .crm-lemoji { margin-inline-end: 3px; }

/* ---- the form: Emoji beside the name, as respond.io's Create Tag ---- */
form[data-crm-tagform] > .crm-emoji-field { order: 1; position: relative; width: 112px; flex: 0 0 112px; margin-inline-end: 12px !important; padding-top: 4px; display: flex; flex-direction: column; align-self: stretch; }
/* The box sits on the row's bottom edge, so it lines up with the name field whatever the label's line height. */
form[data-crm-tagform][data-crm-emoji] > .label-name--input { width: calc(100% - 124px); flex: 1 1 0; }
.crm-emoji-field__label { display: block; font-size: 14px; font-weight: 600; color: var(--st-muted, #626f7f); line-height: 20px; }
.crm-emoji-field__btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 40px; margin-top: auto; padding: 0;
  font-size: 20px; line-height: 1; cursor: pointer;
  background: var(--st-card, #fff); color: var(--st-ink, #282e34);
  border: 1px solid var(--st-line, rgba(53, 60, 69, .16)); border-radius: 8px;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-emoji-field__btn:hover { border-color: rgba(53, 60, 69, .32); }
/* No emoji yet: a smiling face drawn in the ink colour, as theirs. */
.crm-emoji-field__btn.is-empty::before {
  content: ""; width: 22px; height: 22px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Cpath d='M8 10c.6-.8 1.4-.8 2 0M14 10c.6-.8 1.4-.8 2 0'/%3E%3Cpath d='M8.5 14h7a3.5 3.5 0 0 1-7 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Cpath d='M8 10c.6-.8 1.4-.8 2 0M14 10c.6-.8 1.4-.8 2 0'/%3E%3Cpath d='M8.5 14h7a3.5 3.5 0 0 1-7 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The chip above the form shows the emoji too. */
.crm-tagchip[data-emoji]::before { content: attr(data-emoji); margin-inline-end: 6px; }

/* ---- the picker ---- */
.crm-emoji-pop {
  position: fixed; z-index: 60;
  width: 320px; max-width: calc(100vw - 48px);
  background: var(--st-card, #fff); border: 1px solid var(--st-line, rgba(53, 60, 69, .16)); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.crm-emoji-pop__head { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--st-line, rgba(53, 60, 69, .16)); }
.crm-emoji-pop__search {
  flex: 1; min-width: 0; height: 32px !important; margin: 0 !important; padding: 0 10px !important;
  font-size: 14px; border: 1px solid var(--st-line, rgba(53, 60, 69, .16)) !important; border-radius: 8px !important;
  background: var(--st-card, #fff) !important; color: var(--st-ink, #282e34); box-shadow: none !important;
}
.crm-emoji-pop__clear {
  height: 32px; padding: 0 10px; border: 1px solid var(--st-line, rgba(53, 60, 69, .16)); border-radius: 8px;
  background: var(--st-card, #fff); color: var(--st-ink, #282e34); font-size: 13px; cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-emoji-pop__clear:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.crm-emoji-pop__list { max-height: 260px; overflow-y: auto; padding: 4px 8px 8px; font-size: 13px; color: var(--st-muted, #626f7f); }
.crm-emoji-pop__group { padding: 8px 2px 4px; font-size: 12px; font-weight: 600; color: var(--st-muted, #626f7f); }
.crm-emoji-pop__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.crm-emoji-pop__grid button {
  height: 34px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-emoji-pop__grid button:hover { background: var(--st-hover, #f5f6f7); }
.crm-emoji-pop__none { padding: 16px 4px; text-align: center; }