@dialpad/dialtone-css/lib/build/less/recipes/emoji_row.less

Dialpad's design system

.d-recipe-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-300);
}

.d-recipe-emoji-row__tooltip {
  display: inline-block;
}

.d-recipe-emoji-row__tooltip-content {
   max-inline-size: var(--dt-size-875);
}

.d-recipe-emoji-row__tooltip-emoji {
  display: inline-block;
  padding: var(--dt-space-300);
  background-color: var(--dt-color-neutral-white);
  border-radius: var(--dt-size-radius-300);
  margin-block: var(--dt-space-300) var(--dt-space-350);

  .d-emoji {
    height: var(--icon-size);
  }
}

.d-recipe-emoji-row__tooltip-names {
  display: inline-block;
  font-weight: var(--dt-font-weight-semi-bold);
}

.d-recipe-emoji-row__tooltip-label {
  color: var(--dt-color-foreground-secondary-inverted);
  font-weight: var(--dt-font-weight-medium);
}

.d-recipe-emoji-row__reaction {
  --emoji-item-color-inset-shadow: transparent;
  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
  --emoji-item-color-background: var(--dt-action-color-background-muted-hover);

  height: var(--dt-size-550);
  padding: var(--dt-space-300) var(--dt-space-400);
  color: var(--emoji-item-color-foreground);
  background-color: var(--emoji-item-color-background);
  border: 0;
  border-radius: var(--dt-size-radius-pill);
  box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);

  &.d-recipe-emoji-row__picker {
    padding: var(--dt-space-200) var(--dt-space-350);
  }

  &:hover {
    --emoji-item-color-inset-shadow: var(--dt-color-border-moderate);
    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);
  }

  &:active {
    --emoji-item-color-background: var(--dt-action-color-background-muted-active);
    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);

    transform: scale(.98);
  }

  &--selected {
    --emoji-item-color-inset-shadow: var(--dt-color-border-brand);
    --emoji-item-color-foreground: var(--dt-color-link-primary);
    --emoji-item-color-background: var(--dt-action-color-background-base-hover);

    .d-recipe-emoji-row__reaction-number {
      font-weight: var(--dt-font-weight-bold);
    }

    &:hover {
      --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);
      --emoji-item-color-foreground: var(--dt-color-link-primary-hover);
    }

    &:active {
      --emoji-item-color-background: var(--dt-action-color-background-base-active);
    }
  }
}

.d-recipe-emoji-row__reaction-number {
  // set font properties individually to change line height,
  // as font shorthand property will override line-height.
  font-weight: var(--dt-typography-body-sm-font-weight);
  font-size: var(--dt-typography-body-sm-font-size);
  font-family: var(--dt-typography-body-sm-font-family);
  font-variant: tabular-nums;
  line-height: var(--dt-font-line-height-100);
}

.d-recipe-emoji-row__emoji {
  --emoji-size: calc(var(--dt-icon-size-200) + .2rem);

  display: inline-flex;
  margin-inline-end: var(--dt-space-300);
  inline-size: var(--emoji-size);
  block-size: var(--emoji-size);
}

.d-recipe-emoji-row__emoji-img {
  inline-size: var(--emoji-size);
  block-size: var(--emoji-size);
}