/**
 * Copyright © INOVUA TRADING.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@import './variables.scss';

$base: 'InovuaReactDataGrid__cell';
$footerCell: 'InovuaReactDataGrid__footer-row-cell';
$lockedRowCell: 'InovuaReactDataGrid__locked-row-cell';

.InovuaReactDataGrid--theme-#{$DATAGRID_THEME_NAME} {
  .InovuaReactDataGrid__cell--show-border-top {
    border-top: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .InovuaReactDataGrid__row--first {
    // and a top border to all cells in the first row in the grid
    // so it doesn't change dimension when collapsing in a groupBy grid
    .#{$base} {
      border-top: 1px solid transparent !important;
    }
  }

  .InovuaReactDataGrid__row--collapsed
    .#{$base}:not(.#{$base}--show-border-bottom) {
    border-bottom: 1px solid transparent;
  }

  .InovuaReactDataGrid__footer-rows-container--show-border-right {
    border-right: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .#{$base}--show-border-top {
    border-top: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .#{$lockedRowCell}--show-border-bottom,
  .#{$footerCell}--show-border-bottom,
  .#{$base}--show-border-bottom {
    border-bottom: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .#{$lockedRowCell}--show-border-left,
  .#{$footerCell}--show-border-left,
  .#{$base}--show-border-left {
    border-left: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .#{$footerCell}--show-border-left.#{$footerCell}--direction-ltr.#{$footerCell}--locked-end:first-child,
  .#{$lockedRowCell}--show-border-left.#{$lockedRowCell}--direction-ltr.#{$lockedRowCell}--locked-end:first-child,
  .#{$base}--show-border-left.#{$base}--direction-ltr.#{$base}--locked-end:first-child {
    &::after {
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      bottom: -1px;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      background: $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
    }
  }

  .#{$footerCell}--show-border-right:not(.#{$footerCell}--last),
  .#{$lockedRowCell}--show-border-right:not(.#{$lockedRowCell}--last),
  .#{$base}--show-border-right:not(.#{$base}--last) {
    border-right: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .#{$base}--show-border-right.#{$base}--direction-rtl.#{$base}--last {
    border-right: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  .#{$footerCell}--show-border-right.#{$footerCell}--direction-rtl.#{$footerCell}--locked-end,
  .#{$lockedRowCell}--show-border-right.#{$lockedRowCell}--direction-rtl.#{$lockedRowCell}--locked-end,
  .#{$base}--show-border-right.#{$base}--direction-rtl.#{$base}--locked-end {
    &.#{$lockedRowCell}--first-in-section,
    &.#{$footerCell}--first-in-section,
    &.#{$base}--first-in-section {
      border-right: none;
    }

    &.#{$footerCell}--last-in-section:not(.#{$footerCell}--first-in-section),
    &.#{$lockedRowCell}--last-in-section:not(.#{$lockedRowCell}--first-in-section),
    &.#{$base}--last-in-section:not(.#{$base}--first-in-section) {
      border-right: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
    }

    &:first-child {
      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: -1px;
        bottom: -1px;
        width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
        border-left: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
        border-right: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
        background: $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      }
    }
  }

  .#{$footerCell}--direction-ltr.#{$footerCell}--show-border-right.#{$footerCell}--locked-start.#{$footerCell}--last-in-section:not(.#{$footerCell}--last),
  .#{$lockedRowCell}--direction-ltr.#{$lockedRowCell}--show-border-right.#{$lockedRowCell}--locked-start.#{$lockedRowCell}--last-in-section:not(.#{$lockedRowCell}--last),
  .#{$base}--direction-ltr.#{$base}--show-border-right.#{$base}--locked-start.#{$base}--last-in-section:not(.#{$base}--last) {
    &::after {
      content: '';
      position: absolute;
      right: -1px;
      top: -1px;
      bottom: -1px;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      background: $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
    }
  }

  .#{$footerCell}--direction-rtl.#{$footerCell}--show-border-left.#{$footerCell}--locked-start.#{$footerCell}--last-in-section:not(.#{$footerCell}--last),
  .#{$lockedRowCell}--direction-rtl.#{$lockedRowCell}--show-border-left.#{$lockedRowCell}--locked-start.#{$lockedRowCell}--last-in-section:not(.#{$lockedRowCell}--last),
  .#{$base}--direction-rtl.#{$base}--show-border-left.#{$base}--locked-start.#{$base}--last-in-section:not(.#{$base}--last) {
    &::after {
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      bottom: -1px;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
      background: $INOVUA_DATAGRID_LOCKED_BORDER_COLOR;
    }
  }

  .#{$footerCell}--show-border-right.#{$footerCell}--last-in-section.#{$footerCell}--locked-start,
  .#{$lockedRowCell}--show-border-right.#{$lockedRowCell}--last-in-section.#{$lockedRowCell}--locked-start,
  .#{$base}--show-border-right.#{$base}--last-in-section.#{$base}--locked-start {
    padding-right: 13px;
  }

  .#{$footerCell}--direction-ltr.#{$footerCell}--show-border-left.#{$footerCell}--first-in-section.#{$footerCell}--locked-end,
  .#{$lockedRowCell}--direction-ltr.#{$lockedRowCell}--show-border-left.#{$lockedRowCell}--first-in-section.#{$lockedRowCell}--locked-end,
  .#{$base}--direction-ltr.#{$base}--show-border-left.#{$base}--first-in-section.#{$base}--locked-end {
    padding-left: 13px;
  }

  .#{$footerCell}--direction-rtl.#{$footerCell}--show-border-right.#{$footerCell}--first-in-section.#{$footerCell}--locked-end,
  .#{$lockedRowCell}--direction-rtl.#{$lockedRowCell}--show-border-right.#{$lockedRowCell}--first-in-section.#{$lockedRowCell}--locked-end,
  .#{$base}--direction-rtl.#{$base}--show-border-left.#{$base}--first-in-section.#{$base}--locked-end {
    padding-right: 13px;
  }

  &.InovuaReactDataGrid--show-border-right.InovuaReactDataGrid--direction-ltr {
    .InovuaReactDataGrid__row-details.InovuaReactDataGrid__row-details--show-border-right:not(.InovuaReactDataGrid__row-details--min-viewport-width),
    .#{$footerCell}--last:not(.#{$base}--hidden),
    .#{$lockedRowCell}--last:not(.#{$base}--hidden),
    .#{$base}--last:not(.#{$base}--hidden) {
      border-right: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
    }
  }

  &.InovuaReactDataGrid--show-border-right.InovuaReactDataGrid--direction-rtl {
    .InovuaReactDataGrid__row-details.InovuaReactDataGrid__row-details--show-border-right:not(.InovuaReactDataGrid__row-details--min-viewport-width),
    .#{$footerCell}--last:not(.#{$base}--hidden),
    .#{$lockedRowCell}--last:not(.#{$base}--hidden),
    .#{$base}--last:not(.#{$base}--hidden) {
      border-left: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
    }
  }

  .#{$base}--hidden {
    border-right: 0;
    border-left: 0;
  }

  // make sure that elements in the very first row do not have any top border
  .InovuaReactDataGrid__row--first {
    .InovuaReactDataGrid__nested-group-cell,
    .InovuaReactDataGrid__nested-cell,
    .InovuaReactDataGrid__nested-block,
    .#{$base}.#{$base} {
      border-top: 0;
    }
  }
}