/* ==========================================================================
   Component: Button
   Not covered by a dedicated markdown spec in this project; hierarchy rules
   sourced from foundations/design_system.md §7 (Primary / Secondary) and
   form.md §5 (submit state).
   ========================================================================== */
 
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-decoration: none;
    border: var(--border-width-md) solid transparent;
    cursor: pointer;
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
 
/* Primary — main conversion actions (design_system.md §7) */
.button--primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-radius: var(--button-primary-radius);
}
 
.button--primary:hover {
    background-color: var(--button-primary-bg-hover);
    color: var(--button-primary-text);
}

.button--primary:active {
    background-color: var(--button-primary-bg-active);
    color: var(--button-primary-text);
}
 
/* Secondary — supporting actions (e.g. "Mở trong Google Maps") */
.button--secondary {
    background-color: transparent;
    color: var(--button-secondary-text);
    border-color: var(--button-secondary-border);
    border-radius: var(--button-secondary-radius);
}
 
.button--secondary:hover {
    background-color: var(--button-secondary-bg-hover);
    color: var(--button-secondary-text);
}
 
.button:disabled,
.button[aria-disabled="true"] {
    background-color: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    border-color: transparent;
    cursor: not-allowed;
}
 
.button--full {
    width: 100%;
}
 
/* Submitting state — keeps button size fixed, disables re-entry, keeps the
   "Đang gửi..." label visible (form.md §5: "Ngăn double submit",
   "Giữ nguyên kích thước button", "Hiển thị text như Đang gửi..."). The
   label swap itself is done by JS on the button's text node. */
.button[data-state="submitting"] {
    pointer-events: none;
    opacity: 0.85;
}
 
.button__spinner {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: button-spin 0.7s linear infinite;
    flex-shrink: 0;
}
 
.button[data-state="submitting"] .button__spinner {
    display: inline-block;
}
 
.button__spinner {
    display: none;
}
 
@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}
 
@media (prefers-reduced-motion: reduce) {
    .button__spinner {
        animation-duration: 1.4s;
    }
}