:root{
    --color-scrollbar: #d3d3d4;
    --color-bg-scrollbar: #eee;
}

/* Scroll Chrome */
.content__page::-webkit-scrollbar{
    width: 2.5rem;
    background: transparent;
}

.content__page::-webkit-scrollbar-thumb{
    border: 1rem solid transparent;
    box-shadow: none;
    border-radius: 4rem;
}

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

.content__page:hover::-webkit-scrollbar-thumb:hover{
    border: 0.8rem solid transparent;
    box-shadow: inset 0 0 0 1rem var(--color-secondary);
}

.content__page::-webkit-scrollbar-track{
    background-color: transparent;
    margin: 4rem 0;
}


/*Scroll Moz*/
@-moz-document url-prefix() {
    .content__page{
      scrollbar-width: thin;
      scrollbar-color: var(--color-scrollbar) transparent;
    }
    .layout__aside{
      scrollbar-width: thin;
      scrollbar-color: var(--color-scrollbar) var(--color-secondary);
    }
  }


/* Scroll Chrome para barra lateral*/
.layout__aside::-webkit-scrollbar{
    width: 2.5rem;
    background: var(--color-secondary);
}

.layout__aside::-webkit-scrollbar-thumb{
    border: 1rem solid transparent;
    box-shadow: none;
    border-radius: 4rem;
}

.layout__aside:hover::-webkit-scrollbar-thumb{
    box-shadow: inset 0 0 0 1rem var(--color-principal);
}

.layout__aside:hover::-webkit-scrollbar-thumb:hover{
    border: 0.8rem solid transparent;
    box-shadow: inset 0 0 0 1rem var(--color-principal);
}

.layout__aside::-webkit-scrollbar-track{
    background-color: transparent;
    margin: 4rem 0;
}


/*Scroll Moz*/
@-moz-document url-prefix() {
    .content__page,
    .layout__aside{
      scrollbar-width: thin;
      scrollbar-color: var(--color-scrollbar) transparent;
    }
    
    .layout__aside{
      scrollbar-width: thin;
      scrollbar-color: var(--color-scrollbar) var(--color-secondary);
    }
  }