/* ==========================================================
   TATAMECONTROLL V1
   COMPONENTE - ABAS
   ========================================================== */

/* Container das abas */
.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
    border-bottom:1px solid var(--line,#2b2b2b);
    padding-bottom:12px;
}

/* Botão */
.tab{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;

    background:transparent;
    border:1px solid var(--line,#2b2b2b);
    border-radius:8px;

    color:var(--txt,#d6d6d6);
    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

/* Hover */
.tab:hover{
    background:rgba(105,212,0,.12);
    border-color:#69d400;
    color:#69d400;
}

/* Aba ativa */
.tab.active{
    background:#69d400;
    color:#111;
    border-color:#69d400;
}

/* Conteúdo */
.tab-content{
    width:100%;
}

/* Painéis */
.tab-pane{
    display:none;
    animation:fadeIn .25s ease;
}

/* Painel ativo */
.tab-pane.active{
    display:block;
}

/* Animação */
@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Responsivo */
@media(max-width:768px){

    .tabs{
        flex-direction:column;
    }

    .tab{
        width:100%;
        justify-content:flex-start;
    }

}