/**
 * 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.
 */

/* ===================================
=            Base styles            =
=================================== */

@import '../packages/PaginationToolbar/style/base.scss';
@import '../packages/react-scroll-container-pro/style/base.scss';
@import '../packages/Menu/style/base.scss';
@import '../packages/CheckBox/style/base.scss';
@import '../packages/Calendar/style/base.scss';
@import '../packages/TextInput/style/base.scss';
@import '../packages/ComboBox/style/base.scss';

.InovuaReactDataGrid {
  box-sizing: border-box;
  text-align: start;

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  outline: none;
  z-index: 0;

  .inovua-react-pagination-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .InovuaReactDataGrid-modifier--relative {
    position: relative;
  }

  .inovua-react-virtual-list {
    position: absolute;
    height: 100%;
    box-sizing: content-box; // it's important the virtual-list has box-sizing border-box since it may have some borders
    // but we specify list contents width depending on computed column min widths: eg: 400px - so we want the content inside the header to have 400px
    // therefore we use content-box box-sizing;
  }
}

/* ----------  Main  ---------- */
.InovuaReactDataGrid {
  flex: 1;
  position: relative;
  min-height: 200px;

  div:focus {
    outline: 0;
  }

  &--rtl {
    direction: rtl;
  }
}

/* ----------  Body  ---------- */
.InovuaReactDataGrid__body-scroll-wrapper,
.InovuaReactDataGrid__body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.InovuaReactDataGrid__body {
  overflow: hidden;
  // needed because the column resize proxy has position fixed
  // since it needs to break out of the parent element, and be relative to the body
  transform: translate3d(0, 0, 0);
}

.InovuaReactDataGrid__row-active-borders {
  pointer-events: none;
  z-index: 1;
}

.InovuaReactDataGrid__virtual-list--scrolling {
  // usefull, when you scroll rows don't trigger onMouseOver
  .InovuaReactDataGrid__row {
    pointer-events: none;
  }
  .InovuaReactDataGrid__row {
    contain: strict;
  }
  .InovuaReactDataGrid__row-hover-target {
    // contain: paint layout;
  }
}

/* ----------  Column/Cell Groups  ---------- */
.InovuaReactDataGrid__column-layout {
  position: relative;
  min-width: 100%;
  max-height: 100%;

  &--fixed {
    overflow: hidden;
  }
}

.InovuaReactDataGrid__column-reorder-arrow {
  position: absolute;
  z-index: 1000;
  fill: black;
  display: block;

  &-fill {
    height: 100%;
    flex: 1;
  }
}

.InovuaReactDataGrid__header-wrapper {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  flex-wrap: nowrap;
  // overflow-x: hidden; //TODO was this really needed? we cant leave this here because filters can expand lower (eg - selectfilter, which uses a combobox)
}

.InovuaReactDataGrid__header-wrapper--direction-ltr {
  direction: ltr;
}

.InovuaReactDataGrid__header-wrapper--direction-rtl {
  direction: rtl;
}

.InovuaReactDataGrid__header-wrapper__fill {
  flex: 1;
  position: relative;
  visibility: hidden;
}

.InovuaReactDataGrid--columns-ready .InovuaReactDataGrid__header-wrapper__fill {
  visibility: visible;
}

.InovuaReactDataGrid__header-wrapper__fill__filters {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.InovuaReactDataGrid__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  box-sizing: content-box; // it's important the header has box-sizing border-box since it may have some borders
  // but we specify header width depending on computed column min widths: eg: 400px - so we want the content inside the header to have 400px
  // therefore we use content-box box-sizing;

  &--placeholder {
    position: absolute;
  }
}

.InovuaReactDataGrid__header-layout {
  position: relative;
}

.InovuaReactDataGrid__header-layout__sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

.InovuaReactDataGrid--sticky-header .InovuaReactDataGrid__body {
  overflow: visible;
  contain: paint;
}

.InovuaReactDataGrid__header {
  flex: none;
}

.InovuaReactDataGrid__column-layout__body__inner-wrapper {
  position: relative;
}

/* ----------  Row  ---------- */
.InovuaReactDataGrid__row {
  position: relative;
  overflow: visible;
  z-index: unset;

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &:not(.InovuaReactDataGrid__row--virtualize-columns) {
    &,
    & > .InovuaReactDataGrid__row-cell-wrap {
      display: flex;
      flex-flow: row;
      flex-wrap: nowrap;
      align-items: stretch;
    }
  }

  &--direction-rtl
    > .InovuaReactDataGrid__row-cell-wrap.InovuaReactDataGrid__row-cell-wrap {
    flex-flow: row-reverse;
  }

  &--has-rowspan {
    z-index: 1;
  }
}

.InovuaReactDataGrid__row-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  cursor: ns-resize;

  &.InovuaReactDataGrid__row-resize-handle--mobile {
    height: 10px;
  }
}

.InovuaReactDataGrid__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.InovuaReactDataGrid__cover--active {
  pointer-events: all;
  z-index: 10000;
}

.InovuaReactDataGrid__row-resize-indicator {
  position: absolute;
  top: 0;
  border-bottom: 2px solid transparent;
  cursor: ns-resize;
  left: 0;
  right: 0;
  z-index: 10000;
  pointer-events: none;

  &--active {
    pointer-events: all;
  }

  &--mobile {
    border-bottom: 2px solid transparent;
  }
}

.InovuaReactDataGrid__row-cell-wrap {
  background: inherit;
}

.InovuaReactDataGrid__row--editing {
  z-index: 100;
}

.InovuaReactDataGrid__row__placeholder {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 350px;
  height: 20px;
  background: #eaecef;
}

.InovuaReactDataGrid__resize-overlay {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100000;
  cursor: col-resize;

  &--active {
    opacity: 1;
  }
}

.InovuaReactDataGrid__resize-proxy {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

/* ----------  Cell & Column-header  ---------- */
.InovuaReactDataGrid__box--ellipsis,
.InovuaReactDataGrid__cell__content,
.InovuaReactDataGrid__header-group__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.InovuaReactDataGrid__header-group__title--text-align-start {
  text-align: start;
}

.InovuaReactDataGrid__header-group__title--text-align-end {
  text-align: end;
}

.InovuaReactDataGrid__header-group__title--text-align-left {
  text-align: left;
}

.InovuaReactDataGrid__header-group__title--text-align-right {
  text-align: right;
}

.InovuaReactDataGrid__header-group__title--text-align-center {
  text-align: center;
}

@import './cell-selection.scss';
@import './cell-editors.scss';
@import './cell-filters.scss';
@import './header-menu-tool.scss';

.InovuaReactDataGrid__column-header__resize-wrapper--locked,
.InovuaReactDataGrid__column-header--locked,
.InovuaReactDataGrid__cell--locked {
  // z-index: 1; // so that locked cells come on top while scrolling
}

.InovuaReactDataGrid__column-header--overflow-hidden {
  overflow: hidden;
}

.InovuaReactDataGrid__footer-rows-container {
  position: relative;
  z-index: 10000;
}

.InovuaReactDataGrid__row-details,
.InovuaReactDataGrid__locked-row-group--locked-start,
.InovuaReactDataGrid__footer-row-group--locked-start,
.InovuaReactDataGrid__locked-start-wrapper {
  z-index: 11000;
}

.InovuaReactDataGrid__row-details {
  contain: strict;

  & > .InovuaReactDataGrid {
    height: 100%;
  }
}

.InovuaReactDataGrid__row-details-special-bottom-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.InovuaReactDataGrid__row-details-border,
.InovuaReactDataGrid__row-details-special-bottom-border {
  z-index: 100000;
}

.InovuaReactDataGrid__locked-row-group--end,
.InovuaReactDataGrid__footer-row-group--end,
.InovuaReactDataGrid__locked-end-wrapper {
  z-index: 10100;
}

.InovuaReactDataGrid__row--virtualize-columns
  .InovuaReactDataGrid__locked-end-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

.InovuaReactDataGrid__unlocked-wrapper {
  z-index: 0;
}

.InovuaReactDataGrid__locked-start-wrapper,
.InovuaReactDataGrid__locked-end-wrapper {
  display: flex;
  flex-flow: row;
}

.InovuaReactDataGrid__row-cell-wrap {
  .InovuaReactDataGrid__locked-start-wrapper--direction-rtl,
  .InovuaReactDataGrid__locked-end-wrapper--direction-rtl {
    flex-flow: row-reverse;
  }
}

.InovuaReactDataGrid__column-header__resize-wrapper {
  position: relative;
  display: flex;
  vertical-align: middle;
  flex-flow: column nowrap;
}

.InovuaReactDataGrid__header-group-resizer,
.InovuaReactDataGrid__column-resizer {
  position: absolute;
  z-index: 1000;
  height: 100%;
  top: 0;
  cursor: col-resize;
  right: 0;
}

.InovuaReactDataGrid__column-resizer--direction-rtl {
  right: unset;
}

// make column & column header group resize handles
// visible when hovering over the resizer divs
.InovuaReactDataGrid__column-resizer:hover {
  .InovuaReactDataGrid__column-resize-handle {
    visibility: visible;
  }
}

.InovuaReactDataGrid__column-resizer--active {
  z-index: 4000;
}

.InovuaReactDataGrid__header-group-resizer:hover {
  .InovuaReactDataGrid__header-group-resize-handle {
    visibility: visible;
  }
}

.InovuaReactDataGrid__drag-proxy {
  z-index: 10000 !important;
}

// styling for column & header group resize handles
// their size (width) is given by `columnResizeHandleWidth` prop
.InovuaReactDataGrid__header-group-resize-handle,
.InovuaReactDataGrid__column-resize-handle {
  height: 100%;
  position: relative;
  visibility: hidden;
}

/* ----------  Cell  ---------- */
.InovuaReactDataGrid__column-header {
  display: inline-flex;
  vertical-align: middle;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
  flex: 1; // added when adding filters;
  -ms-flex: 1 1 auto; // -> auto needed for IE 11
  white-space: nowrap;

  &--align-start {
    justify-content: flex-start;
    text-align: start;
  }

  &--align-center {
    justify-content: center;
    text-align: center;
  }

  &--align-end {
    justify-content: flex-end;
    text-align: end;
  }

  &--vertical-align-top,
  &--vertical-align-start {
    align-items: flex-start;
  }

  &--vertical-align-end,
  &--vertical-align-bottom {
    align-items: flex-end;
  }

  &__content {
    flex: 1;
  }

  &__content > * {
    display: inline-block;
  }
}

.InovuaReactDataGrid__footer-row-cell,
.InovuaReactDataGrid__locked-row-cell,
.InovuaReactDataGrid__cell {
  display: inline-flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  flex-wrap: nowrap;
  position: relative;
}

.InovuaReactDataGrid__footer-row-cell,
.InovuaReactDataGrid__locked-row-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.InovuaReactDataGrid__cell {
  &--rowspan {
    background: inherit;
  }
}

.InovuaReactDataGrid__footer-row-cell,
.InovuaReactDataGrid__locked-row-cell,
.InovuaReactDataGrid__column-header,
.InovuaReactDataGrid__cell {
  &--direction-rtl {
    direction: rtl;
  }

  &--user-select-none {
    user-select: none;
    -webkit-user-select: none;
  }

  &--user-select-text {
    user-select: text;
    -webkit-user-select: text;
  }

  &--user-select-all {
    user-select: all;
    -webkit-user-select: all;
  }
}

.InovuaReactDataGrid__cell--stretch {
  align-items: stretch;
}

.InovuaReactDataGrid__nested-cell,
.InovuaReactDataGrid__nested-group-cell {
  flex: 1;
}

.InovuaReactDataGrid__nested-cell
  .InovuaReactDataGrid__nested-group-cell__content,
.InovuaReactDataGrid__nested-group-cell
  .InovuaReactDataGrid__nested-group-cell__content,
.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
  flex: 1;
  width: 0;
  align-self: center;
}

.InovuaReactDataGrid__cell {
  &--align-end,
  &--align-right {
    text-align: end;
  }

  &--align-start,
  &--align-left {
    text-align: start;
  }

  &--align-center {
    text-align: center;
  }

  &--vertical-align-top,
  &--vertical-align-start {
    align-items: flex-start;

    .InovuaReactDataGrid__cell__content {
      align-self: flex-start;
    }
  }

  &--vertical-align-end,
  &--vertical-align-bottom {
    align-items: flex-end;

    .InovuaReactDataGrid__cell__content {
      align-self: flex-end;
    }
  }
}

.InovuaReactDataGrid__sort-icon--hidden {
  visibility: hidden;
}

.InovuaReactDataGrid__column-header__filter-settings {
  flex: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.InovuaReactDataGrid__column-header__filter-settings-icon,
.InovuaReactDataGrid__sort-icon--asc,
.InovuaReactDataGrid__sort-icon--desc {
  display: inline-block;
  vertical-align: middle;
}

/* ----------  Borders  ---------- */
.InovuaReactDataGrid__borders--horizontal {
}

.InovuaReactDataGrid__borders--vertical {
}

/* ----------  Load Mask  ---------- */
.InovuaReactDataGrid__load-mask {
  z-index: 10000;
  overflow: hidden;
  visibility: visible;

  &--hidden {
    visibility: hidden;
  }
}

/* ------- Group Toolbar ----- */
.InovuaReactDataGrid__group-toolbar--direction-rtl {
  direction: rtl;
}

.InovuaReactDataGrid__group-toolbar-item {
  display: inline-block;
  position: relative;

  &--dragging {
    top: 0;
    position: absolute;
  }

  &--dragging.InovuaReactDataGrid__group-toolbar-item--direction-ltr {
    left: 0;
  }

  &--dragging.InovuaReactDataGrid__group-toolbar-item--direction-rtl {
    right: 0;
  }
}

.InovuaReactDataGrid__group-toolbar-item__clear-icon {
  display: inline-block;
  line-height: 0;
}

@import '../packages/Flex/style/index.scss';
@import '../packages/react-virtual-list-pro/style/index.scss';
@import '../packages/PaginationToolbar/style/base.scss';
@import '../packages/LoadMask/style/base.scss';

.InovuaReactDataGrid__column-layout--has-flex {
  .inovua-react-virtual-list__virtual-scroller,
  .inovua-react-virtual-list__row-container {
    min-width: 100%;
  }
}

.InovuaReactDataGrid__unlocked-wrapper {
  display: inline-flex;
  flex-flow: row;
  flex: 1;
}

.InovuaReactDataGrid__group-toolbar-insert-arrow {
  display: inline-block;
  vertical-align: middle;
  width: 3px;
}

.InovuaReactDataGrid__nest-block {
  display: inline-block;
  height: 100%;
}

.react-scroll-container__scrollbar {
  // in order to ensure scrollbar appears on top of zebra rows
  z-index: 10;
}

.InovuaReactDataGrid__header-group {
  display: flex;
  flex-flow: column;
  position: relative;

  &__title {
    &--align-start {
      text-align: start;
    }

    &--align-left {
      text-align: left;
    }

    &--align-center {
      text-align: center;
    }

    &--align-end {
      text-align: end;
    }

    &--align-right {
      text-align: right;
    }
  }
}

.InovuaReactDataGrid__header-group-cells {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  flex: 1;
  -ms-flex: 1 1 auto;
}

.InovuaReactDataGrid__empty-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.InovuaReactDataGrid__loading-wrapper,
.InovuaReactDataGrid__empty-wrapper {
  overflow: auto;
  z-index: 10000;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.InovuaReactDataGrid__empty-wrapper {
  z-index: 1;
}

.InovuaReactDataGrid__column-header--transition,
.InovuaReactDataGrid__cell--transition {
  transition-property: width, min-width, max-width, transform, padding-left,
    padding-right, border-width;
}

.InovuaReactDataGrid__locked-start-wrapper--transition,
.InovuaReactDataGrid__locked-end-wrapper--transition {
  transition-property: width, min-width, transform;
}

.InovuaReactDataGrid__header-group--transition {
  transition-property: width;
}

.InovuaReactDataGrid--virtualize-columns {
  .InovuaReactDataGrid__cell--transition.InovuaReactDataGrid__cell--showing:not(.InovuaReactDataGrid__cell--group-cell) {
    transition-property: transform, padding-left, padding-right, border-width;
  }
}

.InovuaReactDataGrid__cell__node-tool--loading {
  animation: InovuaReactDataGrid__cell__node-tool-rotate 1.4s infinite linear;
  transform: translateZ(0);
  margin-left: 2px;
}

@keyframes InovuaReactDataGrid__cell__node-tool-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.InovuaReactDataGrid__locked-row-group,
.InovuaReactDataGrid__footer-row-group,
.InovuaReactDataGrid__footer-row,
.InovuaReactDataGrid__locked-row {
  display: flex;
  flex-flow: row;
}

.InovuaReactDataGrid__locked-row-group--locked-end {
  position: absolute;
  left: 0px;
}
.InovuaReactDataGrid__footer-row-group--locked-end {
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
}

.InovuaReactDataGrid__footer-row {
  position: relative;
  overflow: visible;

  &--rtl {
    flex-flow: row-reverse;
  }
}

.InovuaReactDataGrid__footer-row-group--rtl {
  flex-flow: row-reverse;
}

.InovuaReactDataGrid__footer-row-cell,
.InovuaReactDataGrid__locked-row-cell {
  position: relative;
}

.InovuaReactDataGrid__portal-host {
  position: absolute;
  top: 0;
  left: 0;

  .inovua-react-toolkit-date-input__overlay {
    z-index: 20000;
  }
}

.InovuaReactDataGrid__row-drag-proxy {
  cursor: grabbing;
  position: absolute;
  z-index: 11000;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  flex-wrap: nowrap;
  user-select: none;
  min-width: 150px;
  padding: 8px;
  border-radius: 2px;
  opacity: 0.85;
  display: inline-flex;
  pointer-events: none;
}

.InovuaReactDataGrid__row-drag-proxy--visible {
  display: inline-flex;
}

.InovuaReactDataGrid__row-drag-proxy--hidden {
  display: none;
}

.InovuaReactDataGrid__cell__editor--date {
  & > .inovua-react-toolkit-date-input {
    height: 100%;
    width: 100%;
  }
}

.InovuaReactDataGrid__cell__editor--number {
  & > .inovua-react-toolkit-numeric-input {
    height: 100%;
    width: 100%;
  }
}

.InovuaReactDataGrid__cell__editor--select > .inovua-react-toolkit-combo-box {
  display: flex;
  flex-flow: row;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}