/* Pra mudar a cor das setas, é só setar um background-color diferente */
.carousel__control::after {
    content: "";
    width: 14px;
    height: 14px;
    display: block;
    background-color: #333;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-image: url("../img/carousel-arrow.svg");
            mask-image: url("../img/carousel-arrow.svg");
}

.carousel__control--forward::after {
    transform: rotate(180deg);
}

.carousel__control {
    z-index: 1;
    width: 48px;
    height: 48px;
    display: flex;
    cursor: pointer;
    font-size: 24px;
    border-radius: 100%;
    align-items: center;
    transition: 0.3s all;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(33, 34, 36, 0.3);
}

.carousel__control:hover {
    transform: scale(1.05);
}

/* Estilos para as páginas do carrossel, aqui faz até 10, se precisar de mais, só adicionar aqui */
.carousel__activator:nth-of-type(1):checked~.carousel__controls:nth-of-type(1),
.carousel__activator:nth-of-type(2):checked~.carousel__controls:nth-of-type(2),
.carousel__activator:nth-of-type(3):checked~.carousel__controls:nth-of-type(3),
.carousel__activator:nth-of-type(4):checked~.carousel__controls:nth-of-type(4),
.carousel__activator:nth-of-type(5):checked~.carousel__controls:nth-of-type(5),
.carousel__activator:nth-of-type(6):checked~.carousel__controls:nth-of-type(6),
.carousel__activator:nth-of-type(7):checked~.carousel__controls:nth-of-type(7),
.carousel__activator:nth-of-type(8):checked~.carousel__controls:nth-of-type(8),
.carousel__activator:nth-of-type(9):checked~.carousel__controls:nth-of-type(9),
.carousel__activator:nth-of-type(10):checked~.carousel__controls:nth-of-type(10) {
    display: flex;
}

/* Estilos para as páginas do carrossel, aqui faz até 10, se precisar de mais, só adicionar aqui */
.carousel__activator:nth-of-type(1):checked~.carousel__screen .carousel__track { transform: translateX(0%); }
.carousel__activator:nth-of-type(2):checked~.carousel__screen .carousel__track { transform: translateX(-100%); }
.carousel__activator:nth-of-type(3):checked~.carousel__screen .carousel__track { transform: translateX(-200%); }
.carousel__activator:nth-of-type(4):checked~.carousel__screen .carousel__track { transform: translateX(-300%); }
.carousel__activator:nth-of-type(5):checked~.carousel__screen .carousel__track { transform: translateX(-400%); }
.carousel__activator:nth-of-type(6):checked~.carousel__screen .carousel__track { transform: translateX(-500%); }
.carousel__activator:nth-of-type(7):checked~.carousel__screen .carousel__track { transform: translateX(-600%); }
.carousel__activator:nth-of-type(8):checked~.carousel__screen .carousel__track { transform: translateX(-700%); }
.carousel__activator:nth-of-type(9):checked~.carousel__screen .carousel__track { transform: translateX(-800%); }
.carousel__activator:nth-of-type(10):checked~.carousel__screen .carousel__track { transform: translateX(-900%); }

/* Aqui ficam os tamanhos das colunas do carrossel, vai até 10 colunas */
.carousel__item--layout-1 { width: 100%; }
.carousel__item--layout-2 { width: 50%; }
.carousel__item--layout-3 { width: 33.333333333333333%; }
.carousel__item--layout-4 { width: 25%; }
.carousel__item--layout-5 { width: 20%; }
.carousel__item--layout-6 { width: 16.666666666666667%; }
.carousel__item--layout-7 { width: 14.285714285714286%; }
.carousel__item--layout-8 { width: 12.5%; }
.carousel__item--layout-9 { width: 11.111111111111111%; }
.carousel__item--layout-10 { width: 10%; }

@keyframes scroll-x {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (max-width: 1023px) {
    .carousel__activator:nth-of-type(n):checked~.carousel__controls:nth-of-type(n) {
        display: none;
    }

    .carousel__activator:nth-of-type(n):checked~.carousel__screen .carousel__track {
        transform: none;
    }

    .carousel__track {
        width: auto;
        overflow-x: auto;
    }

    /* Aqui foram definidos tamanhos genéricos para as colunas, mas dá pra fazer individualmente */
    .carousel__item--layout-1 {
        width: 80%;
    }

    .carousel__item--layout-4,
    .carousel__item--layout-5,
    .carousel__item--layout-6,
    .carousel__item--layout-7,
    .carousel__item--layout-8,
    .carousel__item--layout-9,
    .carousel__item--layout-10 {
        width: 33.333333333333333%;
    }
}

@media (max-width: 500px) {
    /* Aqui foram definidos tamanhos genéricos para as colunas, mas dá pra fazer individualmente */
    .carousel__item--layout-3,
    .carousel__item--layout-4,
    .carousel__item--layout-5,
    .carousel__item--layout-6,
    .carousel__item--layout-7,
    .carousel__item--layout-8,
    .carousel__item--layout-9,
    .carousel__item--layout-10 {
        width: 70%;
    }
}