/* ============================================
   Andres Automotive - Button Components
   Global reusable button styles
   Fixed colors - no theme switching
   All values use CSS variables from aa-variables.css
   ============================================ */

/* ========================================
   Base Button Styles
   ======================================== */

.aa-btn {
    display: inline-block;
    padding: var(--aa-btn-padding-y) var(--aa-btn-padding-x);
    border-radius: var(--aa-btn-border-radius);
    text-decoration: none;
    font-weight: var(--aa-btn-font-weight);
    transition: var(--aa-transition-bg);
    border: none;
    cursor: pointer;
    text-align: center;
    font-size: var(--aa-font-size-base);
    line-height: var(--aa-line-height-base);
}

.aa-btn:hover {
    text-decoration: none;
    transform: translateY(-0.0625rem);
}

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

/* ========================================
   Button Variants
   ======================================== */

/* Primary Button (Red) */
.aa-btn-primary,
.btn-admin,
.btn-login {
    background-color: var(--aa-primary);
    color: var(--aa-white);
}

.aa-btn-primary:hover,
.btn-admin:hover,
.btn-login:hover {
    background-color: var(--aa-primary-dark);
    color: var(--aa-white);
}

/* Secondary Button (Gray outline) */
.aa-btn-secondary {
    background-color: transparent;
    color: var(--aa-text-primary);
    border: var(--aa-border-width) solid var(--aa-border-color);
}

.aa-btn-secondary:hover {
    background-color: var(--aa-gray-100);
    border-color: var(--aa-gray-300);
    color: var(--aa-text-primary);
}

/* Success Button (Green) */
.aa-btn-success {
    background-color: var(--aa-success);
    color: var(--aa-white);
}

.aa-btn-success:hover {
    background-color: var(--aa-success);
    filter: brightness(0.9);
    color: var(--aa-white);
}

/* Danger Button (Red) */
.aa-btn-danger {
    background-color: var(--aa-danger);
    color: var(--aa-white);
}

.aa-btn-danger:hover {
    background-color: var(--aa-primary-dark);
    color: var(--aa-white);
}

/* Dark Button (Dark Green) */
.aa-btn-dark {
    background-color: var(--aa-gray-800);
    color: var(--aa-white);
}

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

/* Light Button */
.aa-btn-light {
    background-color: var(--aa-gray-100);
    color: var(--aa-text-primary);
    border: var(--aa-border-width) solid var(--aa-border-color);
}

.aa-btn-light:hover {
    background-color: var(--aa-gray-200);
    color: var(--aa-text-primary);
}

/* Ghost Button (Transparent with border) */
.aa-btn-ghost {
    background-color: transparent;
    color: var(--aa-text-primary);
    border: var(--aa-border-width) solid var(--aa-border-color);
}

.aa-btn-ghost:hover {
    background-color: var(--aa-bg-body);
}

.aa-btn-ghost-primary {
    background-color: transparent;
    color: var(--aa-primary);
    border: var(--aa-border-width) solid var(--aa-primary);
}

.aa-btn-ghost-primary:hover {
    background-color: var(--aa-primary);
    color: var(--aa-white);
}

/* ========================================
   Button Sizes
   ======================================== */

.aa-btn-sm {
    padding: var(--aa-btn-padding-y-sm) var(--aa-btn-padding-x-sm);
    font-size: var(--aa-font-size-sm);
}

.aa-btn-lg,
.btn-admin,
.btn-login {
    padding: var(--aa-btn-padding-y-lg) var(--aa-btn-padding-x-lg);
    font-size: var(--aa-font-size-lg);
}

/* ========================================
   Button States
   ======================================== */

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

.aa-btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.aa-btn-loading::after {
    content: "";
    position: absolute;
    width: var(--aa-spacing-4);
    height: var(--aa-spacing-4);
    top: 50%;
    left: 50%;
    margin-left: calc(var(--aa-spacing-4) / -2);
    margin-top: calc(var(--aa-spacing-4) / -2);
    border: var(--aa-border-width-thick) solid var(--aa-white);
    border-radius: 50%;
    border-top-color: transparent;
    animation: aa-btn-spin 0.6s linear infinite;
}

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

/* ========================================
   Button Groups
   ======================================== */

.aa-btn-group {
    display: inline-flex;
    gap: var(--aa-spacing-2);
}

.aa-btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    gap: var(--aa-spacing-2);
}

/* ========================================
   Icon Buttons
   ======================================== */

.aa-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--aa-spacing-2);
}

.aa-btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--aa-spacing-10);
    height: var(--aa-spacing-10);
    padding: 0;
}

.aa-btn-icon-only.aa-btn-sm {
    width: var(--aa-spacing-8);
    height: var(--aa-spacing-8);
}

.aa-btn-icon-only.aa-btn-lg {
    width: var(--aa-spacing-12);
    height: var(--aa-spacing-12);
}

/* ========================================
   Full Width Button
   ======================================== */

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

/* ========================================
   Button Links
   ======================================== */

.aa-btn-link {
    background-color: transparent;
    color: var(--aa-primary);
    border: none;
    padding: 0;
    text-decoration: underline;
}

.aa-btn-link:hover {
    color: var(--aa-primary-dark);
    background-color: transparent;
    transform: none;
}

/* ========================================
   Special Buttons
   ======================================== */

/* Outline Buttons */
.aa-btn-outline-primary {
    background-color: transparent;
    color: var(--aa-primary);
    border: var(--aa-border-width) solid var(--aa-primary);
}

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

.aa-btn-outline-secondary {
    background-color: transparent;
    color: var(--aa-text-secondary);
    border: var(--aa-border-width) solid var(--aa-gray-400);
}

.aa-btn-outline-secondary:hover {
    background-color: var(--aa-gray-400);
    color: var(--aa-white);
}

/* Gradient Button */
.aa-btn-gradient {
    background: linear-gradient(135deg, var(--aa-primary) 0%, var(--aa-primary-dark) 100%);
    color: var(--aa-white);
    border: none;
}

.aa-btn-gradient:hover {
    background: linear-gradient(135deg, var(--aa-primary-dark) 0%, var(--aa-primary-dark) 100%);
    filter: brightness(0.9);
    color: var(--aa-white);
}

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

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 767.98px) {
    .aa-btn-responsive {
        width: 100%;
    }
}