/* ============================================================================
   ska-button.css
   Sistema de botoes reutilizavel para CS HUB, Project Hub e demais apps SKA.

   Composicao:
      .ska-button
      .ska-button-soft       -> suave/translucido
      .ska-button-solid      -> solido
      .ska-button-gradient   -> gradiente

   Cores:
      .is-blue | .is-green | .is-yellow | .is-orange | .is-red
      .is-purple | .is-cyan | .is-gray | .is-dark

   Estados e utilitarios:
      .is-active | .is-active-soft
      .ska-button-lift | .ska-button-lift-sm
      .ska-button-sm | .ska-button-lg | .ska-button-icon
============================================================================ */

:root {
    --ska-button-radius: .65rem;
    --ska-button-font-size: .82rem;
    --ska-button-font-weight: 600;
    --ska-button-padding-y: .42rem;
    --ska-button-padding-x: .75rem;
    --ska-button-gap: .4rem;
    --ska-button-transition: .16s ease;
}

/* ============================================================================
   Base
============================================================================ */

.ska-button {
    --ska-button-color: #0f78ae;
    --ska-button-color-hover: #0b5f8c;
    --ska-button-color-rgb: 15, 120, 174;
    --ska-button-bg: rgba(var(--ska-button-color-rgb), .09);
    --ska-button-bg-hover: rgba(var(--ska-button-color-rgb), .16);
    --ska-button-bg-active: rgba(var(--ska-button-color-rgb), .22);
    --ska-button-border: rgba(var(--ska-button-color-rgb), .20);
    --ska-button-border-hover: rgba(var(--ska-button-color-rgb), .36);
    --ska-button-gradient-start: var(--ska-button-color);
    --ska-button-gradient-end: var(--ska-button-color-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ska-button-gap);
    min-height: 34px;
    padding: var(--ska-button-padding-y) var(--ska-button-padding-x);
    border: 1px solid var(--ska-button-border);
    border-radius: var(--ska-button-radius) !important;
    background: var(--ska-button-bg);
    color: var(--ska-button-color);
    font-size: var(--ska-button-font-size);
    font-weight: var(--ska-button-font-weight);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: none;
    transition: color var(--ska-button-transition), background-color var(--ska-button-transition), background-position .24s ease, border-color var(--ska-button-transition), box-shadow var(--ska-button-transition), transform var(--ska-button-transition), filter var(--ska-button-transition);
}

    .ska-button:hover,
    .ska-button:focus-visible {
        color: var(--ska-button-color-hover);
        background: var(--ska-button-bg-hover);
        border-color: var(--ska-button-border-hover);
        text-decoration: none;
    }

    .ska-button:active {
        color: var(--ska-button-color-hover);
        background: var(--ska-button-bg-active);
        transform: translateY(0);
    }

    .ska-button:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(var(--ska-button-color-rgb), .20);
    }

    .ska-button:disabled,
    .ska-button.disabled,
    .ska-button[aria-disabled="true"] {
        opacity: .52;
        cursor: not-allowed;
        pointer-events: none;
        transform: none !important;
        box-shadow: none !important;
    }

    .ska-button > i,
    .ska-button > svg {
        flex: 0 0 auto;
        line-height: 1;
    }

/* ============================================================================
   Variantes visuais
============================================================================ */

/* Suave: padrao da biblioteca. Pode ser declarado explicitamente. */
.ska-button-soft {
    color: var(--ska-button-color);
    background: var(--ska-button-bg);
    border-color: var(--ska-button-border);
}

    .ska-button-soft:hover,
    .ska-button-soft:focus-visible {
        color: var(--ska-button-color-hover);
        background: var(--ska-button-bg-hover);
        border-color: var(--ska-button-border-hover);
    }

/* Solido: para salvar, confirmar, criar ou executar. */
.ska-button-solid {
    color: #fff;
    background: var(--ska-button-color);
    border-color: var(--ska-button-color);
}

    .ska-button-solid:hover,
    .ska-button-solid:focus-visible,
    .ska-button-solid:active {
        color: #fff;
        background: var(--ska-button-color-hover);
        border-color: var(--ska-button-color-hover);
    }

/* Gradiente: inicia escuro e termina claro, em 45 graus e sem borda. */
.ska-button-gradient {
    color: #fff;
    border: 0 !important;
    background-image: linear-gradient(45deg, var(--ska-button-gradient-start) 0%, var(--ska-button-gradient-end) 100%);
    background-size: 145% 145%;
    background-position: left bottom;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 11px rgba(var(--ska-button-color-rgb), .22);
}

    .ska-button-gradient:hover,
    .ska-button-gradient:focus-visible {
        color: #fff;
        border: 0 !important;
        background-image: linear-gradient(45deg, var(--ska-button-gradient-start) 0%, var(--ska-button-gradient-end) 100%);
        background-position: right top;
        filter: brightness(1.02) saturate(1.04);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 7px 16px rgba(var(--ska-button-color-rgb), .27);
    }

    .ska-button-gradient:active {
        color: #fff;
        border: 0 !important;
        filter: brightness(.96);
    }

/* Ghost: sem fundo ate o hover. */
.ska-button-ghost {
    background: transparent;
    border-color: transparent;
}

    .ska-button-ghost:hover,
    .ska-button-ghost:focus-visible {
        background: var(--ska-button-bg-hover);
        border-color: var(--ska-button-border);
    }

/* Branco: para cards, toolbars e fundos coloridos. */
.ska-button-white {
    background: #fff;
    border-color: rgba(15, 23, 42, .10);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

    .ska-button-white:hover,
    .ska-button-white:focus-visible {
        background: #f8fafc;
        border-color: var(--ska-button-border-hover);
    }

/* ============================================================================
   Estado selecionado
============================================================================ */

.ska-button.is-active {
    color: #fff;
    background: var(--ska-button-color);
    border-color: var(--ska-button-color);
    box-shadow: 0 4px 10px rgba(var(--ska-button-color-rgb), .20);
}

    .ska-button.is-active:hover,
    .ska-button.is-active:focus-visible,
    .ska-button.is-active:active {
        color: #fff;
        background: var(--ska-button-color-hover);
        border-color: var(--ska-button-color-hover);
    }

    /* Selecionado suave para filtros, tabs e botoes alternaveis. */
    .ska-button.is-active.is-active-soft {
        color: var(--ska-button-color-hover);
        background: var(--ska-button-bg-active);
        border-color: var(--ska-button-border-hover);
        box-shadow: inset 0 0 0 1px var(--ska-button-border), 0 4px 10px rgba(15, 23, 42, .05);
    }

        .ska-button.is-active.is-active-soft:hover,
        .ska-button.is-active.is-active-soft:focus-visible {
            color: var(--ska-button-color-hover);
            background: var(--ska-button-bg-hover);
            border-color: var(--ska-button-border-hover);
            box-shadow: inset 0 0 0 1px var(--ska-button-border-hover), 0 6px 12px rgba(15, 23, 42, .07);
        }

        .ska-button.is-active.is-active-soft:active {
            color: var(--ska-button-color-hover);
            background: var(--ska-button-bg-active);
            border-color: var(--ska-button-border-hover);
        }


/* ============================================================================
   Grupo de tabs / seletores

   Exemplo:
      <div class="ska-button-tabs">
         <button class="ska-button ska-button-sm ska-button-tab is-blue is-active">Manual</button>
         <button class="ska-button ska-button-sm ska-button-tab is-green">Timer</button>
      </div>

   Cada opcao conserva sua propria cor quando inativa. A opcao ativa fica
   mais evidente por fundo, borda e elevacao, sem virar um botao solido.
============================================================================ */

.ska-button-tabs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .22rem;
    max-width: 100%;
    padding: .2rem;
    border: 1px solid #dbe4ee;
    border-radius: .78rem;
    background: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

    .ska-button-tabs .ska-button-tab {
        min-height: 30px;
        border-color: transparent;
        border-radius: .58rem !important;
        background: rgba(var(--ska-button-color-rgb), .09);
        color: var(--ska-button-color);
        box-shadow: none;
        transform: translateY(0);
    }

        .ska-button-tabs .ska-button-tab:hover,
        .ska-button-tabs .ska-button-tab:focus-visible {
            color: var(--ska-button-color-hover);
            background: rgba(var(--ska-button-color-rgb), .14);
            border-color: rgba(var(--ska-button-color-rgb), .18);
            transform: translateY(-1px);
        }

        .ska-button-tabs .ska-button-tab.is-active,
        .ska-button-tabs .ska-button-tab.is-active:hover,
        .ska-button-tabs .ska-button-tab.is-active:focus-visible,
        .ska-button-tabs .ska-button-tab.is-active:active {
            color: var(--ska-button-color-hover);
            background: rgba(var(--ska-button-color-rgb), .22);
            border-color: rgba(var(--ska-button-color-rgb), .46);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .54), 0 5px 13px rgba(var(--ska-button-color-rgb), .18);
            transform: translateY(-1px);
        }

.ska-button-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: .1rem .32rem;
    border-radius: 999px;
    background: rgba(var(--ska-button-color-rgb), .11);
    color: var(--ska-button-color-hover);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1;
}

.ska-button-tab.is-active .ska-button-tab-count {
    background: rgba(255, 255, 255, .68);
    box-shadow: inset 0 0 0 1px rgba(var(--ska-button-color-rgb), .12);
}

/* ============================================================================
   Elevacao opcional
============================================================================ */

.ska-button-lift:hover,
.ska-button-lift:focus-visible {
    transform: translateY(-2px);
}

.ska-button-lift:active {
    transform: translateY(0);
}

.ska-button-lift-sm:hover,
.ska-button-lift-sm:focus-visible {
    transform: translateY(-1px);
}

.ska-button-lift-sm:active {
    transform: translateY(0);
}

/* ============================================================================
   Tamanhos
============================================================================ */

.ska-button-sm {
    min-height: 30px;
    padding: .32rem .58rem;
    font-size: .76rem;
    border-radius: .6rem !important;
}

.ska-button-lg {
    min-height: 42px;
    padding: .58rem 1rem;
    font-size: .9rem;
    border-radius: .75rem !important;
}

.ska-button-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: .65rem !important;
}

    .ska-button-icon.ska-button-sm {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .ska-button-icon.ska-button-lg {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

/* ============================================================================
   Cores
============================================================================ */

.ska-button.is-blue {
    --ska-button-color: #0f78ae;
    --ska-button-color-hover: #0b5f8c;
    --ska-button-color-rgb: 15, 120, 174;
    --ska-button-gradient-start: #075985;
    --ska-button-gradient-end: #1d9bd7;
}

.ska-button.is-green {
    --ska-button-color: #198754;
    --ska-button-color-hover: #146c43;
    --ska-button-color-rgb: 25, 135, 84;
    --ska-button-gradient-start: #146c43;
    --ska-button-gradient-end: #2fbf7f;
}

.ska-button.is-yellow {
    --ska-button-color: #946900;
    --ska-button-color-hover: #765400;
    --ska-button-color-rgb: 255, 193, 7;
    --ska-button-gradient-start: #b58100;
    --ska-button-gradient-end: #ffd24a;
}

    .ska-button.is-yellow.ska-button-solid,
    .ska-button.is-yellow.ska-button-gradient,
    .ska-button.is-yellow.is-active:not(.is-active-soft) {
        color: #212529;
    }

    .ska-button.is-yellow.ska-button-solid {
        color: #212529;
        background: #ffc107;
        border-color: #ffc107;
    }

        .ska-button.is-yellow.ska-button-solid:hover,
        .ska-button.is-yellow.ska-button-solid:focus-visible,
        .ska-button.is-yellow.ska-button-solid:active {
            color: #212529;
            background: #e0a800;
            border-color: #e0a800;
        }

.ska-button.is-orange {
    --ska-button-color: #c45b08;
    --ska-button-color-hover: #984606;
    --ska-button-color-rgb: 253, 126, 20;
    --ska-button-gradient-start: #b94700;
    --ska-button-gradient-end: #ff963f;
}

.ska-button.is-red {
    --ska-button-color: #dc3545;
    --ska-button-color-hover: #b02a37;
    --ska-button-color-rgb: 220, 53, 69;
    --ska-button-gradient-start: #b02a37;
    --ska-button-gradient-end: #ef6673;
}

.ska-button.is-purple {
    --ska-button-color: #6f42c1;
    --ska-button-color-hover: #59359a;
    --ska-button-color-rgb: 111, 66, 193;
    --ska-button-gradient-start: #59359a;
    --ska-button-gradient-end: #9366dd;
}

.ska-button.is-cyan {
    --ska-button-color: #087990;
    --ska-button-color-hover: #055160;
    --ska-button-color-rgb: 13, 202, 240;
    --ska-button-gradient-start: #087990;
    --ska-button-gradient-end: #31dcfa;
}


    .ska-button.is-cyan.ska-button-solid {
        color: #052c35;
        background: #0dcaf0;
        border-color: #0dcaf0;
    }

        .ska-button.is-cyan.ska-button-solid:hover,
        .ska-button.is-cyan.ska-button-solid:focus-visible,
        .ska-button.is-cyan.ska-button-solid:active {
            color: #052c35;
            background: #0aa2c0;
            border-color: #0aa2c0;
        }

.ska-button.is-gray {
    --ska-button-color: #64748b;
    --ska-button-color-hover: #475569;
    --ska-button-color-rgb: 100, 116, 139;
    --ska-button-gradient-start: #475569;
    --ska-button-gradient-end: #8997aa;
}

.ska-button.is-dark {
    --ska-button-color: #1f2937;
    --ska-button-color-hover: #111827;
    --ska-button-color-rgb: 31, 41, 55;
    --ska-button-gradient-start: #111827;
    --ska-button-gradient-end: #4b5563;
}

/* ============================================================================
   Loading
============================================================================ */

.ska-button.is-loading {
    position: relative;
    cursor: progress;
    pointer-events: none;
}

    .ska-button.is-loading > :not(.spinner-border):not(.ska-button-spinner) {
        opacity: .72;
    }

.ska-button-spinner {
    width: .9rem;
    height: .9rem;
    border-width: .12rem;
}

/* ============================================================================
   Movimento reduzido
============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .ska-button,
    .ska-button:hover,
    .ska-button:focus-visible,
    .ska-button:active {
        transition: none !important;
        transform: none !important;
    }
}