.root {
  position: relative;
  margin: 0.25rem 0.25rem 0.875rem 0.25rem;
}

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

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

.name {
  font-size: 1rem;
  font-weight: 500;
  max-width: 12.5rem;
}

.phone {
  color: var(--color-text);
  line-height: 1rem;
}

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

.divider {
  height: 0.0625rem;
  margin: 0 0.5rem;
  background: var(--accent-color);
  filter: opacity(0.4);
}

.buttons {
  display: flex;

  .button {
    width: auto;
    flex: 1;
    height: 2.25rem;
    border-radius: 0;
    font-weight: 500;
    background-color: transparent;
    color: var(--accent-color);
    --ripple-color: var(--accent-background-active-color);

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

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