/**
 * 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__group-toolbar--theme-#{$DATAGRID_THEME_NAME} {
  padding: $INOVUA_DATAGRID_GROUP_TOOLBAR_PADDING;
  border-bottom: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  background: $INOVUA_DATAGRID_HEADER_BG;
  fill: $INOVUA_DATAGRID_FILL_ICON;
  min-height: 40px;

  .InovuaReactDataGrid__group-toolbar-insert-arrow {
    background: $INOVUA_DATAGRID_HEADER_COLOR;
    margin: 0 3px;

    &:first-child {
      margin-left: 0;
    }
  }
}

.InovuaReactDataGrid__group-toolbar-item--theme-#{$DATAGRID_THEME_NAME} {
  padding: 8px 9px 8px 9px;
  user-select: none;
  border: 1px solid $INOVUA_DATAGRID_HEADER_BORDER_COLOR;
  background: $INOVUA_DATAGRID_HEADER_BG;
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: grabbing;

  &.InovuaReactDataGrid__group-toolbar-item--sortable {
    cursor: pointer;
  }

  &.InovuaReactDataGrid__group-toolbar-item--dragging {
    opacity: 0.8;
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }

  &:not(.InovuaReactDataGrid__group-toolbar-item--dragging) {
    transition: left 0.2s;
  }

  &.InovuaReactDataGrid__group-toolbar-item--placeholder {
    border: 1px solid transparent;
    opacity: 0.9;
  }

  .InovuaReactDataGrid__group-toolbar-item__clear-icon {
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    user-select: none;

    svg {
      margin-bottom: 2px;
      transform: translateY(0);
      transition: transform 0.2s;
      pointer-events: none;
      stroke: $INOVUA_DATAGRID_FILL_ICON;
    }

    &:active {
      svg {
        transform: translateY(1px);
      }
    }
  }
}

.InovuaReactDataGrid__group-toolbar--direction-ltr {
  .InovuaReactDataGrid__group-toolbar-item--theme-#{$DATAGRID_THEME_NAME}
    + .InovuaReactDataGrid__group-toolbar-item--theme-#{$DATAGRID_THEME_NAME} {
    margin-left: 2px;
  }
}

.InovuaReactDataGrid__group-toolbar--direction-rtl {
  .InovuaReactDataGrid__group-toolbar-item--theme-#{$DATAGRID_THEME_NAME}
    + .InovuaReactDataGrid__group-toolbar-item--theme-#{$DATAGRID_THEME_NAME} {
    margin-right: 2px;
  }
}