/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

.conversation-input-bar-mention-suggestion {
  position: absolute;
  z-index: @z-index-panel - 1;
  right: 16px;
  left: 64px;
  max-height: 150px;
  border: 0.5px solid var(--background-fade-16);
  border-radius: 8px;
  background-color: var(--modal-bg);
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.08);
}

.mention-suggestion-list {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 4px 0;
  cursor: pointer;
  white-space: nowrap;

  &__item {
    display: flex;
    width: fit-content;
    min-width: 100%;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;

    &--highlighted {
      background-color: var(--background-fade-8);
    }

    &__avatar {
      min-width: 16px;
      margin-right: 12px;
    }

    &__name {
      margin-right: 4px;
      font-size: var(--font-size-medium);
      line-height: var(--line-height-xs);
    }

    &__username,
    &__remaining {
      color: var(--background-fade-40);
      font-size: var(--font-size-small);
      line-height: var(--line-height-xs);
    }

    &__guest-badge {
      width: 12px;
      min-width: 12px;
      height: 12px;
      margin-left: 12px;

      path {
        fill: var(--background-fade-40);
      }
    }
  }
}