.root {
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: var(--message-meta-height);
}

.info-container {
  cursor: var(--custom-cursor, pointer);
  display: flex;
  padding: 0.5rem 1.5rem 0.5rem 0.125rem;
}

.info {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-left: 0.5rem;
}

.name {
  max-width: 12.5rem;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

.phone {
  color: var(--color-text);
}

.name,
.phone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divider {
  height: 0.0625rem;
  background: var(--accent-color);
  filter: opacity(0.35);
}

.buttons {
  display: flex;

  .button {
    --ripple-color: var(--accent-background-active-color);

    flex: 1;

    width: auto;
    height: 2rem;

    font-weight: var(--font-weight-medium);
    color: var(--accent-color);

    opacity: 1;
    background-color: transparent;

    transition: 0.25s ease-in-out opacity;

    &:not(.disabled):not(:disabled):hover {
      color: var(--accent-color);
      opacity: 0.75;
      background-color: transparent;
    }
  }
}

.emoji-icon-background {
  margin-bottom: 2.25rem;
}
