@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;
  }
  &:hover {
    &::-webkit-scrollbar-thumb {
      background: @navigator-scrollbar-thumb-color-hover;
    }
  }
}

.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();
}

.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;
//     }
//   }
// }