/**
 * 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';

.InovuaReactDataGrid--theme-#{$DATAGRID_THEME_NAME} {
  // styles applied to the header of the column group,
  // which contains all column headers in the group
  .InovuaReactDataGrid__header,
  .InovuaReactDataGrid__header-wrapper__fill {
    border-bottom: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__header,
  .InovuaReactDataGrid__header-group,
  .InovuaReactDataGrid__column-header {
    font-weight: $INOVUA_DATAGRID_HEADER_FONT_WEIGHT;
  }

  .InovuaReactDataGrid__header-rtl-scroll-spacer {
    border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__header {
    background: $INOVUA_DATAGRID_HEADER_BG;
  }

  .InovuaReactDataGrid__locked-start-wrapper,
  .InovuaReactDataGrid__locked-end-wrapper {
    background: inherit;
    transition: background; //needed because of a chrome bug that shows up when we have locked start/end columns
    // as the background was not properly inherited when scrolling and updating rows
  }

  .InovuaReactDataGrid__header-group__title {
    border-bottom: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    user-select: none;
    -webkit-user-select: none;

    &.InovuaReactDataGrid__header-group__title--empty {
      border-bottom: 1px solid transparent;
    }
  }

  // cell styles
  .InovuaReactDataGrid__column-header__content {
    font-weight: bold;
  }

  .InovuaReactDataGrid__nested-group-cell,
  .InovuaReactDataGrid__nested-cell,
  .InovuaReactDataGrid__header-group__title,
  .InovuaReactDataGrid__column-header__content,
  .InovuaReactDataGrid__footer-row-cell,
  .InovuaReactDataGrid__locked-row-cell,
  .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-padding) {
    padding: 8px;
  }

  .InovuaReactDataGrid__locked-row-group,
  .InovuaReactDataGrid__footer-row-group {
    background: $INOVUA_DATAGRID_BG_COLOR;
  }
  .InovuaReactDataGrid__footer-row-cell {
    font-weight: $INOVUA_DATAGRID_HEADER_FONT_WEIGHT;
    border-color: $INOVUA_DATAGRID_HEADER_BORDER_COLOR !important;
  }

  .InovuaReactDataGrid__group-toolbar-item,
  .InovuaReactDataGrid__column-header__content {
    .InovuaReactDataGrid__sort-icon-wrapper {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;

      .InovuaReactDataGrid__sort-icon {
        margin-left: 8px;
        margin-right: 8px;
      }

      .InovuaReactDataGrid__sort-icon {
        fill: $INOVUA_DATAGRID_SORT_ICON_FILL_INACTIVE;

        &.InovuaReactDataGrid__sort-icon--asc {
          margin-bottom: 4px;
        }

        &.InovuaReactDataGrid__sort-icon--active {
          fill: $INOVUA_DATAGRID_SORT_ICON_FILL_ACTIVE;
        }
      }
    }
  }

  .InovuaReactDataGrid__column-resizer {
    user-select: none;
    -webkit-user-select: none;
    height: inherit;
    bottom: 0;
  }

  &.InovuaReactDataGrid--filterable {
    .InovuaReactDataGrid__column-resizer {
      bottom: $INOVUA_DATAGRID_FILTER_ROW_HEIGHT;
    }
  }

  .InovuaReactDataGrid__header-group-resize-handle,
  .InovuaReactDataGrid__column-resize-handle {
    background: $INOVUA_DATAGRID_ACCENT_COLOR;
  }

  .InovuaReactDataGrid__resize-proxy {
    width: $INOVUA_DATAGRID_COLUMN_HEADER_RESIZER_VISIBLE_WIDTH;
    background: rgba($INOVUA_DATAGRID_ACCENT_COLOR, 0.5);

    &--constrained {
      background: $INOVUA_DATAGRID_COLUMN_HEADER_RESIZER_CONSTRAINED_COLOR;
    }
  }

  .InovuaReactDataGrid__column-header--locked-start.InovuaReactDataGrid__column-header--last-in-section
    + .InovuaReactDataGrid__column-resizer
    .InovuaReactDataGrid__column-resize-handle {
    right: -1px;
    z-index: 100;
  }

  .InovuaReactDataGrid__column-header,
  .InovuaReactDataGrid__header-wrapper,
  .InovuaReactDataGrid__header-group {
    line-height: 1.6;
  }

  &.InovuaReactDataGrid--direction-rtl {
    .InovuaReactDataGrid__drag-proxy {
      direction: rtl;
    }
  }

  .InovuaReactDataGrid__drag-proxy {
    opacity: 0.7;

    .InovuaReactDataGrid__drag-proxy {
      opacity: 1;
    }
  }

  &.InovuaReactDataGrid--direction-ltr {
    .InovuaReactDataGrid__header-group--dragging {
      border-top: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-bottom: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }
  }

  &.InovuaReactDataGrid--direction-rtl {
    .InovuaReactDataGrid__header-group--dragging {
      border-top: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-bottom: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }
  }

  .InovuaReactDataGrid__column-header--dragging
    .InovuaReactDataGrid__column-header__menu-tool {
    display: none;
  }

  .InovuaReactDataGrid__column-header--dragging.InovuaReactDataGrid__column-header--dragging {
    border: 1px solid $INOVUA_DATAGRID_HEADER_PROXY_BORDER_COLOR;
    cursor: grabbing;
  }

  .InovuaReactDataGrid__column-header__resize-wrapper--show-border-left
    .InovuaReactDataGrid__column-header--dragging.InovuaReactDataGrid__column-header--dragging {
    border-left: none;
  }

  .InovuaReactDataGrid__header-group__title--show-border-left,
  .InovuaReactDataGrid__column-header--show-border-left,
  .InovuaReactDataGrid__column-header__resize-wrapper--show-border-left {
    border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__column-header__resize-wrapper--direction-ltr.InovuaReactDataGrid__column-header__resize-wrapper--locked-start.InovuaReactDataGrid__column-header__resize-wrapper--last-in-section,
  .InovuaReactDataGrid__column-header--direction-ltr.InovuaReactDataGrid__column-header--unresizable.InovuaReactDataGrid__column-header--locked-start.InovuaReactDataGrid__column-header--last-in-section {
    &:after {
      content: '';
      position: absolute;
      right: -$INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      left: unset;
      top: 0;
      bottom: 0;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }

    &.InovuaReactDataGrid__column-header__resize-wrapper--dragging,
    &.InovuaReactDataGrid__column-header--dragging {
      &:after {
        display: none;
      }
    }
  }

  .InovuaReactDataGrid__column-header__resize-wrapper--direction-rtl.InovuaReactDataGrid__column-header__resize-wrapper--locked-start.InovuaReactDataGrid__column-header__resize-wrapper--last-in-section,
  .InovuaReactDataGrid__column-header--direction-rtl.InovuaReactDataGrid__column-header--unresizable.InovuaReactDataGrid__column-header--locked-start.InovuaReactDataGrid__column-header--last-in-section {
    &:after {
      content: '';
      position: absolute;
      left: -$INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      right: unset;
      top: 0;
      bottom: 0;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }

    &.InovuaReactDataGrid__column-header__resize-wrapper--dragging,
    &.InovuaReactDataGrid__column-header--dragging {
      &:after {
        display: none;
      }
    }
  }

  .InovuaReactDataGrid__drag-proxy {
    .InovuaReactDataGrid__header-group__title--show-border-left,
    .InovuaReactDataGrid__column-header--show-border-left,
    .InovuaReactDataGrid__column-header__resize-wrapper--show-border-left {
      z-index: 10;
    }
  }

  .InovuaReactDataGrid__header-group__title {
    border-right: 1px solid transparent;
    font-weight: 700;
  }

  .InovuaReactDataGrid__header-group__title--show-border-right {
    border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__header-group__title--direction-ltr.InovuaReactDataGrid__header-group__title--show-border-right.InovuaReactDataGrid__header-group__title--locked-start {
    border-right: none;
    margin-right: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;

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

  .InovuaReactDataGrid__header-group__title--direction-ltr.InovuaReactDataGrid__header-group__title--show-border-left.InovuaReactDataGrid__header-group__title--locked-end.InovuaReactDataGrid__header-group__title--first-in-section {
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      background: $INOVUA_DATAGRID_LOCKED_ROW_BORDER_COLOR;
    }

    margin-left: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
    border-left: none;
  }

  .InovuaReactDataGrid__header-group__title--direction-rtl.InovuaReactDataGrid__header-group__title--show-border-left.InovuaReactDataGrid__header-group__title--locked-start {
    border-left: none;
    margin-left: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;

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

  .InovuaReactDataGrid__header-group__title--direction-rtl.InovuaReactDataGrid__header-group__title--show-border-right.InovuaReactDataGrid__header-group__title--locked-end.InovuaReactDataGrid__header-group__title--first-in-section {
    &:after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      background: $INOVUA_DATAGRID_LOCKED_ROW_BORDER_COLOR;
    }

    margin-right: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
    border-right: none;
  }

  .InovuaReactDataGrid__drag-proxy {
    .InovuaReactDataGrid__column-header--first-in-section,
    .InovuaReactDataGrid__header-group__title--first-in-section,
    .InovuaReactDataGrid__header-group__title--show-border-left.InovuaReactDataGrid__header-group__title--locked-end.InovuaReactDataGrid__header-group__title--first-in-section {
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }
  }

  .InovuaReactDataGrid__drag-proxy.InovuaReactDataGrid__header-group {
    .InovuaReactDataGrid__header-group__title--show-border-left.InovuaReactDataGrid__header-group__title--locked-end.InovuaReactDataGrid__header-group__title--first-in-section {
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }

    .InovuaReactDataGrid__column-header__resize-wrapper,
    .InovuaReactDataGrid__header-group__title {
      margin-right: 0;
      margin-left: 0;

      &:after {
        display: none;
      }
    }
  }

  &.InovuaReactDataGrid--show-header-border-right {
    &.InovuaReactDataGrid--direction-ltr {
      .InovuaReactDataGrid__header-group__title--last:not(.InovuaReactDataGrid__header-group__title--dragging) {
        border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      }

      .InovuaReactDataGrid__column-header__resize-wrapper--show-border-right
        > .InovuaReactDataGrid__column-header--last:not(.InovuaReactDataGrid__column-header--hidden):not(.InovuaReactDataGrid__drag-proxy) {
        border-right: 0;
      }
    }

    &.InovuaReactDataGrid--direction-rtl {
      .InovuaReactDataGrid__header-group__title--last:not(.InovuaReactDataGrid__header-group__title--dragging) {
        border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      }

      .InovuaReactDataGrid__column-header__resize-wrapper--show-border-right
        > .InovuaReactDataGrid__column-header--last:not(.InovuaReactDataGrid__column-header--hidden):not(.InovuaReactDataGrid__drag-proxy) {
        border-left: 0;
      }

      .InovuaReactDataGrid__column-header.InovuaReactDataGrid__drag-proxy {
        border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
        border-right: 0;
      }
    }
  }

  .InovuaReactDataGrid__column-header__resize-wrapper--show-border-right,
  .InovuaReactDataGrid__column-header--show-border-right {
    border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__column-header.InovuaReactDataGrid__column-header--virtualize-columns.InovuaReactDataGrid__column-header--show-border--left {
    border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  // when the grid has locked start columns
  .InovuaReactDataGrid__locked-start-wrapper--direction-ltr {
    // target the last column header in the group (if column is unresizable)
    .InovuaReactDataGrid__column-header--show-border-right:last-child,
    .InovuaReactDataGrid__column-header__resize-wrapper--show-border-right:last-child,
    .InovuaReactDataGrid__column-header__resize-wrapper:last-child {
      &.InovuaReactDataGrid__column-header--show-border-right:last-child {
        padding-right: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH - 1px;
      }

      border-right: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH solid transparent;

      > .InovuaReactDataGrid__column-header--show-border-right {
        // and make the border 4px double
        &::after {
          content: '';
          position: absolute;
          right: -1px;
          z-index: 1;
          top: -1px;
          bottom: -1px;
          width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
        }
      }
    }
  }

  .InovuaReactDataGrid__locked-start-wrapper--direction-rtl {
    // target the last column header in the group (if column is unresizable)
    .InovuaReactDataGrid__column-header--show-border-left:last-child,
    .InovuaReactDataGrid__column-header__resize-wrapper--show-border-left:last-child,
    .InovuaReactDataGrid__column-header__resize-wrapper:last-child {
      &.InovuaReactDataGrid__column-header--show-border-left:last-child {
        padding-left: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH - 1px;
      }

      border-left: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH solid transparent;

      > .InovuaReactDataGrid__column-header--show-border-right {
        // and make the border 4px double
        &::after {
          content: '';
          position: absolute;
          right: -1px;
          z-index: 1;
          top: -1px;
          bottom: -1px;
          width: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH;
        }
      }
    }
  }

  .InovuaReactDataGrid__locked-end-wrapper--direction-ltr {
    .InovuaReactDataGrid__column-header__resize-wrapper--show-border-left.InovuaReactDataGrid__column-header__resize-wrapper--locked-end.InovuaReactDataGrid__column-header__resize-wrapper--first-in-section,
    .InovuaReactDataGrid__column-header--show-border-left.InovuaReactDataGrid__column-header--locked-end.InovuaReactDataGrid__column-header--first-in-section {
      border-left: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH solid transparent;

      &.InovuaReactDataGrid__column-header__resize-wrapper--dragging {
        border-left: 0;
      }

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

  .InovuaReactDataGrid__locked-end-wrapper--direction-rtl {
    .InovuaReactDataGrid__column-header__resize-wrapper--show-border-right.InovuaReactDataGrid__column-header__resize-wrapper--locked-end.InovuaReactDataGrid__column-header__resize-wrapper--first-in-section,
    .InovuaReactDataGrid__column-header--show-border-right.InovuaReactDataGrid__column-header--locked-end.InovuaReactDataGrid__column-header--first-in-section {
      border-right: $INOVUA_DATAGRID_LOCKED_BORDER_WIDTH - 1 solid transparent;

      &.InovuaReactDataGrid__column-header__resize-wrapper--dragging {
        border-left: 0;
      }

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

  .InovuaReactDataGrid__column-header__resize-wrapper--dragging.InovuaReactDataGrid__drag-proxy {
    &.InovuaReactDataGrid__column-header__resize-wrapper--first-in-section.InovuaReactDataGrid__column-header__resize-wrapper--locked-end {
      border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
    }

    &:after {
      display: none;
    }
  }

  // styles for the header of a single column
  .InovuaReactDataGrid__column-header {
    &--sortable {
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
    }
  }

  .InovuaReactDataGrid__column-reorder-placeholder {
    .InovuaReactDataGrid__header-group__title,
    .InovuaReactDataGrid__column-header {
      background: rgba(
        $INOVUA_DATAGRID_HEADER_BG,
        0.6
      ); // TODO check if it still applies
    }

    .InovuaReactDataGrid__column-header {
      &--dragging {
        background: rgba(
          lighten($INOVUA_DATAGRID_HEADER_BG, 5%),
          0.8
        ); // TODO check if it still applies

        z-index: 1000;
        border-right: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
        border-left: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      }

      &--should-group {
        border-top: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
        border-bottom: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
      }
    }
  }

  .InovuaReactDataGrid__column-reorder-arrow-fill {
    background: $INOVUA_DATAGRID_ACCENT_COLOR;
    position: absolute;
    width: auto;
    height: auto;
    top: 1px;
    bottom: 2px;

    &--direction-ltr {
      left: 2px;
      right: -2px;
    }

    &--direction-rtl {
      right: 2px;
      left: -2px;
    }

    &--target-group {
      top: 0;
      bottom: 1px;
    }
  }

  .InovuaReactDataGrid__column-header--last-in-section.InovuaReactDataGrid__column-header--locked-start {
    .InovuaReactDataGrid__column-header__content {
      padding-right: 13px;
    }
  }

  .InovuaReactDataGrid__column-header__resize-wrapper--locked {
    &:after {
      background: $INOVUA_DATAGRID_LOCKED_ROW_BORDER_COLOR;
    }
  }
}