#bookmark_icon{
background:url('/assets/img/bookmark/off.svg') no-repeat center center;
}

#bookmark_icon .on{
background:url('/assets/img/bookmark/on.svg') no-repeat center center;
}


/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#bookmark_icon,
#bookmark_icon.on{
background-size:90%;
}

}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){


}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){


}

/* Desktop View */
@media screen and (min-width: 79.5rem){

}

.bookmark_wrapper{
float:left;
width:1.5rem;
height:2rem;
margin:0 .25rem 0 -.25rem !important;
padding:.25rem 0;
background:none;
}


.btn_bookmark,
.btn_bookmark:hover{
border:none;
}

.btn_bookmark.icon{
float:left;
width:1.5rem !important;
height:1.5rem !important;
margin:0;
padding:0;
}

.btn_bookmark.icon{
background:url('/assets/img/bookmark/btn/icon/off.svg') no-repeat center center !important;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/bookmark/btn/icon/hover.svg') no-repeat center center !important;
}

}

.btn_bookmark.icon.on{
background:url('/assets/img/bookmark/btn/icon/on.svg') no-repeat center center !important;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/bookmark/btn/icon/hover.svg') no-repeat center center !important;
}

}



.btn_bookmark.icon.on.update{
animation: add 250ms ease-out forwards;
background:url('/assets/img/bookmark/btn/icon/on.svg') no-repeat center center !important;
}

.btn_bookmark.del.icon{
background:url('/assets/img/btn/delete/icon/off.svg') no-repeat top left !important;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/btn/delete/icon/on.svg') no-repeat top left !important;
}

}

.btn_bookmark.del.icon.on{
background:url('/assets/img/btn/delete/icon/on.svg') no-repeat top left !important;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/btn/delete/icon/off.svg') no-repeat top left !important;
}

}

.btn_bookmark.del.icon.on.update{
background:url('/assets/img/btn/delete/icon/on.svg') no-repeat top left !important;

&:hover,
&:focus,
&:focus-within{
background:url('/assets/img/btn/delete/icon/on.svg') no-repeat top left !important;
}

}


.btn_bookmark.icon span,
.btn_bookmark.icon strong,
.btn_bookmark.del.icon span,
.btn_bookmark.del.icon strong{
display:none;
}

#bookmark_icon,
#bookmark_icon.on{
background-size:90%;
}

.bookmark_total_wrapper{
float:left;
width:auto;
min-width:1rem;
height:2rem;
margin:0 .25rem 0 0 !important;
padding:.25rem 0;
background:none;
display:flex;
justify-content:flex-start;
align-items:center;

& p{
float:left;
width:100%;
font-size:var(--fs-xs);
color:var(--clr-primary-300);
}

}