/* rules for webkit browsers */
.custom-scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.custom-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll-container::-webkit-scrollbar-track:hover {
  background: color-mix(
    in srgb,
    var(--mantine-color-body) 80%,
    var(--mantine-color-text) 20%
  );
  border-radius: 8px;
}

.custom-scroll-container::-webkit-scrollbar-thumb {
  background: color-mix(
    in srgb,
    var(--mantine-color-body) 60%,
    var(--mantine-color-text) 40%
  );
  border-radius: 8px;
}

.custom-scroll-container::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in srgb,
    var(--mantine-color-body) 40%,
    var(--mantine-color-text) 60%
  );
}

.custom-scroll-container {
  /* breaks details card column layout in web kit in person details tab. Was reactivated to fix text tile overflow issue, but doesnt seem to be needed anymore, so commented out for now.  */
  /* height: -webkit-fill-available; */
}

/* Firefox doesnt use webkit stuff so this is only applied to FF */
@-moz-document url-prefix() {
  .custom-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
  }
}