:root{
 --color-scrollbar: #D3D3D4;
 --color-background-scrollbar: #eee;
}

/*SCROLL MOZZILLA*/


/*SCROLL CHROME*/
.content__page::-webkit-scrollbar{
width:25px; /*desaparece el scroll*/
background-color:transparent
}

.content__page::-webkit-scrollbar-thumb{
border: 10px solid transparent;
box-shadow: none;
border-radius: 40px;
}

.content__page:hover::-webkit-scrollbar-thumb{
box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

.content__page:hover::-webkit-scrollbar-thumb:hover{
border:8px solid transparent;
box-shadow: inset 0 0 0 10px var(--color-secondary);
}

.content__page::-webkit-scrollbar-track{
background-color: transparent;
margin: 40px 0;
}


/*SCROLL MOZZILLA*/

/*
.content__page,layout__aside{

scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar) transparent;
}
.layout__aside{
scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar) blue;
}

*/

/*SCROLL CHROME ASIDE*/
.layout__aside::-webkit-scrollbar{
width:25px; /*desaparece el scroll*/
background: var(--color-secondary);
}

.layout__aside::-webkit-scrollbar-thumb{
border: 10px solid transparent;
box-shadow: none;
border-radius: 40px;
}

.layout__aside:hover::-webkit-scrollbar-thumb{
box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

.layout__aside:hover::-webkit-scrollbar-thumb:hover{
border:8px solid transparent;
box-shadow: inset 0 0 0 10px var(--color-primary);
}

.layout__aside::-webkit-scrollbar-track{
background-color: transparent;
margin: 20px 0;
}