/**
 * Componente de Botões - Design System Locamais Portal
 * @version 1.0.0
 *
 * Fonte única da verdade para todos os estilos de botões do sistema.
 * Cobre variações de cor, tamanho, e estados (hover, active, disabled).
 * Utiliza variáveis CSS para consistência com o tema global.
 */

/* ========================================================================
 * 1. BASE DO BOTÃO (.locamais-button)
 * ======================================================================== */

.locamais-button {
    /* Box Model & Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important; /* 8px */
    padding: 0.5rem 1rem !important; /* 8px 16px */
    height: 40px !important;
    border: 1px solid transparent !important;
    border-radius: var(--lm-border-radius, 0.375rem) !important;
    box-sizing: border-box !important;

    /* Tipografia */
    font-family: var(--lm-font-sans, sans-serif) !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    /* Aparência e Interação */
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--lm-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.05)) !important;
    position: relative;
    overflow: hidden;
}

/* Ícone dentro do botão */
.locamais-button .dashicons,
.locamais-button .fa-solid,
.locamais-button .fa-regular {
    font-size: 1.125rem !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
}

/* Efeito sutil de brilho no hover */
.locamais-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.locamais-button:hover::before {
    left: 100%;
}

/* ========================================================================
 * 2. VARIAÇÕES DE COR
 * ======================================================================== */

/* --- Botão Primário (Ação principal) --- */
.locamais-button--primary {
    background-color: var(--lm-primary) !important;
    border-color: var(--lm-primary) !important;
    color: white !important;
}
.locamais-button--primary:hover {
    background-color: var(--lm-primary-dark) !important;
    border-color: var(--lm-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--lm-shadow-md) !important;
}

/* --- Botão Secundário / Outline (Ação secundária) --- */
.locamais-button--outline {
    background-color: transparent !important;
    border-color: var(--lm-border) !important;
    color: var(--lm-text) !important;
}
.locamais-button--outline:hover {
    background-color: var(--lm-lighter) !important;
    border-color: #CBD5E1 !important;
    color: var(--lm-dark) !important;
}

/* --- Botão de Sucesso (Verde) --- */
.locamais-button--success {
    background-color: var(--lm-success) !important;
    border-color: var(--lm-success) !important;
    color: white !important;
}
.locamais-button--success:hover {
    background-color: #0d996d !important; /* Variação mais escura de --lm-success */
    border-color: #0d996d !important;
}

/* --- Botão de Erro (Vermelho) --- */
.locamais-button--error {
    background-color: var(--lm-error) !important;
    border-color: var(--lm-error) !important;
    color: white !important;
}
.locamais-button--error:hover {
    background-color: #d82b2b !important; /* Variação mais escura de --lm-error */
    border-color: #d82b2b !important;
}

/* --- Botão de Informação (Azul) --- */
.locamais-button--info {
    background-color: var(--lm-info) !important;
    border-color: var(--lm-info) !important;
    color: white !important;
}
.locamais-button--info:hover {
    background-color: #2b6cb0 !important; /* Variação mais escura de --lm-info */
    border-color: #2b6cb0 !important;
}

/* ========================================================================
 * 3. VARIAÇÕES DE TAMANHO E ESTILO
 * ======================================================================== */

/* --- Botão Pequeno --- */
.locamais-button--small {
    padding: 0.3rem 0.6rem !important;
    height: 32px !important;
    font-size: 0.8rem !important;
}
.locamais-button--small .dashicons {
    font-size: 1em !important;
}
.locamais-button--small .fa-solid,
.locamais-button--small .fa-regular {
    font-size: 0.9em !important;
}


/* --- Botão de Atualizar (Refresh) --- */
.locamais-button--refresh {
    background-color: var(--lm-lighter) !important;
    border: 1px solid var(--lm-border) !important;
    color: var(--lm-secondary) !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8125rem !important;
}
.locamais-button--refresh:hover {
    background-color: #E5E7EB !important;
    border-color: #D1D5DB !important;
    color: var(--lm-dark) !important;
}

/* ========================================================================
 * 4. ESTADOS DO BOTÃO (Disabled, Loading, Active)
 * ======================================================================== */

.locamais-button:disabled,
.locamais-button.is-loading {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: var(--lm-shadow) !important;
}
.locamais-button:disabled:hover::before,
.locamais-button.is-loading:hover::before {
    left: -100%;
}

.locamais-button:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

/* Animação de giro para loading */
@keyframes locamais-spin {
    to { transform: rotate(360deg); }
}
.locamais-button .dashicons.spin {
    animation: locamais-spin 1s linear infinite !important;
}