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


/* Scroll para chrome para layout-content*/
/* Vamos a modificar el elemento nativo (barra de scroll) del navegador chrome */
/* Aqui unicamente manipulamos la barra de scroll */
.content__page::-webkit-scrollbar{
    width: 25px;
    background-color: transparent;
}

/* thumb es la parte de la barra del scroll que tu puedes mover y clickar */
/* Aqui unicamente manipulamos la parte clickable de la barra de scroll */
.content__page::-webkit-scrollbar-thumb{
    border: 10px solid transparent;/*Esto es para que haya una separacion entre el thumb y el limite de la barra de scroll*/
    box-shadow: none; /*No se le puede aplicar color al thumb, por eso se le aplica una sombra*/
    border-radius: 40px;
}

/* Cuando me posicione encima de algun elemento con la clase content__page, me aplique los siguientes efectos al seleccionable de la barra de scroll */
.content__page:hover::-webkit-scrollbar-thumb{ /*Al hacer esto le aplicamos color al thumb*/
    box-shadow: inset 0 0 0 10px var(--color-secondary);
}

.content__page:hover::-webkit-scrollbar-thumb:hover{ /*Al seleccionar el thumb*/
    border: 8px solid transparent; /*Al hacer el borde mas pequeño, el thumb es mas ancho*/
    box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

/* El track es la cajita que contiene todo el scrollbar desde arriba hacia abajo */
.content__page::-webkit-scrollbar-track{
    background-color: transparent;
    margin: 40px 0; /*Para que la barra de scroll quede mas estetica, y no llegue hasta arriba*/
}





/* Scroll para chrome para el aside*/

.layout__aside::-webkit-scrollbar{
    width: 25px;
    background-color: var(--color-principal);
}

/* thumb es la parte de la barra del scroll que tu puedes mover y clickar */
/* Aqui unicamente manipulamos la parte clickable de la barra de scroll */
.layout__aside::-webkit-scrollbar-thumb{
    border: 10px solid transparent;/*Esto es para que haya una separacion entre el thumb y el limite de la barra de scroll*/
    box-shadow: none; /*No se le puede aplicar color al thumb, por eso se le aplica una sombra*/
    border-radius: 40px;
}

/* Cuando me posicione encima de algun elemento con la clase content__page, me aplique los siguientes efectos al seleccionable de la barra de scroll */
.layout__aside:hover::-webkit-scrollbar-thumb{ /*Al hacer esto le aplicamos color al thumb*/
    box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

.layout__aside:hover::-webkit-scrollbar-thumb:hover{ /*Al seleccionar el thumb*/
    border: 8px solid transparent; /*Al hacer el borde mas pequeño, el thumb es mas ancho*/
    box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

/* El track es la cajita que contiene todo el scrollbar desde arriba hacia abajo */
.layout__aside::-webkit-scrollbar-track{
    background-color: transparent;
    margin: 40px 0; /*Para que la barra de scroll quede mas estetica, y no llegue hasta arriba*/
}