@import '../../../../styles/design-tokens';

// Подсказка «кого найдёт эта должность» под полем «Должность». Живёт внутри
// Field, поэтому отступ сверху небольшой — визуально это продолжение поля,
// а не отдельный блок.
.positionPreview {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid $gray-200;
  border-radius: $r-sm;
  background: $gray-50;
  font-size: 12px;
  line-height: 1.5;
}

// Найдено — зелёная рамка: должность рабочая, шаг резолвится.
.previewOk {
  border-color: $green-600;
  background: rgba($green-600, .06);
}

// Не найдено — предупреждение: шаг останется без исполнителя.
.previewMiss {
  border-color: $gold-500;
  background: $gold-50;
}

.previewTitle {
  color: $gray-700;
}

.previewList {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.previewPerson {
  color: $gray-900;
}

.previewCompany {
  color: $gray-500;
}

// Похожая должность — кнопка: клик подставляет её точное написание в поле,
// чтобы не переписывать вручную и не ошибиться в регистре/пробелах.
.previewSuggest {
  display: block;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: $r-sm;
  background: transparent;
  text-align: left;
  font-family: $font-sans;
  font-size: 12px;
  color: $navy-700;
  cursor: pointer;

  &:hover {
    background: #fff;
    color: $gold-600;
  }
}

.previewSuggestCount {
  color: $gray-500;
}