/* ----------
 Custom Scrollbar 
 */

/* remove default scrollbar style */
.projects,
#article-about,
#article-contact,
.grid-project-content,
.notice-content {
  scrollbar-color: var(--cc-primary) transparent;
  scrollbar-color: transparent transparent;
  pointer-events: all;
  /* margin: 1em; */
}

/* Custom scrollbar track */
.simplebar-scrollbar::before {
  border-radius: 0;
}

/* Custom scrollbar handle */
.simplebar-scrollbar.simplebar-visible::before {
  background-color: var(--cc-bg);
  background-color: transparent;
  border: 1px solid var(--cc-primary);
}

/* Make the scrollbar always visible */
.simplebar-scrollbar.simplebar-visible {
  visibility: visible;
}

.simplebar-content-wrapper {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
  /* padding: 1em; */
}

.simplebar-content {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

.simplebar-scrollbar::before {
  background-color: none;
  background: none;
}

.simplebar-scrollbar.simplebar-visible::before,
.simplebar-scrollbar::before {
  opacity: 1;
}

.simplebar-track.simplebar-vertical {
  width: 0.75em;

  top: 0px;
  bottom: 0px;
  /* remove small space between container? */
  /* top: -2px;
  bottom: -2px; */

  right: 0;
  /* position in gap between sections? */
  /* right: -1em; */

  background-color: transparent;
}

@media screen and (min-width: 600px) {
  .simplebar-track.simplebar-vertical {
    left: 0;
  }

  #projects .simplebar-track.simplebar-vertical {
    left: unset;
    right: -1.5em;
  }
}

@media screen and (max-width: 600px) {
  .simplebar-track.simplebar-vertical {
    /* right: -2px; */
  }
}
.simplebar-scrollbar:hover::before {
  background-color: var(--cc-bg);
  opacity: 0;
}
.simplebar-scrollbar.simplebar-visible {
  cursor: grab;
}