.scrollbar {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  display: flex;

  &:hover > .scrollbar-track .scrollbar-thumb .scrollbar-thumb-inner {
    opacity: 1;
    transition-delay: 0s;
  }

  .scrollbar-inner {
    position: relative;
    overflow: auto;
    flex: 1;
    -ms-overflow-style: none;  // IE 10+
    /* stylelint-disable */
    scrollbar-width: none; // Firefox

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      background: transparent;
    }
  }

  .scrollbar-track {
    visibility: hidden;
    pointer-events: none;

    &.visible {
      visibility: visible;
      pointer-events: auto;
    }

    .scrollbar-thumb {
      position: absolute;
      padding: 3px;
      cursor: pointer;

      .scrollbar-thumb-inner {
        background-color: rgba(28, 34, 43, 0.6);
        border-radius: 4px;
        opacity: 0;
        transition: opacity 0.2s ease-out 0.5s; // The transition delay is used to keep the thumb visible for a short time when the cursor leaves
      }
    }
  }
}