#carousel-controller {
    display: flex;
    align-items: center;
    gap: 15px;
    position: fixed;
    width: 100dvw;
    left: 0;
    bottom: 0;
    padding-left: 80px;
    padding-bottom: 30px;
    z-index: 50;

    svg {
        cursor: pointer;
        color: #424242;
        transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);

        &:hover {
            color: #fff;
            transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        &[data-active="true"] {
            color: var(--primary);
            transform: scale(1.5);
            transition: all .3s .3s cubic-bezier(0.075, 0.82, 0.165, 1);
        }
    }

    & > svg {
        width: 18px;
        height: 18px;
    }

    & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #424242;
        padding-left: 15px;
        
        & > div {
            display: flex;
            align-items: center;
            justify-content: center;

            & > svg {
                width: 30px;
                height: 30px;
            }
        }
    }
}