/**
 * Component that contains all the different options for the carousel
 * @component { slide }
 */
@media all{
    .carousel-slide{
        display: none;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
    
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    
        transform: translate(100%, 0);
        opacity: 0;
    }
    
    input[name="carousel-css"][value="slide-25"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(24),
    input[name="carousel-css"][value="slide-24"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(23),
    input[name="carousel-css"][value="slide-23"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(22),
    input[name="carousel-css"][value="slide-22"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(21),
    input[name="carousel-css"][value="slide-21"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20),
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(1),
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:last-of-type{
        display: flex;
        opacity: 1;
        transform: translate(-100%, 0);
        transition: 0.5s transform, 0.1s z-index 0.4s;
    }
    
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20),
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(21),
    input[name="carousel-css"][value="slide-21"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(22),
    input[name="carousel-css"][value="slide-22"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(23),
    input[name="carousel-css"][value="slide-23"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(24),
    input[name="carousel-css"][value="slide-24"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(25),
    input[name="carousel-css"]:last-of-type:checked ~ .carousel-wrapper .carousel-slide:nth-child(1){
        display: flex;
        opacity: 1;
        transform: translate(100%, 0);
        transition: 0.5s transform, 0.1s z-index 0.4s;
    }
    
    
    /* Actions from the radio buttons */
    
    input[name="carousel-css"][value="slide-1"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(1),
    input[name="carousel-css"][value="slide-2"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(2),
    input[name="carousel-css"][value="slide-3"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(3),
    input[name="carousel-css"][value="slide-4"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(4),
    input[name="carousel-css"][value="slide-5"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(5),
    input[name="carousel-css"][value="slide-6"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(6),
    input[name="carousel-css"][value="slide-7"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(7),
    input[name="carousel-css"][value="slide-8"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(8),
    input[name="carousel-css"][value="slide-9"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(9),
    input[name="carousel-css"][value="slide-10"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(10),
    input[name="carousel-css"][value="slide-11"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(11),
    input[name="carousel-css"][value="slide-12"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(12),
    input[name="carousel-css"][value="slide-13"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(13),
    input[name="carousel-css"][value="slide-14"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(14),
    input[name="carousel-css"][value="slide-15"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(15),
    input[name="carousel-css"][value="slide-16"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(16),
    input[name="carousel-css"][value="slide-17"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(17),
    input[name="carousel-css"][value="slide-18"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(18),
    input[name="carousel-css"][value="slide-19"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(19),
    input[name="carousel-css"][value="slide-20"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(20),
    input[name="carousel-css"][value="slide-21"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(21),
    input[name="carousel-css"][value="slide-22"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(22),
    input[name="carousel-css"][value="slide-23"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(23),
    input[name="carousel-css"][value="slide-24"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(24),
    input[name="carousel-css"][value="slide-25"]:checked ~ .carousel-wrapper .carousel-slide:nth-child(25){
        display: flex;
        transition: 0.5s transform;
        transform: translate(0, 0);
        opacity: 1;
        z-index: 2;
    }
}