/* =========================================================
   BANNERS - VOCABULÁRIO LGP
   ========================================================= */

/* Contentor geral do carrossel */

.lgp-carousel {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}


/* =========================================================
   FAIXA DOS BANNERS
   ========================================================= */

.lgp-banners .mod-banners {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    gap: 20px;

    overflow-x: auto;

    scrollbar-width: thin;

    scroll-behavior: smooth;

    padding: 5px 55px;

    /* Arrastar com o rato */
    cursor: grab;

    /* Impede seleção de texto durante o arrastamento */
    user-select: none;
}


/* =========================================================
   DURANTE O ARRASTAMENTO
   ========================================================= */

.lgp-banners .mod-banners.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}


/* =========================================================
   CADA BANNER
   ========================================================= */

.lgp-banners .banneritem {
    flex: 0 0 200px;
}


/* =========================================================
   IMAGENS
   ========================================================= */

.lgp-banners .banneritem img {
    width: 200px;
    height: 200px;

    object-fit: cover;

    display: block;

    /* Impede seleção da imagem */
    user-select: none;

    /* Impede o arrastamento nativo da imagem */
    -webkit-user-drag: none;
}


/* =========================================================
   SETAS DO CARROSSEL
   ========================================================= */

.lgp-carousel-prev,
.lgp-carousel-next {

    position: absolute;

    /* Centro vertical */
    top: 50%;
    transform: translateY(-50%);

    /* Tamanho das setas */
    width: 48px;
    height: 70px;

    /* Aspeto */
    border: none;
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.45);

    color: white;

    /* Tamanho do símbolo */
    font-size: 58px;

    line-height: 55px;

    /* Centrar o símbolo */
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;

    padding: 0;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   SETA ESQUERDA
   ========================================================= */

.lgp-carousel-prev {
    left: 3px;
}


/* =========================================================
   SETA DIREITA
   ========================================================= */

.lgp-carousel-next {
    right: 3px;
}


/* =========================================================
   EFEITO AO PASSAR O RATO
   ========================================================= */

.lgp-carousel-prev:hover,
.lgp-carousel-next:hover {

    background: rgba(0, 0, 0, 0.70);

    transform: translateY(-50%) scale(1.08);
}


/* =========================================================
   EFEITO AO CLICAR
   ========================================================= */

.lgp-carousel-prev:active,
.lgp-carousel-next:active {

    transform: translateY(-50%) scale(0.95);
}


/* =========================================================
   SMARTPHONE E TABLET
   Esconder as setas
   ========================================================= */

@media (max-width: 1024px) {

    .lgp-carousel-prev,
    .lgp-carousel-next {
        display: none;
    }

}