/* ==UserStyle==
@name           Google Sheets - Active row/column visual aid
@namespace      github.com/acropup/acropup-UserStyle-CSS-Scripts
@homepageURL    https://github.com/acropup/acropup-UserStyle-CSS-Scripts
@version        1.0.6
@description    For any active cell or highlighted range in Google Sheets, the border is extended indefinitely in the form of dashed lines. This makes it easier to see which row/column you are on.
@author         Shane Burgess
==/UserStyle== */
/* Feature list:
    - Extends horizontal and vertical lines from the active cell to help your eye follow the current row.
    - Smoothly animates movement of the active cell.
    - Creates space for more worksheet tabs along the bottom.
    - Adds a "Scroll left" arrow to the left end of the worksheet tabs.
*/
@-moz-document url-prefix("https://docs.google.com/spreadsheets/d/") {
  
  /* --- Active cell border --- */
  .range-border.active-cell-border::before {
    content: '';
    border: 2px dashed rgb(45 165 100);
    float: left;
    position: absolute;
    top: -9999em;
    bottom: -9999em;
    left: -9999em;
    right:-9999em;
    transform: translateZ(-1px); /* Render behind .active-cell-border */
    pointer-events: none;
  }
  .range-border.active-cell-border:nth-child(1)::before /* top */ {
    top: -2px;
  }
  .range-border.active-cell-border:nth-child(2)::before /* bottom */ {
    top: 0px;
  }
  .range-border.active-cell-border:nth-child(3)::before /* right */ {
    left: 0px;
  }
  .range-border.active-cell-border:nth-child(4)::before /* left */ {
    left: -2px;
  }

  /* --- Selected range borders --- */
  
  /* pseudo elements inherit the opacity of their parent, so we need to 
     move .selection's 0.1 opacity to its background-color */
  .selection {
    background-color: rgba(14, 101, 235, 0.1) !important;
    opacity: 1 !important;
  }

  .selection::before, .selection::after {
    content: '';
    box-sizing: border-box;
    border: 2px dashed rgb(45 165 100);;
    float: left;
    position: absolute;
  }

  /* Vertical lines around selected ranges */
  .selection::before {
    left:-1px;
    top: -9999em;
    bottom: -9999em;
    width: calc(100% + 1px);
  }

  /* Horizontal lines around selected ranges */
  .selection::after {
    top: -1px;
    left: -9999em;
    right:-9999em;
    height: calc(100% + 1px);;
  }
  
  /* Smoothly move active cell highlighting */
  /* This is probably too general a selector, but it's not clear how to make it more specific */
  .uberlay > .overlay-container-ltr > div {
    transition: top .2s ease 0s, left .2s ease 0s;
  }
  .range-border.active-cell-border {
    transition: width .2s ease 0s, top .2s ease 0s, left .2s ease 0s;
    /* This 3D transform is a way to keep pseudo elements behind their parents */
    transform-style: preserve-3d;
  }
  /* .range-border.selection-border might also be of use */


  /* --- Spreadsheet Tabs Bar --- */

  /* Reduce tabs horizontal padding */
  .docs-gm .docs-sheet-tab {
    padding: 0 4px 0 8px;
  }
  /* Bottom tabs bar padding around icons */
  .docs-material .docs-sheet-tab-caption .docs-icon {
    margin-right: 3.5px;
  }
  .docs-material .docs-sheet-tab-caption .docs-sheet-lock-container {
    margin-right: 1px;
  }
  .docs-material .docs-sheet-tab-caption .docs-sheet-database-icon-container {
    margin-right: 4px;
  }

  /* Remove margin on left of bottom bar */
  #grid-bottom-bar > tbody > tr:last-child > td:first-child {
    display: none;
  }
  /* Read-only files have no Add Sheet button, but I still want to reserve space for it */
  .docs-sheet-button.docs-sheet-add[aria-hidden=true] {
    visibility: hidden;
    display: unset !important;
  }

  /* Put a 'Move tabs left' arrow on the left side of the bottom bar */
  .docs-gm .docs-sheet-button.docs-sheet-left::before, /* Clickable region */
  .docs-gm .docs-sheet-button.docs-sheet-left::after { /* Triangle icon */
    content: ' ';
    position: fixed;
    left: 63px;
    bottom: 8px;
    width: 21px;
    height: 25px;
  }
  .docs-gm .docs-sheet-button.docs-sheet-left::after { /* Triangle icon */
    bottom: 15px;
    width: 0px;
    height: 0px;
    border: 5.5px solid transparent;
    border-right: 5.5px solid #6a6a6a;
  }
  .docs-sheet-menu-button {
    margin-right: 20px;
  }

  /* Hide the "Explore" button text */
  .waffle-assistant-entry-label {
    display: none;
  }
  
  /* Reduce the space taken by the selected Count/Sum/etc display in the bottom right  */
  .docs-sheet-status-avs {
    margin-right: 0px;
  }
  .docs-gm .docs-sheet-status-avs .goog-flat-menu-button {
    max-width: 125px;
  }

  #grid-bottom-bar > tbody > tr:nth-child(2) > td.docs-sheet-outer-container > div > div.docs-sheet-container.goog-inline-block > div {
    width: calc(100vw - 394px) !important;
  }
  
  /* Bottom left "All Sheets" menu, increase the maximum height available */
  .goog-menu.goog-menu-vertical.docs-menu-attached-button-above:not(.ia-menu.ia-primary-menu) {
    max-height: calc(100vh - 5em);
    height: unset !important;
    top: unset !important;
    bottom: 3em !important;
    padding-right: 5px !important;
  }
}