@c8y/style/styles/components/navigation-and-layout/_c8y-scrollbar.less

Styles for Cumulocity IoT applications

@import "../../mixins/_c8y-scrollbar.less";


/**
 * c8y scrolluar - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.navigatorContent,
.c8y-right-drawer {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    transition: all 0.5s ease;
  }
  &::-webkit-scrollbar-track {
    background: @navigator-scrollbar-track-color;
  }
  &::-webkit-scrollbar-thumb {
    background: @navigator-scrollbar-thumb-color;
  }
  scrollbar-width: thin; /* for Firefox */
  scrollbar-color: @navigator-scrollbar-thumb-color transparent;
  transition: scrollbar-color .2s ease;
  &:hover {
    &::-webkit-scrollbar-thumb {
      background: @navigator-scrollbar-thumb-color-hover;
    }
    scrollbar-color: @navigator-scrollbar-thumb-color-hover transparent;
  }
}

.panel.panel-dashboard > .panel-heading + .panel-body,
.panel.panel-dashboard > .panel-heading + .fixed-header + .panel-body,
.modal-inner-scroll-sm,
.modal-inner-scroll,
.card-inner-scroll,
.data-grid__dropdown,
.dropdown-menu-action-bar,
.user-picker-scroll,
.multiselect-item-container,
.c8y-list__group.dropdown-menu,
.selectize-dropdown-content,
.inner-scroll,
.table-data-grid-scroll,
.flex-scroll .flex-content-scroll,
.card--grid__inner-scroll,
.panel-inner-scroll {
  overflow: auto;

  .c8y-scrollbar();

  &.scrollbar-only-on-hover {
    // Force scrollbar space to always be present
    overflow-y: scroll;
    scrollbar-width: thin; // Firefox
    scrollbar-color: transparent transparent; // Firefox - invisible by default

    &::-webkit-scrollbar {
      width: 8px; // Webkit browsers - always reserve space
    }

    // Hide scrollbar thumb when not hovering
    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    &:hover {
      scrollbar-color: @component-scrollbar-thumb-hover transparent; // Firefox

      &::-webkit-scrollbar-thumb {
        background-color: @component-scrollbar-thumb-hover;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-track {
        background-color: @component-scrollbar-track;
      }
    }
  }
}

.table-responsive {
  .c8y-scrollbar();
}

// avoid double scrollbars in dashboard widgets
.card-inner-scroll .card-inner-scroll {
  overflow: visible;
  padding: 0;
  > p {
    padding: 0;
  }
}

/* fix for firefox position sticky bottom bug
 https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
 Note: @-moz-document is not supported in Dart Sass, commented out
*/
// @media (min-width: @screen-md-min) {
//   @-moz-document url-prefix() {
//     .ff-scroll-fix {
//       padding-bottom: 64px !important;
//     }
//   }
// }