/* ==========================================================================
   Business Radar – Button System
   3 sizes x 6 styles, all from Figma
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base button
   -------------------------------------------------------------------------- */
.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--px-weight-bold);
  font-size: var(--Font-Size-Btn);
  line-height: var(--Line-Height-Btn);
  letter-spacing: 0;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--R5);
  transition:
    background var(--px-duration-fast) var(--px-ease-out),
    color var(--px-duration-fast) var(--px-ease-out),
    border-color var(--px-duration-fast) var(--px-ease-out),
    box-shadow var(--px-duration-fast) var(--px-ease-out);
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */

/* Small (nav, inline) — 38-40px height */
.px-btn--sm {
  padding: 12px 15px;
  font-size: var(--Font-Size-Btn);
}

/* Medium (default) — 42-46px height */
.px-btn--md {
  padding: 12px 25px;
  font-size: var(--Font-Size-Btn-Lg);
}

/* Large (CTA panels) — 58-60px height, Figma "Btn 2" */
.px-btn--lg {
  padding: 21px 25px;
  font-size: var(--Font-Size-Btn-Lg);
  line-height: var(--Line-Height-Btn);
}

/* XS (compact) — 32px height */
.px-btn--xs {
  padding: 9px 12px;
  font-size: var(--Font-Size-Btn-Xs);
}

/* --------------------------------------------------------------------------
   Style: Primary (dark gradient)
   -------------------------------------------------------------------------- */
.px-btn--primary {
  background: var(--Gradient-Primary);
  color: var(--Wit);
}
.px-btn--primary:hover {
  box-shadow: var(--px-shadow-hover);
}

/* --------------------------------------------------------------------------
   Style: White fill
   -------------------------------------------------------------------------- */
.px-btn--white {
  background-color: var(--Wit);
  color: var(--Zwart);
}
.px-btn--white:hover {
  box-shadow: var(--px-shadow-hover);
}

/* --------------------------------------------------------------------------
   Style: Off-white fill
   -------------------------------------------------------------------------- */
.px-btn--off-white {
  background-color: var(--Warm-Off-White);
  color: var(--Zwart);
}
.px-btn--off-white:hover {
  background: var(--Gradient-Primary);
  color: var(--Wit);
}
.px-btn--off-white:hover .px-btn__icon {
  color: var(--Wit);
}

/* --------------------------------------------------------------------------
   Style: Outline black
   -------------------------------------------------------------------------- */
.px-btn--outline {
  background: transparent;
  color: var(--Zwart);
  border: 1.5px solid var(--Zwart);
}
.px-btn--outline:hover {
  background: var(--Gradient-Primary);
  color: var(--Wit);
  border-color: transparent;
}
.px-btn--outline:hover .px-btn__icon {
  color: var(--Wit);
}

/* --------------------------------------------------------------------------
   Style: Outline white
   -------------------------------------------------------------------------- */
.px-btn--outline-white {
  background: transparent;
  color: var(--Wit);
  border: 1.5px solid var(--Wit);
}
.px-btn--outline-white:hover {
  background-color: var(--Wit);
  color: var(--Zwart);
}
.px-btn--outline-white:hover .px-btn__icon {
  color: var(--Zwart);
}

/* --------------------------------------------------------------------------
   Arrow icon
   -------------------------------------------------------------------------- */
.px-btn__icon {
  display: inline-flex;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.px-btn--md .px-btn__icon,
.px-btn--lg .px-btn__icon {
  width: 12px;
  height: 12px;
}

.px-btn__icon svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Mobile arrow icon (≤768px)
   Item #90 (2x gemeld): de gebruiker wil het pijltje op mobiel duidelijk
   groter dan de letterlijke Figma-maat (8x8px). Bewuste afwijking van de
   image-first regel op expliciet, herhaald verzoek: het pijltje krijgt op
   mobiel een ruimere maat dan op desktop zodat het goed leesbaar is in de
   bredere mobiele knoppen. Basis 14px, --md/--lg CTA-knoppen 16px.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .px-btn__icon {
    width: 14px;
    height: 14px;
  }
  .px-btn--md .px-btn__icon,
  .px-btn--lg .px-btn__icon {
    width: 16px;
    height: 16px;
  }
}