@import '../variables';

.ui-grid-column-resizer {
  bottom: 0;
  cursor: col-resize;
  position: absolute;
  top: 0;
  width: 5px;

  &.left {
    left: 0;
  }

  &.right {
    right: 0;
  }
}

// Add a visual border for final column's resizer element
.ui-grid-header-cell:last-child .ui-grid-column-resizer .right {
  border-right: $ui-grid-border;
}


//todo put all rtl stuff in rtl
// Put visual border on left of last header cell when direction is rtl
.ui-grid[dir='rtl']  .ui-grid-header-cell:last-child {
  .ui-grid-column-resizer .right {
    border-right: 0;
  }

  .ui-grid-column-resizer .left {
    border-left: $ui-grid-border;
  }
}

.ui-grid {
  &.column-resizing {
    cursor: col-resize;
  }
}

.ui-grid.column-resizing .ui-grid-resize-overlay {
  background-color: darken($vertical-bar-bg-color, 15%);
  height: 100%;
  position: absolute;
  top: 0;
  width: $grid-border-width;
}