/*
 * Кнопка.
 *
 * В макете два вида: залитая золотом с белой подписью и текстовая ссылка
 * золотом со стрелкой. Форма одна и та же, отличается заливкой.
 */

.frk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--frk-space-xs);
  padding: 8px 12px;
  border: 1px solid var(--frk-color-gold);
  border-radius: var(--frk-radius);
  background: var(--frk-color-gold);
  color: var(--frk-color-text-inverse);
  font-family: var(--frk-font-ui);
  font-size: var(--frk-size-button);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-ui);
  white-space: nowrap;
  transition:
    background-color var(--frk-motion-fast) var(--frk-motion-ease),
    color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-button:hover {
  background: transparent;
  color: var(--frk-color-gold);
}

@media (min-width: 768px) {
  .frk-button {
    padding: 12px 20px;
  }
}

/*
 * Текстовая ссылка со стрелкой — второй вид кнопки в макете.
 * Стрелка уезжает вперёд при наведении, подсказывая направление перехода.
 */
.frk-link {
  display: inline-flex;
  align-items: center;
  gap: var(--frk-space-xs);
  color: var(--frk-color-gold);
  font-family: var(--frk-font-ui);
  font-size: var(--frk-size-button);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-link {
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-link:hover {
  color: var(--frk-color-ink);
}

.frk-link img {
  width: 1em;
  height: auto;
  transition: transform var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-link:hover img {
  transform: translateX(4px);
}

/*
 * Контурный вариант: белая заливка и золотая рамка. В макете им набраны
 * переходы к большим разделам — «Все коллекции», «Коллекция с этой цитатой».
 *
 * На узких экранах те же кнопки нарисованы залитыми: мелкая контурная
 * подпись хуже читается на телефоне, и макет это учитывает.
 */
@media (min-width: 1024px) {
  .frk-button--outline {
    background: var(--frk-color-surface);
    color: var(--frk-color-gold);
  }

  .frk-button--outline:hover {
    background: var(--frk-color-gold);
    color: var(--frk-color-text-inverse);
  }
}