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

/* Scroll Chrome */
.content__page::-webkit-scrollbar {
  width: 25px;
  background: 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-secundario);
}

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

/* Scroll MOZ */
.content__page {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) transparent;
}

/* Scroll Chrome - Barra Lateral*/
.layout__aside::-webkit-scrollbar {
  width: 25px;
  background: var(--color-secundario);
}

.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-principal);
}

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

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

/* Scroll MOZ */
.layout__aside {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) var(--color-secundario);
}
