/* 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%); }