/**
 * ==========================================================
 * LATIDOS FAVORITOS
 * Frontend
 * ==========================================================
 */

/* ==========================================
   RESET
========================================== */

.lf-favorite-button{

    all:unset;

    display:flex;

    justify-content:center;

    align-items:center;

    width:42px;

    height:42px;

    cursor:pointer;

    border-radius:50%;

    transition:all .25s ease;

}

/* ==========================================
   ICONO
========================================== */

.lf-icon{

    font-size:26px;

    color:#D5D5D5;

    transition:color .25s ease, transform .25s ease;

}

/**
 * ==========================================================
 * BOTÓN FAVORITOS
 * ==========================================================
 */

.lf-favorite-button{

    all:unset;

    display:flex;

    justify-content:center;

    align-items:center;

    width:42px;

    height:42px;

    cursor:pointer;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    box-shadow:0 4px 14px rgba(0,0,0,.15);

    transition:all .25s ease;

}

.lf-favorite-button:hover{

    transform:scale(1.08);

    background:#ffffff;

}

.lf-icon{

    font-size:22px;

    color:#D7D7D7;

    transition:all .25s ease;

}

.lf-favorite-button.is-favorite .lf-icon{

    color:#8A5A44;

}

.lf-favorite-button:hover .lf-icon{

    transform:scale(1.1);

}

.lf-favorite-button:active{

    transform:scale(.95);

}

/* ==========================================
   HOVER
========================================== */

.lf-favorite-button:hover .lf-icon{

    transform:scale(1.15);

}

/* ==========================================
   CLICK
========================================== */

.lf-favorite-button:active{

    transform:scale(.90);

}

/* ==========================================
   FOCUS
========================================== */

.lf-favorite-button:focus{

    outline:none;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    .lf-favorite-button{

        width:38px;

        height:38px;

    }

    .lf-icon{

        font-size:22px;

    }

}

@media (max-width:480px){

    .lf-favorite-button{

        width:34px;

        height:34px;

    }

    .lf-icon{

        font-size:20px;

    }

}