/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --contact-selector-background-color: #f9f9f9;
  --contact-selector-chip-background: var(--color-primary);
  --contact-selector-chip-height: 38px;
  --contact-selector-chip-text-max-width: 150px;
}

.container {
  all: initial;
  font-family: var(--default-font-family);
}

.selector {
  display: flex;
  padding: 8px 30px;
  background-color: var(--contact-selector-background-color);
  box-shadow: inset 0 -1px 0 0 color-mod(#000 alpha(10%));
  flex-flow: row wrap;
}

.input {
  all: initial;
  margin: 2px 0;
  letter-spacing: -0.2px;
  font-family: var(--default-font-family);
  font-size: 16px;
  line-height: var(--contact-selector-chip-height);
  flex: 1 1 auto;
}

.chip {
  display: inline-flex;
  box-sizing: border-box;
  height: var(--contact-selector-chip-height);
  margin: 2px 10px 2px 0;
  padding: 5px;
  border-radius: calc(var(--contact-selector-chip-height) / 2);
  background: var(--contact-selector-chip-background);
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #fff;
  @mixin no-select;
  cursor: pointer;
}

.chipText {
  position: relative;
  margin: 0 10px;
  font-size: var(--default-font-size);
  font-weight: 500;
  line-height: 20px;
  height: 20px;
  letter-spacing: -0.3px;
  max-width: var(--contact-selector-chip-text-max-width);
  @mixin text-overflow-ellipsis;
}

.chipText:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--contact-selector-chip-text-max-width);
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 85%,
    var(--contact-selector-chip-background)
  );
}

/* .chipAvatar {} */

.avatarWrapper {
  line-height: 0;
}

.deleteIcon {
  color: #fff;
  margin: 5px;
}

.empty {
  padding: calc(var(--default-padding) * 2);
  text-align: center;
  font-size: var(--default-font-size-large);
  color: color-mod(#000 alpha(80%));
}