* {
    --color: #9176FF;
    --dark-color: #2b2b2b;
    --dark-icon-color: #fff;
    --light-color: #f7f7f7;
    --light-icon-color: #FFDE59;
}





/* -------------- BUTTON -------------- */
.btn{

    margin-right: .5%;
    margin-bottom: .5%;


    background-color: #fff;
    width: 3.75em;
    height: 2em;
    border-radius: 2.5em;
    padding: 0 0.125em;

    box-shadow: inset 0 2px 15px rgba(0,0,0, .1),
    inset 0 2px 2px rgba(0,0,0, .1),
    inset 0 -1px 1px rgba(0,0,0, .1);

    position: absolute;

    display: flex;
    align-items: center;

    cursor: pointer;
}

.btn__indicator{
    background-color: #fff;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;

    position: absolute;

    box-shadow: 0 2px 10px rgba(0,0,0, .05);

    transition: transform .3s ease;
}

.btn__icon-container{
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.btn__icon{
    color: var(--light-icon-color);
    font-size: .75rem;
}

/* -------------- ANIMATION ------------ */
.btn__icon.animated{
    animation: spin 0.5s;
}

@keyframes spin{
    to {
        transform: rotate(360deg);
    }
}

/* -------------- DARKMODE -------------- */

.darkmode .btn{
    box-shadow: inset 0 2px 15px rgba(0,0,0, .075),
    inset 2px 0 2px rgba(0,0,0, .075),
    inset 0 -1px 1px rgba(0,0,0, .075);
}

.darkmode .btn__indicator{
    transform: translateX(1.75em);
    background-color: var(--dark-color);
    box-shadow: 0 2px 10px rgba(0,0,0, .075);
}

.darkmode .btn__icon{
    color: var(--dark-icon-color);
}