/* Частые значения — пресеты процента (скидка, кэшбек) под полем ввода,
   в один клик: card-discount-pick.js, card-cashback-pick.js,
   sale-promo-box.js. Вынесено из card-kind.css, когда тот перерос
   двести строк добавлением строки места (решение №187) — с самим
   рисунком строки вида карты общего у пресетов нет ничего, соседство
   было только по месту в файле. */

.presets {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}

.presets__pill {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  background: none;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.presets__pill.is-on {
  border-color: var(--accent-dim);
  color: var(--accent-text);
  font-weight: 650;
}

@media (hover: hover) {
  .presets__pill:hover { border-color: var(--accent-dim); }
}