@import "../_variables";
@import "../_mixins";

.excel__table {
  position: absolute;
  left: 0;
  right: 0;
  top: $header-height + $toolbar-height + $formula-height;
  overflow: auto;
  font-size: $default-cell-font-size;
  cursor: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Small_arrow_pointing_left.svg/1200px-Small_arrow_pointing_left.svg.png') !important;
  .row{
    display: flex;
    flex-direction: row;
    min-height: $row-height;
  }
  .row-info {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: $info-cell-width;
    border: 1px solid $border-color;
    background: #f8f9fa;
    border-top: 0;
    border-left: 0;
    position: relative;
  }
  .row-data {
    display: flex;
  }
  .column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    min-width: 40px;
    width: $cell-width;
    border: 1px solid $border-color;
    border-top: 0;
    border-left: 0;
  }
  .cell {
    min-width: 40px;
    padding: 5px;
    width: $cell-width;
    height: 100%;
    border: 1px solid #e1e2e3;
    border-top: 0;
    border-left: 0;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    display: flex;
    &:hover:not(.selected) {
      cursor: cell;
    }
    &.selected {
      border: none;
      outline: 2px solid $primary-color;
      z-index: 2;
    }
  }
  .col-resize{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    background: $primary-color;
    opacity: 0;
    z-index: 2;

    &:hover{
      cursor: col-resize;
      opacity: 1 !important;
    }
  }
  .row-resize{
    position: absolute;
    bottom: 0;
    right: 2px;
    left: 0;
    height: 4px;
    opacity: 0;
    background: $primary-color;
    z-index: 2;

    &:hover{
      cursor: row-resize;
      opacity: 1 !important;
    }
  }
  [data-header="row"] {
    cursor: e-resize;
  }
  [data-header="col"] {
    cursor: n-resize;
  }
}