/* =============================================================
   .btn  [--sm | --md | --lg]  [--primary | --outline | --ghost]
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: var(--weight-xxs) solid transparent;
  border-radius: var(--corner-round);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--type-button-s-weight);
  font-size: var(--type-button-s-size);
  line-height: var(--type-button-s-line-height);
  letter-spacing: var(--type-button-s-tracking);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transition: none; }

/* Sizes */
.btn--sm { height: 32px; padding: var(--spacing-xs) var(--spacing-s); }
.btn--md { height: 40px; padding: var(--spacing-xs) var(--spacing-s); }
.btn--lg {
  height: 56px;
  padding: var(--spacing-m) var(--spacing-l);
  font-size: var(--type-button-l-size);
  line-height: var(--type-button-l-line-height);
  letter-spacing: var(--type-button-l-tracking);
}

/* Primary */
.btn--primary                      { background-color: var(--button-primary-enabled); color: var(--button-primary-on-primary); }
.btn--primary:hover:not(:active)   { background-color: var(--button-primary-hover); }
.btn--primary:active               { background-color: var(--button-primary-pressed); }
.btn--primary:focus-visible        { outline: none; box-shadow: 0 0 0 4px var(--button-primary-hover); }

/* Outline */
.btn--outline                      { border-color: var(--button-primary-enabled); color: var(--button-primary-enabled); }
.btn--outline:hover:not(:active)   { border-color: var(--button-primary-hover); color: var(--button-primary-hover); }
.btn--outline:active               { border-color: var(--button-primary-pressed); color: var(--button-primary-pressed); }
.btn--outline:focus-visible        { outline: none; box-shadow: 0 0 0 4px var(--colour-primary-30); }

/* Ghost / transparent */
.btn--ghost                        { color: var(--button-transparent-on-transparent); }
.btn--ghost:hover:not(:active)     { background-color: var(--button-transparent-hover); }
.btn--ghost:active                 { background-color: var(--button-transparent-pressed); }
.btn--ghost:focus-visible          { outline: none; box-shadow: 0 0 0 4px var(--colour-neutral-30); }

/* Light */
.btn--light                    { background-color: var(--button-light-enabled); color: var(--button-light-on-light); }
.btn--light:hover:not(:active) { background-color: var(--button-light-hover); }
.btn--light:active             { background-color: var(--button-light-hover-2); }
.btn--light:focus-visible      { outline: none; box-shadow: 0 0 0 4px var(--colour-primary-20); }

/* Icon helpers */
.btn__icon                         { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn__icon--left                   { width: 22px; height: 22px; }
.btn__icon--right                  { width: 16px; height: 16px; }
.btn--lg .btn__icon--right         { width: 20px; height: 20px; }
.btn__icon img                     { width: 100%; height: 100%; object-fit: contain; }