/**
 * 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} {
  .InovuaReactDataGrid__footer-rows-container {
    border-top: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__locked-row--show-border-bottom {
    &:not(:last-child) {
      border-bottom: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
    }
  }

  .InovuaReactDataGrid__locked-rows-container--position-start {
    .InovuaReactDataGrid__locked-row--last-in-section {
      border-bottom: $INOVUA_DATAGRID_LOCKED_ROW_BORDER_WIDTH solid
        $INOVUA_DATAGRID_LOCKED_ROW_BORDER_COLOR;
    }
  }

  .InovuaReactDataGrid__locked-rows-container--position-end {
    .InovuaReactDataGrid__locked-row--first-in-section {
      border-top: $INOVUA_DATAGRID_LOCKED_ROW_BORDER_WIDTH solid
        $INOVUA_DATAGRID_LOCKED_ROW_BORDER_COLOR;
    }
  }

  .InovuaReactDataGrid__row-resize-indicator--hovered {
    background: $INOVUA_DATAGRID_ACCENT_COLOR;
  }

  .InovuaReactDataGrid__row-resize-indicator--active {
    background: rgba($INOVUA_DATAGRID_ACCENT_COLOR, 0.5);

    &.InovuaReactDataGrid__row-resize-indicator--mobile {
      background: rgba($INOVUA_DATAGRID_ACCENT_COLOR, 0.5);
    }
  }

  .InovuaReactDataGrid__row-resize-indicator--constrained {
    background: $INOVUA_DATAGRID_COLUMN_HEADER_RESIZER_CONSTRAINED_COLOR;

    &.InovuaReactDataGrid__row-resize-indicator--mobile {
      background: $INOVUA_DATAGRID_COLUMN_HEADER_RESIZER_CONSTRAINED_COLOR;
    }
  }

  .InovuaReactDataGrid__row-index-column {
    background: $INOVUA_DATAGRID_ROW_ODD_BG_COLOR;
  }

  .InovuaReactDataGrid__row-resize-handle {
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      content: '';
    }
  }

  .InovuaReactDataGrid__row-details-border {
    border-left: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
  }

  /* ----------  Row proxy  ---------- */

  .InovuaReactDataGrid__row-drag-proxy {
    background: $INOVUA_DATAGRID_PROXY_BG;
    border: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  }

  .InovuaReactDataGrid__row-reorder-arrow {
    pointer-events: none;
    position: absolute;
    height: 3px;
    width: 40px;
    z-index: 99;
  }

  .InovuaReactDataGrid__row-reorder-arrow--valid {
    background: $INOVUA_DATAGRID_ROW_REORDER_VALID_ARROW_BG;
  }

  .InovuaReactDataGrid__row-reorder-arrow--invalid {
    background: $INOVUA_DATAGRID_ROW_REORDER_INVALID_ARROW_BG;
  }

  .InovuaReactDataGrid__row-drag-scrolling-region {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 40px;
    z-index: 100;
    display: none;
  }

  /* ----------  Row  ---------- */
  .InovuaReactDataGrid__row {
    &--scrolling:not(.InovuaReactDataGrid__row--natural-rowheight):not(.InovuaReactDataGrid__row--has-rowspan) {
      // contain: strict !important; // TODO: put this back if we have perf degradation on scrolling
    }

    &--scrolling {
      pointer-events: none;
    }

    .InovuaReactDataGrid__row-details {
      background: $INOVUA_DATAGRID_BG_COLOR;

      &.InovuaReactDataGrid__row-details--details-grid {
        padding: 8px 0;
      }

      & > .InovuaReactDataGrid {
        margin: 0 8px;
        width: auto;
      }

      &.InovuaReactDataGrid__row-details--show-border-bottom
        + .InovuaReactDataGrid__row-details-special-bottom-border {
        border-bottom: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
      }
    }

    .InovuaReactDataGrid__row-details--min-viewport-width,
    .InovuaReactDataGrid__row-details--viewport-width {
      & + .InovuaReactDataGrid__row-details-special-top-border {
        position: absolute;
        width: 100%;
        top: -1px;
        left: 0;
        border-top: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
      }
    }

    &:not(.InovuaReactDataGrid__row--show-vertical-borders) {
      .InovuaReactDataGrid__row-details {
        border-top: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
      }
    }

    &:not(.InovuaReactDataGrid__row--show-horizontal-borders) {
      .InovuaReactDataGrid__row-details
        + .InovuaReactDataGrid__row-details-special-top-border {
        display: none;
      }
    }

    &.InovuaReactDataGrid__row--show-horizontal-borders
      .InovuaReactDataGrid__row-details {
      &.InovuaReactDataGrid__row-details--show-border-bottom {
        .InovuaReactDataGrid__row-details-special-bottom-border {
          border-bottom: 1px solid $INOVUA_DATAGRID_CELL_BORDER_COLOR;
        }
      }

      border-top: 0;
    }

    &.InovuaReactDataGrid__row--selected {
      background: $INOVUA_DATAGRID_ROW_SELECTED_BG_COLOR;
    }

    &--no-zebra,
    &--even {
      background: $INOVUA_DATAGRID_ROW_EVEN_BG_COLOR;

      &.InovuaReactDataGrid__row--selected {
        background: $INOVUA_DATAGRID_ROW_EVEN_SELECTED_BG_COLOR;

        .InovuaReactDataGrid__row-index-column {
          background: $INOVUA_DATAGRID_ROW_EVEN_SELECTED_BG_COLOR;
        }
      }
    }

    &--odd {
      background: $INOVUA_DATAGRID_ROW_ODD_BG_COLOR;

      &.InovuaReactDataGrid__row--selected {
        background: $INOVUA_DATAGRID_ROW_ODD_SELECTED_BG_COLOR;

        .InovuaReactDataGrid__row-index-column {
          background: $INOVUA_DATAGRID_ROW_ODD_SELECTED_BG_COLOR;
        }
      }
    }

    &--active {
      .InovuaReactDataGrid__row-active-borders {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 12000;

        &:before {
          border: $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_WIDTH
            $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_STYLE transparent;
          content: '';
          position: absolute;
          left: 2px;
          right: 2px;
          top: 1px;
          bottom: 1px;
          pointer-events: none;
        }

        &.InovuaReactDataGrid__row-active-borders--has-border-top {
          &:before {
            top: 2px;
          }
        }

        &.InovuaReactDataGrid__row-active-borders--has-border-bottom {
          &:before {
            bottom: 2px;
          }
        }
      }
    }

    &--active,
    &--active.InovuaReactDataGrid__row--odd,
    &--active.InovuaReactDataGrid__row--even {
      .InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-background) {
        color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;
      }
    }

    &--selected {
      background: $INOVUA_DATAGRID_ROW_SELECTED_BG_COLOR;
      color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;
    }
  }

  &.InovuaReactDataGrid--show-hover-rows {
    .InovuaReactDataGrid__locked-row:hover
      .InovuaReactDataGrid__locked-row-cell {
      background: $INOVUA_DATAGRID_ROW_EVEN_HOVER_BG_COLOR;
    }

    .InovuaReactDataGrid__row {
      &--even {
        &:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty)
          .InovuaReactDataGrid__row-hover-target:hover {
          background: $INOVUA_DATAGRID_ROW_EVEN_HOVER_BG_COLOR;
          color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;

          .InovuaReactDataGrid__row-index-column {
            background: $INOVUA_DATAGRID_ROW_EVEN_HOVER_BG_COLOR;
          }

          .InovuaReactDataGrid__cell {
            &--over {
              background: $INOVUA_DATAGRID_ROW_EVEN_AND_COLUMN_HOVER_BG_COLOR;
              color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;
            }
          }
        }

        &:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected
          .InovuaReactDataGrid__row-hover-target:hover {
          background: $INOVUA_DATAGRID_ROW_EVEN_SELECTED_HOVER_BG_COLOR;
          color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;

          .InovuaReactDataGrid__row-index-column {
            background: $INOVUA_DATAGRID_ROW_EVEN_SELECTED_HOVER_BG_COLOR;
          }

          .InovuaReactDataGrid__cell {
            &--over {
              background: $INOVUA_DATAGRID_ROW_EVEN_AND_COLUMN_HOVER_BG_COLOR;
              color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;
            }
          }
        }
      }

      &--no-zebra,
      &--odd {
        &:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty)
          .InovuaReactDataGrid__row-hover-target:hover {
          background: $INOVUA_DATAGRID_ROW_ODD_HOVER_BG_COLOR;
          color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;

          .InovuaReactDataGrid__row-index-column {
            background: $INOVUA_DATAGRID_ROW_ODD_HOVER_BG_COLOR;
          }

          .InovuaReactDataGrid__cell {
            &--over {
              background: $INOVUA_DATAGRID_ROW_ODD_AND_COLUMN_HOVER_BG_COLOR;
              color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;
            }
          }
        }

        &:not(.InovuaReactDataGrid__row--scrolling):not(.InovuaReactDataGrid__row--empty).InovuaReactDataGrid__row--selected
          .InovuaReactDataGrid__row-hover-target:hover {
          background: $INOVUA_DATAGRID_ROW_ODD_SELECTED_HOVER_BG_COLOR;
          color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;

          .InovuaReactDataGrid__row-index-column {
            background: $INOVUA_DATAGRID_ROW_ODD_SELECTED_HOVER_BG_COLOR;
          }

          .InovuaReactDataGrid__cell {
            &--over {
              background: $INOVUA_DATAGRID_ROW_ODD_AND_COLUMN_HOVER_BG_COLOR;
              color: $INOVUA_DATAGRID_ROW_ACTIVE_COLOR;
            }
          }
        }
      }
    }
  }

  &.InovuaReactDataGrid--focused {
    // the z-indexes below are in order for the dotted border
    // to be visible even when cells have a background color
    .InovuaReactDataGrid__row--active {
      &
        > .InovuaReactDataGrid__row-active-borders-wrapper
        > .InovuaReactDataGrid__row-active-borders,
      & > .InovuaReactDataGrid__row-active-borders {
        &:before {
          border: $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_WIDTH
            $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_STYLE
            $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_COLOR;
          z-index: 10;
        }
      }

      & > .InovuaReactDataGrid__row-active-borders-wrapper {
        z-index: 11000;
      }

      &.InovuaReactDataGrid__row--no-locked-start:before {
        border-left: $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_WIDTH
          $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_STYLE
          $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_COLOR;
        z-index: 1;
      }

      &.InovuaReactDataGrid__row--no-locked-end:before {
        border-right: $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_WIDTH
          $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_STYLE
          $INOVUA_DATAGRID_ROW_ACTIVE_BORDER_COLOR;
        z-index: 1;
      }

      &.InovuaReactDataGrid__row--group-row.InovuaReactDataGrid__row--has-locked-start,
      &.InovuaReactDataGrid__row--group-row.InovuaReactDataGrid__row--has-locked-end {
        &
          > .InovuaReactDataGrid__row-active-borders-wrapper
          > .InovuaReactDataGrid__row-active-borders,
        & > .InovuaReactDataGrid__row-active-borders {
          background: inherit;
          z-index: 11000;
        }
      }
    }
  }

  .InovuaReactDataGrid__row-reorder-icon {
    svg {
      fill: $INOVUA_DATAGRID_ICON_FILL;
    }
  }
}