:root {
  --color-scrollbar: #D3D3D3;
  --color-background-scrollbar: #eee;
  --scrollbar-width: 25px;
}


/* Common */

.can-scroll {
  overflow-y: auto;
}

.can-scroll::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.can-scroll::-webkit-scrollbar-thumb {
  border: 10px solid var(--color-transparent);
  box-shadow: none;
  border-radius: var(--border-radius-content);
}

.can-scroll::-webkit-scrollbar-track {
  margin-block: 15px
}

.can-scroll:hover::-webkit-scrollbar-thumb:hover {
  border: 8px solid var(--color-transparent);
}

/* Scroll Firefox */
.can-scroll {
  scrollbar-width: thin;
}



/* layout__content */
.layout__content {
  overflow-y: auto;
}

.layout__content::-webkit-scrollbar {
  background-color: var(--color-transparent);
}

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

.content__page {
  scrollbar-color: var(--color-scrollbar) var(--color-transparent)
}



/* Layout aside */
.layout__aside::-webkit-scrollbar {
  background-image:
        linear-gradient(
          to right,
          var(--color-secondary-5),
          var(--color-secondary-6));
}

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

/* Scroll Firefox */
.layout__aside {
  scrollbar-color: var(--color-scrollbar) var(--color-secondary-5)
}

/*
  Show scrollbar when scrolling:
  https://medium.com/frontend-development-with-js/how-to-hide-scrollbar-and-visible-only-scrolling-79cc3472e503
*/