.carousel__botao {
    position: absolute;
    bottom: 0;

    height: calc(100% - 25px);
    width: 30%;

    z-index: 5;

    opacity: 0.3;

    background-color: rgba(0, 0, 0, 0);

    cursor: pointer;

    transition: opacity 0.15s ease-out 0s;
}

.carousel__botao--proximo{
    transform: rotate(180deg);
    right: 0;
}

.carousel__botao--anterior.carousel__botao--active .botao__arrow::before, 
.carousel__botao--anterior.carousel__botao--active .botao__arrow::after,
.carousel__botao--anterior:hover.carousel__botao--active .botao__arrow::before, 
.carousel__botao--anterior:hover.carousel__botao--active .botao__arrow::after  {
    transform: rotate(90deg) scale(0.75);
}
.carousel__botao--anterior.carousel__botao--active .botao__arrow {
    transform: translateX(-55px); 
}

.carousel__botao--proximo.carousel__botao--active .botao__arrow::before, 
.carousel__botao--proximo.carousel__botao--active .botao__arrow::after,
.carousel__botao--proximo:hover.carousel__botao--active .botao__arrow::before, 
.carousel__botao--proximo:hover.carousel__botao--active .botao__arrow::after {
    transform: rotate(90deg) scale(0.75);
}
.carousel__botao--proximo.carousel__botao--active .botao__arrow {
    transform: translateX(-55px); 
}

.botao__arrow {
    position: absolute;
    top: calc(50% - 10px);
    left: 10%;

    height: 20px;
    width: 20px;

    transition: transform 0.2s ease-out 0.2s;
}

.botao__arrow::before, .botao__arrow::after {
    content: '';

    position: absolute;
    left: 0;
    right: auto;

    height: 100%;
    width: 2px;

    transform-origin: 50% 100% 0px;

    background-color: var(--color-white-first);
    opacity: 0.75;

    transition: transform 0.1s ease-out 0s;
}

.botao__arrow::before {
    top: -50%;

    transform: rotate(45deg);
}

.botao__arrow::after {
    top: calc(-50% - 1px);

    transform: rotate(135deg);
}

.carousel__botao:hover {
    opacity: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0px, rgba(0, 0, 0, 0) 100%) repeat scroll 0% 0%
}

.carousel__botao:hover .botao__arrow::before {
    opacity: 1;
    transform: rotate(30deg);
}

.carousel__botao:hover .botao__arrow::after {
    opacity: 1;
    transform: rotate(150deg);
}