/**
 * Button Component Styles
 * Compact, accessible button sizing with proper touch targets
 */

/* Base Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-xs) var(--ds-space-md);
    font-family: var(--ds-font-family-sans);
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-medium);
    line-height: var(--ds-line-height-snug, 1.25);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 6px; /* Reduced from 8px for more angular look */
    min-height: 2.5rem; /* 40px - compact but still accessible */
    transition: var(--ds-transition-base);
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:focus-visible {
    outline: 2px solid var(--ds-color-primary-500);
    outline-offset: 2px;
}

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

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

/* Button Sizes */

/* Small: 32px height - for dense UIs */
.btn--small,
.btn-sm {
    padding: var(--ds-space-2xs) var(--ds-space-sm);
    font-size: var(--ds-font-size-xs);
    min-height: 2rem; /* 32px */
    border-radius: 4px;
}

/* Default/Medium: 40px height */
.btn--medium,
.btn-md {
    padding: var(--ds-space-xs) var(--ds-space-md);
    font-size: var(--ds-font-size-sm);
    min-height: 2.5rem; /* 40px */
}

/* Large: 44px height - meets touch target on mobile */
.btn--large,
.btn-lg {
    padding: var(--ds-space-sm) var(--ds-space-lg);
    font-size: var(--ds-font-size-base);
    min-height: 2.75rem; /* 44px - WCAG touch target */
}

/* Button Variants */

/* Primary */
.btn-primary {
    background: linear-gradient(135deg, var(--ds-color-primary-600) 0%, var(--ds-color-primary-700) 100%);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-primary-600);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--ds-color-primary-700) 0%, var(--ds-color-primary-800, #1e3a8a) 100%);
    border-color: var(--ds-color-primary-700);
    color: var(--ds-color-neutral-0);
}

/* Secondary */
.btn-secondary {
    background-color: var(--ds-color-neutral-100);
    color: var(--ds-color-neutral-900);
    border-color: var(--ds-color-neutral-300);
}

.btn-secondary:hover {
    background-color: var(--ds-color-neutral-200);
    border-color: var(--ds-color-neutral-400);
    color: var(--ds-color-neutral-900);
}

/* Outline Primary */
.btn-outline-primary {
    background-color: transparent;
    color: var(--ds-color-primary-600);
    border-color: var(--ds-color-primary-600);
}

.btn-outline-primary:hover {
    background-color: var(--ds-color-primary-600);
    color: var(--ds-color-neutral-0);
}

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

.btn-outline-secondary:hover {
    background-color: var(--ds-color-neutral-100);
    border-color: var(--ds-color-neutral-400);
    color: var(--ds-color-neutral-900);
}

/* Outline Success */
.btn-outline-success {
    background-color: transparent;
    color: var(--ds-color-success-600, #16a34a);
    border-color: var(--ds-color-success-600, #16a34a);
}

.btn-outline-success:hover {
    background-color: var(--ds-color-success-600, #16a34a);
    border-color: var(--ds-color-success-600, #16a34a);
    color: var(--ds-color-neutral-0);
}

/* Outline Danger */
.btn-outline-danger {
    background-color: transparent;
    color: var(--ds-color-danger-600, #dc2626);
    border-color: var(--ds-color-danger-600, #dc2626);
}

.btn-outline-danger:hover {
    background-color: var(--ds-color-danger-600, #dc2626);
    border-color: var(--ds-color-danger-600, #dc2626);
    color: var(--ds-color-neutral-0);
}

/* Outline Warning */
.btn-outline-warning {
    background-color: transparent;
    color: var(--ds-color-warning-600, #d97706);
    border-color: var(--ds-color-warning-500, #f59e0b);
}

.btn-outline-warning:hover {
    background-color: var(--ds-color-warning-500, #f59e0b);
    border-color: var(--ds-color-warning-500, #f59e0b);
    color: var(--ds-color-neutral-900);
}

/* Outline Info */
.btn-outline-info {
    background-color: transparent;
    color: var(--ds-color-info-600, #0891b2);
    border-color: var(--ds-color-info-600, #0891b2);
}

.btn-outline-info:hover {
    background-color: var(--ds-color-info-600, #0891b2);
    border-color: var(--ds-color-info-600, #0891b2);
    color: var(--ds-color-neutral-0);
}

/* Outline Light */
.btn-outline-light {
    background-color: transparent;
    color: var(--ds-color-neutral-600);
    border-color: var(--ds-color-neutral-300);
}

.btn-outline-light:hover {
    background-color: var(--ds-color-neutral-50);
    border-color: var(--ds-color-neutral-300);
    color: var(--ds-color-neutral-900);
}

/* Outline Dark */
.btn-outline-dark {
    background-color: transparent;
    color: var(--ds-color-neutral-900);
    border-color: var(--ds-color-neutral-900);
}

.btn-outline-dark:hover {
    background-color: var(--ds-color-neutral-900);
    border-color: var(--ds-color-neutral-900);
    color: var(--ds-color-neutral-0);
}

/* Success */
.btn-success {
    background-color: var(--ds-color-success-600, #16a34a);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-success-600, #16a34a);
}

.btn-success:hover {
    background-color: var(--ds-color-success-700, #15803d);
    border-color: var(--ds-color-success-700, #15803d);
    color: var(--ds-color-neutral-0);
}

/* Danger */
.btn-danger {
    background-color: var(--ds-color-danger-600, #dc2626);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-danger-600, #dc2626);
}

.btn-danger:hover {
    background-color: var(--ds-color-danger-700, #b91c1c);
    border-color: var(--ds-color-danger-700, #b91c1c);
    color: var(--ds-color-neutral-0);
}

/* Warning */
.btn-warning {
    background-color: var(--ds-color-warning-500, #f59e0b);
    color: var(--ds-color-neutral-900);
    border-color: var(--ds-color-warning-500, #f59e0b);
}

.btn-warning:hover {
    background-color: var(--ds-color-warning-600, #d97706);
    border-color: var(--ds-color-warning-600, #d97706);
    color: var(--ds-color-neutral-900);
}

/* Info */
.btn-info {
    background-color: var(--ds-color-info-600, #0891b2);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-info-600, #0891b2);
}

.btn-info:hover {
    background-color: var(--ds-color-info-700, #0e7490);
    border-color: var(--ds-color-info-700, #0e7490);
    color: var(--ds-color-neutral-0);
}

/* Light */
.btn-light {
    background-color: var(--ds-color-neutral-50);
    color: var(--ds-color-neutral-900);
    border-color: var(--ds-color-neutral-200);
}

.btn-light:hover {
    background-color: var(--ds-color-neutral-100);
    border-color: var(--ds-color-neutral-300);
    color: var(--ds-color-neutral-900);
}

/* Dark */
.btn-dark {
    background-color: var(--ds-color-neutral-900);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-neutral-900);
}

.btn-dark:hover {
    background-color: var(--ds-color-neutral-800);
    border-color: var(--ds-color-neutral-800);
    color: var(--ds-color-neutral-0);
}

/* Link style button */
.btn-link {
    background-color: transparent;
    color: var(--ds-color-primary-600);
    border-color: transparent;
    text-decoration: underline;
    padding: 0;
    min-height: auto;
}

.btn-link:hover {
    color: var(--ds-color-primary-700);
    text-decoration: underline;
    transform: none;
}

/* Button with icon only */
.btn--icon-only {
    padding: var(--ds-space-xs);
    min-width: 2.5rem;
}

.btn--icon-only.btn--small {
    padding: var(--ds-space-2xs);
    min-width: 2rem;
}

.btn--icon-only.btn--large {
    padding: var(--ds-space-sm);
    min-width: 2.75rem;
}

/* Button group */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}

.btn-group .btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    margin-left: 0;
}

.btn-group .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

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

/* Block button (full width) */
.btn-block {
    display: flex;
    width: 100%;
}

/* Responsive - Ensure touch targets on mobile */
@media (max-width: 768px) {
    .btn {
        min-height: 2.75rem; /* 44px touch target on mobile */
    }

    .btn--small,
    .btn-sm {
        min-height: 2.5rem; /* 40px minimum on mobile */
    }

    .btn-block {
        width: 100%;
    }
}

/* BEM-style aliases for compatibility */
.btn--primary { 
    background: linear-gradient(135deg, var(--ds-color-primary-600) 0%, var(--ds-color-primary-700) 100%);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-primary-600);
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--ds-color-primary-700) 0%, var(--ds-color-primary-800, #1e3a8a) 100%);
    border-color: var(--ds-color-primary-700);
    color: var(--ds-color-neutral-0);
}

.btn--secondary {
    background-color: var(--ds-color-neutral-100);
    color: var(--ds-color-neutral-900);
    border-color: var(--ds-color-neutral-300);
}

.btn--secondary:hover {
    background-color: var(--ds-color-neutral-200);
    border-color: var(--ds-color-neutral-400);
    color: var(--ds-color-neutral-900);
}

.btn--success {
    background-color: var(--ds-color-success-600, #16a34a);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-success-600, #16a34a);
}

.btn--success:hover {
    background-color: var(--ds-color-success-700, #15803d);
    border-color: var(--ds-color-success-700, #15803d);
    color: var(--ds-color-neutral-0);
}

.btn--danger {
    background-color: var(--ds-color-danger-600, #dc2626);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-danger-600, #dc2626);
}

.btn--danger:hover {
    background-color: var(--ds-color-danger-700, #b91c1c);
    border-color: var(--ds-color-danger-700, #b91c1c);
    color: var(--ds-color-neutral-0);
}

.btn--warning {
    background-color: var(--ds-color-warning-600, #d97706);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-warning-600, #d97706);
}

.btn--warning:hover {
    background-color: var(--ds-color-warning-700, #b45309);
    border-color: var(--ds-color-warning-700, #b45309);
    color: var(--ds-color-neutral-0);
}

.btn--info {
    background-color: var(--ds-color-info-600, #0284c7);
    color: var(--ds-color-neutral-0);
    border-color: var(--ds-color-info-600, #0284c7);
}

.btn--info:hover {
    background-color: var(--ds-color-info-700, #0369a1);
    border-color: var(--ds-color-info-700, #0369a1);
    color: var(--ds-color-neutral-0);
}

.btn--link {
    background-color: transparent;
    color: var(--ds-color-primary-600);
    border-color: transparent;
    text-decoration: underline;
}

.btn--link:hover {
    color: var(--ds-color-primary-700);
    background-color: transparent;
    border-color: transparent;
}