@use '../../../../assets/styles/fonts';

.ff-excel-spreadsheet-container {
  display: flex;
  flex-direction: column;

  .ff-excel-toolbar-container {
    background-color: var(--excel-toolbar-bg);
    padding: 4px 8px;
    margin-bottom: 0px !important; // needed to override the margin-bottom of the toolbar
  }

  .ff-excel-spreadsheet {
    --background-color: var(--drawer-footer-bg);
    --text-color: var(--text-color);
    --header-text-color: var(--text-color);
    --outline-color: var(--toggle-strip-active);
    --outline-background-color: var(--overlay-bg);
    --border-color: var(--excel-header-border);
    --header-background-color: var(--excel-header-bg);
    --elevation: var(--brand-color);

    position: relative;
    width: 100%;
    overflow: scroll;
    bottom: 0px;
    background: var(--background-color);
    color: var(--text-color);
    scrollbar-width: none;
    display: inline-block;
  }

  .ff-excel-header-hider {
    position: absolute;
    background-color: var(--excel-header-border);
    z-index: 500;
    left: 0px;
    top: 0px !important;
  }

  .ff-excel-header-extend {
    position: absolute;
    background-color: var(--excel-header-border);
    z-index: 500;
    left: 0px;
    top: 32px !important;
  }

  .ff-excel-header-column-hider {
    height: 32px;
  }

  .ff-excel-header-row-hider {
    width: 60px;
  }

  .ff-spreadsheet-active-cell {
    position: absolute;
    border: 2px solid var(--outline-color);
    box-sizing: border-box;
    z-index: 500;
    outline: none;
  }

  .ff-spreadsheet-active-cell--edit {
    background: var(--background-color);
    box-shadow: var(--elevation);
  }

  .ff-spreadsheet-table {
    overflow: scroll;
    top: 0;
    left: 0;
    margin: 0;
    position: relative;
    &::-webkit-scrollbar {
      height: 0px;
    }
    border-collapse: collapse;
    table-layout: fixed;
  }

  .ff-spreadsheet-cell {
    text-underline-position: under;
    outline: none;
    position: relative;
    z-index: 0;
    scrollbar-width: none;
    overflow-x: auto;
    max-width: 100px;
  }

  .ff-spreadsheet-active-cell .select_dot {
    background-color: var(--elevation);
    height: 10px;
    width: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    right: -5px;
    cursor: crosshair;
    z-index: 1000;
  }

  .ff-spreadsheet-cell,
  .ff-spreadsheet-header {
    border: 0.1px solid var(--border-color);
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-align: left;
    box-sizing: border-box;
    user-select: none;
  }

  .ff-spreadsheet-header {
    background-color: var(--header-background-color);
    color: var(--header-text-color);
    text-align: center;
    z-index: 1000;
    position: sticky;
    top: 0;
    left: 0;

    .drag-column-selector {
      z-index: 10000;
      position: absolute;
      cursor: ew-resize;
      width: 2px;
      height: 100%;
      top: 0;
    }
    .drag-column-left {
      right: 0;
    }
    .drag-column-right {
      left: 0;
    }

    .drag-row-selector {
      z-index: 10000;
      position: absolute;
      cursor: ns-resize;
      height: 2px;
      width: 100%;
      right: 0;
    }
    .drag-row-up {
      top: 0;
    }
    .drag-row-down {
      bottom: 0;
    }
  }

  .ff-spreadsheet-corner-header {
    top: 0px;
    left: 0px;
    position: sticky;
    z-index: 100000;
    border: 2px solid var(--border-color);
  }

  .ff-spreadsheet-row-header {
    height: 32px;
    left: 0;
  }

  .corner-header {
    background-color: var(--header-background-color);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    top: 0px;
    width: 58px;
    height: 30px;
    left: 0px;
  }

  .ff-spreadsheet-header--selected {
    background: var(--brand-color);
    color: var(--tooltip-text-color);
  }

  .ff-spreadsheet-data-viewer,
  .ff-spreadsheet-data-editor textarea {
    box-sizing: border-box;
    z-index: 5;
    white-space: pre-wrap;
  }

  .ff-spreadsheet-data-viewer--dropdownType {
    display: inline-flex;
    align-items: center;
    width: 90%;
    padding: 0px 2px;

    .dropdownType-icon {
      margin-left: auto;
    }
  }

  .ff-spreadsheet-data-viewer--without-fileType {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .ff-spreadsheet-data-viewer--fileType {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .ff-spreadsheet-header {
    box-sizing: border-box;
  }

  .ff-spreadsheet-data-viewer--preserve-breaks {
    white-space: pre-wrap;
  }

  .ff-spreadsheet-data-editor {
    width: 100%;
    height: 100%;
    border: none;
    display: contents;
    outline: none;
  }

  .ff-spreadsheet-cell-textarea {
    text-underline-position: under;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    display: block;
    white-space: pre-wrap !important;
    resize: none;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ff-spreadsheet-data-viewer--boolean {
    text-align: center;
  }

  .ff-spreadsheet-floating-rect {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
  }

  .ff-spreadsheet-floating-rect--hidden {
    display: none;
  }

  .ff-spreadsheet-floating-rect--selected {
    background: var(--outline-background-color);
    border: 2px var(--outline-color) solid;
  }

  .ff-spreadsheet-floating-rect--dragging {
    border: none;
  }

  .ff-spreadsheet-floating-rect--copied {
    border: 2px var(--outline-color) dashed;
  }
}