// Themes
@import '../clinical-lowlight-theme/Scrollbar.module';
@import '../orion-fusion-theme/Scrollbar.module';

:local {
  .container {
    background-color: var(--terra-clinical-data-grid-scrollbar-background-color, #e8e9ea);
    height: var(--terra-clinical-data-grid-scrollbar-height, 10px);
    left: 0;
    overflow: hidden;
    position: relative;
    transition: height 0.1s linear;
    width: 100%;
  }

  .container[aria-hidden] {
    display: none;
  }

  .container.dragging {
    height: var(--terra-clinical-data-grid-scrollbar-hover-height, 14px);
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
    .container:hover {
      height: var(--terra-clinical-data-grid-scrollbar-hover-height, 14px);
    }
  }

  .scrollbar {
    align-items: center;
    display: flex;
    height: 100%;
    padding: 0 3px;
    position: absolute;

    .scrollbar-handle {
      background-color: var(--terra-clinical-data-grid-scrollbar-handle-background-color, #9b9fa1);
      border-radius: var(--terra-clinical-data-grid-scrollbar-handle-border-radius, 25px);
      flex: 0 0 auto;
      height: calc(100% - 2px);
      width: 100%;
    }
  }

  .container.dragging {
    .scrollbar-handle {
      background-color: var(--terra-clinical-data-grid-scrollbar-handle-active-background-color, #868a8c);
    }
  }
}