/*
 * LOCALMATE shared component rules. Loaded after page styles.
 *
 * 1) Existing buttons keep their own look; this file only gives them the same
 *    interaction states (focus ring, disabled, pressed) so all seven behave alike.
 * 2) .lm-btn is the button for all new work. See docs/design-system.md.
 */

/* ---- 1. Shared states for the existing button classes ---------------- */
:where(.form_submit, .lm_bn_btn, .lm_cta, .sm-button, .lm_quick_submit, .lm_quick_toggle, .more_view_btn, .study-cta, .lm_lang_btn) {
  transition-property: background-color, color, border-color, opacity, transform;
  transition-duration: var(--lm-duration, 200ms);
  transition-timing-function: var(--lm-ease, ease);
}
:is(.form_submit, .lm_bn_btn, .lm_cta, .sm-button, .lm_quick_submit, .lm_quick_toggle, .more_view_btn, .study-cta, .lm_lang_btn):focus-visible {
  outline: var(--lm-focus-ring, 2px solid #0077b3);
  outline-offset: var(--lm-focus-offset, 3px);
}
:is(.form_submit, .lm_bn_btn, .lm_cta, .sm-button, .lm_quick_submit, .more_view_btn, .study-cta):is(:disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- 2. .lm-btn — the button for new work ----------------------------- */
.lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lm-space-2, 8px);
  min-height: 48px;                      /* touch target */
  padding: 0 var(--lm-space-5, 24px);
  border: 1px solid transparent;
  border-radius: var(--lm-radius, 8px);
  font-family: var(--lm-font, sans-serif);
  font-size: var(--lm-text-md, 1rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lm-duration, 200ms) var(--lm-ease, ease),
              color var(--lm-duration, 200ms) var(--lm-ease, ease),
              border-color var(--lm-duration, 200ms) var(--lm-ease, ease);
}
.lm-btn--primary   { background: var(--lm-blue, #0077b3); color: var(--lm-white, #fff); }
.lm-btn--primary:hover { background: var(--lm-blue-hover, #006b9c); }
.lm-btn--secondary { background: var(--lm-white, #fff); color: var(--lm-blue, #0077b3); border-color: var(--lm-blue, #0077b3); }
.lm-btn--secondary:hover { background: var(--lm-blue-soft, #eef8fd); }
.lm-btn--ghost     { background: transparent; color: var(--lm-ink, #1a2730); }
.lm-btn--ghost:hover { background: var(--lm-surface, #edf3f4); }
.lm-btn--on-dark   { background: var(--lm-white, #fff); color: var(--lm-blue, #0077b3); }
.lm-btn--sm { min-height: 36px; padding: 0 var(--lm-space-4, 16px); font-size: var(--lm-text-sm, .875rem); }
.lm-btn--lg { min-height: 56px; padding: 0 var(--lm-space-6, 32px); font-size: var(--lm-text-lg, 1.25rem); }
.lm-btn--block { display: flex; width: 100%; }
.lm-btn:focus-visible { outline: var(--lm-focus-ring, 2px solid #0077b3); outline-offset: var(--lm-focus-offset, 3px); }
.lm-btn:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; pointer-events: none; }
.lm-btn[aria-busy="true"] { cursor: progress; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .lm-btn,
  :where(.form_submit, .lm_bn_btn, .lm_cta, .sm-button, .lm_quick_submit, .lm_quick_toggle, .more_view_btn, .study-cta, .lm_lang_btn) {
    transition: none;
  }
}