/**
 * MKM Bix - Buttons
 * Button component styles
 * @package MKM_Bix
 */

/* ==================== BASE BUTTON ==================== */
.mkm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mkm-space-2);
    padding: var(--mkm-space-3) var(--mkm-space-6);
    font-family: var(--mkm-font-primary);
    font-size: var(--mkm-fs-sm);
    font-weight: var(--mkm-fw-semibold);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    border: 2px solid transparent;
    border-radius: var(--mkm-radius);
    cursor: pointer;
    user-select: none;
    transition: all var(--mkm-transition);
}

.mkm-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--mkm-primary-rgb), 0.25);
}

.mkm-btn:disabled,
.mkm-btn.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== BUTTON VARIANTS ==================== */

/* Primary Button */
.mkm-btn-primary {
    background: linear-gradient(135deg, var(--mkm-primary), var(--mkm-secondary));
    color: var(--mkm-white);
    border-color: transparent;
}

.mkm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--mkm-shadow-lg);
    color: var(--mkm-white);
}

.mkm-btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.mkm-btn-secondary {
    background: var(--mkm-gray-100);
    color: var(--mkm-gray-800);
    border-color: transparent;
}

.mkm-btn-secondary:hover {
    background: var(--mkm-gray-200);
    color: var(--mkm-gray-900);
}

/* Outline Button */
.mkm-btn-outline {
    background: transparent;
    color: var(--mkm-primary);
    border-color: var(--mkm-primary);
}

.mkm-btn-outline:hover {
    background: var(--mkm-primary);
    color: var(--mkm-white);
}

/* Outline Secondary */
.mkm-btn-outline-secondary {
    background: transparent;
    color: var(--mkm-gray-700);
    border-color: var(--mkm-gray-300);
}

.mkm-btn-outline-secondary:hover {
    background: var(--mkm-gray-100);
    border-color: var(--mkm-gray-400);
}

/* Ghost Button */
.mkm-btn-ghost {
    background: transparent;
    color: var(--mkm-gray-700);
    border-color: transparent;
}

.mkm-btn-ghost:hover {
    background: var(--mkm-gray-100);
}

/* Link Button */
.mkm-btn-link {
    background: transparent;
    color: var(--mkm-primary);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.mkm-btn-link:hover {
    color: var(--mkm-primary-dark);
    text-decoration: underline;
}

/* Success Button */
.mkm-btn-success {
    background: var(--mkm-success);
    color: var(--mkm-white);
    border-color: transparent;
}

.mkm-btn-success:hover {
    background: #218838;
    color: var(--mkm-white);
}

/* Danger Button */
.mkm-btn-danger {
    background: var(--mkm-danger);
    color: var(--mkm-white);
    border-color: transparent;
}

.mkm-btn-danger:hover {
    background: #c82333;
    color: var(--mkm-white);
}

/* Warning Button */
.mkm-btn-warning {
    background: var(--mkm-warning);
    color: var(--mkm-gray-900);
    border-color: transparent;
}

.mkm-btn-warning:hover {
    background: #e0a800;
}

/* Info Button */
.mkm-btn-info {
    background: var(--mkm-info);
    color: var(--mkm-white);
    border-color: transparent;
}

.mkm-btn-info:hover {
    background: #138496;
    color: var(--mkm-white);
}

/* Dark Button */
.mkm-btn-dark {
    background: var(--mkm-gray-900);
    color: var(--mkm-white);
    border-color: transparent;
}

.mkm-btn-dark:hover {
    background: var(--mkm-gray-800);
    color: var(--mkm-white);
}

/* Light Button */
.mkm-btn-light {
    background: var(--mkm-white);
    color: var(--mkm-gray-800);
    border-color: var(--mkm-gray-200);
}

.mkm-btn-light:hover {
    background: var(--mkm-gray-50);
    border-color: var(--mkm-gray-300);
}

/* ==================== BUTTON SIZES ==================== */

/* Extra Small */
.mkm-btn-xs {
    padding: var(--mkm-space-1) var(--mkm-space-3);
    font-size: var(--mkm-fs-xs);
}

/* Small */
.mkm-btn-sm {
    padding: var(--mkm-space-2) var(--mkm-space-4);
    font-size: var(--mkm-fs-xs);
}

/* Large */
.mkm-btn-lg {
    padding: var(--mkm-space-4) var(--mkm-space-8);
    font-size: var(--mkm-fs-base);
}

/* Extra Large */
.mkm-btn-xl {
    padding: var(--mkm-space-5) var(--mkm-space-10);
    font-size: var(--mkm-fs-lg);
}

/* ==================== BUTTON SHAPES ==================== */

/* Pill Button */
.mkm-btn-pill {
    border-radius: var(--mkm-radius-full);
}

/* Square Button */
.mkm-btn-square {
    border-radius: 0;
}

/* Rounded Button */
.mkm-btn-rounded {
    border-radius: var(--mkm-radius-lg);
}

/* ==================== BUTTON WIDTH ==================== */

/* Full Width */
.mkm-btn-block {
    display: flex;
    width: 100%;
}

/* ==================== ICON BUTTONS ==================== */
.mkm-btn-icon {
    padding: var(--mkm-space-3);
    min-width: 44px;
    min-height: 44px;
}

.mkm-btn-icon svg {
    width: 20px;
    height: 20px;
}

.mkm-btn-icon.mkm-btn-sm {
    padding: var(--mkm-space-2);
    min-width: 36px;
    min-height: 36px;
}

.mkm-btn-icon.mkm-btn-sm svg {
    width: 16px;
    height: 16px;
}

.mkm-btn-icon.mkm-btn-lg {
    padding: var(--mkm-space-4);
    min-width: 52px;
    min-height: 52px;
}

.mkm-btn-icon.mkm-btn-lg svg {
    width: 24px;
    height: 24px;
}

/* ==================== BUTTON WITH ICON ==================== */
.mkm-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mkm-btn-icon-left svg {
    order: -1;
}

.mkm-btn-icon-right svg {
    order: 1;
}

/* ==================== BUTTON LOADING ==================== */
.mkm-btn-loading {
    position: relative;
    pointer-events: none;
}

.mkm-btn-loading .mkm-btn-text {
    opacity: 0;
}

.mkm-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mkm-btn-spin 0.6s linear infinite;
}

@keyframes mkm-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== BUTTON GROUP ==================== */
.mkm-btn-group {
    display: inline-flex;
}

.mkm-btn-group .mkm-btn {
    border-radius: 0;
}

.mkm-btn-group .mkm-btn:first-child {
    border-top-left-radius: var(--mkm-radius);
    border-bottom-left-radius: var(--mkm-radius);
}

.mkm-btn-group .mkm-btn:last-child {
    border-top-right-radius: var(--mkm-radius);
    border-bottom-right-radius: var(--mkm-radius);
}

.mkm-btn-group .mkm-btn:not(:last-child) {
    border-right-width: 0;
}

.mkm-btn-group .mkm-btn:hover,
.mkm-btn-group .mkm-btn:focus {
    z-index: 1;
}

/* Vertical Button Group */
.mkm-btn-group-vertical {
    flex-direction: column;
}

.mkm-btn-group-vertical .mkm-btn {
    border-radius: 0;
}

.mkm-btn-group-vertical .mkm-btn:first-child {
    border-top-left-radius: var(--mkm-radius);
    border-top-right-radius: var(--mkm-radius);
    border-bottom-left-radius: 0;
}

.mkm-btn-group-vertical .mkm-btn:last-child {
    border-bottom-left-radius: var(--mkm-radius);
    border-bottom-right-radius: var(--mkm-radius);
    border-top-right-radius: 0;
}

.mkm-btn-group-vertical .mkm-btn:not(:last-child) {
    border-right-width: 2px;
    border-bottom-width: 0;
}

/* ==================== SOCIAL BUTTONS ==================== */
.mkm-btn-facebook {
    background: #1877f2;
    color: var(--mkm-white);
}

.mkm-btn-facebook:hover {
    background: #166fe5;
    color: var(--mkm-white);
}

.mkm-btn-twitter {
    background: #000000;
    color: var(--mkm-white);
}

.mkm-btn-twitter:hover {
    background: #1a1a1a;
    color: var(--mkm-white);
}

.mkm-btn-google {
    background: #ea4335;
    color: var(--mkm-white);
}

.mkm-btn-google:hover {
    background: #d33426;
    color: var(--mkm-white);
}

.mkm-btn-linkedin {
    background: #0a66c2;
    color: var(--mkm-white);
}

.mkm-btn-linkedin:hover {
    background: #095aa8;
    color: var(--mkm-white);
}

.mkm-btn-whatsapp {
    background: #25d366;
    color: var(--mkm-white);
}

.mkm-btn-whatsapp:hover {
    background: #20bd5a;
    color: var(--mkm-white);
}