/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    MOLÉCULE : WIDGETS RIGHT
    Style des widgets flottants à droite
*/



.molecule_widget-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: var(--gray-900);
    color: var(--c-primary);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    width: 60px;
    height: 60px;
    transition: background-color .4s, color .4s;
}

    /* Hover */
    .molecule_widget-right:hover {
        background-color: var(--c-primary);
        color: var(--white);
    }

    /* First-child */
    .molecule_widget-right:first-child {
        background-color: var(--c-primary);
        color: var(--white);
    }

        /* Hover */
        .molecule_widget-right:first-child:hover {
            background-color: var(--gray-900);
            color: var(--c-primary);
        }