@import '../variables';

.ui-grid-pinned-container {
  display: inline;
  position: relative;
  top: 0;

  &.ui-grid-pinned-container-left {
    float: left;
  }

  &.ui-grid-pinned-container-right {
    float: right;
    right: 0;
  }

  &.ui-grid-pinned-container-left .ui-grid-header-cell:last-child,
  &.ui-grid-pinned-container-left .ui-grid-cell:last-child {
    box-sizing: border-box;
  }

  &.ui-grid-pinned-container-left .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar,
  .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
    width: $grid-border-width;
  }

  &.ui-grid-pinned-container-left .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar {
    background-color: $headerVerticalBarColor;
  }

  &.ui-grid-pinned-container-left .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
    background-color: darken($vertical-bar-bg-color, 15%);
  }

  &.ui-grid-pinned-container-left .ui-grid-header-cell:last-child .ui-grid-vertical-bar {
    background-color: darken($headerVerticalBarColor, 15%);
    right: -1px; // TODO(c0bra): Should this be grid width? Test column resizing with custom grid border width
    width: $grid-border-width;
  }

  &.ui-grid-pinned-container-right .ui-grid-header-cell:first-child {
    border-left: $grid-border-width solid darken($headerVerticalBarColor, 15%);
    box-sizing: border-box;
  }

  &.ui-grid-pinned-container-right .ui-grid-cell:first-child {
    border-left: $grid-border-width solid darken($vertical-bar-bg-color, 15%);
    box-sizing: border-box;
  }

  &.ui-grid-pinned-container-right .ui-grid-header-cell:not(:first-child) .ui-grid-vertical-bar,
  .ui-grid-cell:not(:first-child) .ui-grid-vertical-bar {
    width: $grid-border-width;
  }

  &.ui-grid-pinned-container-right .ui-grid-header-cell:not(:first-child) .ui-grid-vertical-bar {
    background-color: $headerVerticalBarColor;
  }

  &.ui-grid-pinned-container-right .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
    background-color: darken($vertical-bar-bg-color, 15%);
  }

  &.ui-grid-pinned-container-first .ui-grid-header-cell:first-child .ui-grid-vertical-bar {
    background-color: darken($headerVerticalBarColor, 15%);
    left: -1px; // TODO(c0bra): Should this be grid width? Test column resizing with custom grid border width
    width: $grid-border-width;
  }
}