/* ==========================================
   ESTADOS
========================================== */

.states-section{

    width:100%;

    padding:15px 20px;

    background:#18191a;

    border-bottom:1px solid #2f3136;
}

/* ==========================================
   CONTAINER
========================================== */

.states-container{

    display:flex;

    align-items:center;

    gap:10px;

    overflow-x:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;
}

.states-container::-webkit-scrollbar{
    display:none;
}

/* ==========================================
   SIGLAS
========================================== */

.state-item{

    min-width:52px;

    height:38px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:#242526;

    border:1px solid #3a3b3c;

    border-radius:10px;

    color:#b0b3b8;

    font-size:14px;

    font-weight:700;

    transition:.2s ease;
}

.state-item:hover{

    color:#ffffff;

    border-color:#2374e1;

    background:#2b2d31;
}

.state-item.active{

    background:#2374e1;

    border-color:#2374e1;

    color:#ffffff;
}

/* ==========================================
   TABLET
========================================== */

@media(max-width:768px){

    .states-section{

        padding:12px 15px;
    }

    .state-item{

        min-width:48px;

        height:36px;

        font-size:13px;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:576px){

    .states-section{

        padding:10px;
    }

    .states-container{

        gap:8px;
    }

    .state-item{

        min-width:44px;

        height:34px;

        padding:0 12px;

        border-radius:8px;

        font-size:12px;
    }

}