/* Barra personalizada ------------------------ */

.slider-wrapper {
    max-width: 48rem; /* 768px */
    margin: 0 auto;
}

@media screen and (min-width: 64rem) { /* 1024px */
    .slider-wrapper {
        max-width: 80rem; /* 1280px */
    }
}

.slider {
    display: flex;
    overflow-x: scroll; /* Garante a barra de rolagem */
    scroll-snap-type: x mandatory; /* Mantém o efeito de "snap" */
    touch-action: pan-x; /* Ajuda para touch, mesmo com JS */
    cursor: grab;

    /* ----- Regras para exibir e estilizar a barra de rolagem ----- */

    /* Para Firefox: Garante que a barra aparece (não é customizável extensivamente aqui) */
    scrollbar-width: thin; /* 'auto' ou 'thin' */
    scrollbar-color: #5F8B99 #ffffff00; /* Cor do thumb e cor do track */

    /* Para navegadores baseados em Webkit (Chrome, Safari, Edge, Opera) */
    /* Estilo do trilho da barra de rolagem */
    &::-webkit-scrollbar {
        height: 4px; /* Altura da barra de rolagem horizontal */
        background-color: #f1f1f1; /* Cor de fundo do trilho */
        border-radius: 4px; /* Opcional: bordas arredondadas para o trilho */
    }

    /* Estilo do polegar (o "arrastador") da barra de rolagem */
    &::-webkit-scrollbar-thumb {
        background-color: #5F8B99; /* Cor do "arrastador" */
        border-radius: 4px; /* Bordas arredondadas para o arrastador */
        /* Para remover as setas, não use -webkit-scrollbar-button */
    }

    /* Opcional: Estilo ao passar o mouse sobre o arrastador */
    &::-webkit-scrollbar-thumb:hover {
        background-color: #323F47; /* Cor mais escura ao passar o mouse */
    }

    /* REMOVER SETAS DE NAVEGAÇÃO */
    /* Para Webkit, as setas são controladas por ::-webkit-scrollbar-button.
       Basta não definir nenhum estilo para ele ou defini-lo como 'display: none;'. */
    &::-webkit-scrollbar-button {
        display: none; /* Isso remove as setas de navegação */
    }
}

.slider.active {
    cursor: grabbing;
}