.axui-datagrid-scroll-bar {
  transition: background-color 300ms linear;
  position: relative;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: $axui-datagrid-scroll-bar-border;
  border-radius: $axui-datagrid-scroll-bar-border-radius;
  width: 100%;
  height: 100%;
  background: $axui-datagrid-scroll-bar-bg-blur;

  &:hover {
    border: $axui-datagrid-scroll-bar-hover-border;
    background: $axui-datagrid-scroll-bar-hover-bg !important;
  }
}

[data-scroll-track='horizontal'] {
  .axui-datagrid-scroll-bar {
    &:before {
      content: '';
      display: block;
      height: 200%;
      width: 100%;
      transform: translateY(-25%);
    }
  }
}

[data-scroll-track='vertical'] {
  .axui-datagrid-scroll-bar {
    &:before {
      content: '';
      display: block;
      height: 100%;
      width: 200%;
      transform: translateX(-25%);
    }
  }
}