// @import 'scrollbars';

$userColors: (
  0: deeppink,
  1: aqua,
  2: tomato,
  3: orange,
  4: yellow,
  5: limegreen,
);

@mixin highlight() {
  content: "";
  position: absolute;
  z-index: 1;
  background: rgba(30, 144, 255, 0.3);
}

.grid {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  user-select: none;
  // will-change: scroll-position;
  // will-change: scroll-position;
  //   transform: translateZ(0);
  // -webkit-transform: translateZ(0);
  // -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;

  .grid-sorting-wrapper {
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
  }
  .grid-sorting {
    position: absolute;
    z-index: 1000;
    top: 4px;
    right: 4px;
    display: none;
    > div {
      position: absolute;
      z-index: 100;
      right: 0px;
      display: block;
      width: 0;
      height: 0;
      top: 0px;
      // transition: 300ms right;
    }
    &.sorting-asc > div {
      border-style: solid;
      border-width: 0 6px 10.4px 6px;
      border-color: transparent transparent rgb(255, 0, 0) transparent;
    }
    &.sorting-desc > div {
      border-style: solid;
      border-width: 10.4px 6px 0 6px;
      border-color: rgb(255, 0, 0) transparent transparent transparent;
    }
  }
  &.grid.sorting {
    .grid-sorting {
      display: block;
    }
    // &.headings {
    //   .grid-sorting {
    //     > div {
    //       right: -40px;
    //     }
    //   }
    // }
  }

  .grid-edit {
    z-index: 10000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    padding: 0rem;
    background: white;
    border-top: 1px solid #ccc;
    input {
      width: 100% !important;
      font-size: 1.5rem !important;
      padding: 1rem !important;
      border: none !important;
      outline: none !important;
      font-family: Arial, Helvetica, sans-serif;
    }
  }

  .grid-scale {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    transform-origin: 0 0;
  }

  .grid-merge {
    position: fixed;
    top: -100vh;
    left: -100vw;
    z-index: -10;
  }

  &.headings {
    .grid-headings {
      left: 0;
      top: 0;
      color: #000000;
    }

    .grid-selector {
      // left: 40px;
      top: 20px;
    }
    .grid-row.heading {
      display: flex;
    }
    .grid-cell-heading {
      display: flex;
    }
  }

  .grid-scroll {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: scroll;
    overflow-y: scroll;
  }

  .grid-headings {
    position: absolute;
    z-index: 50;
    left: -40px;
    top: -20px;
    bottom: 0;
    right: 0;
    // display: none;
    pointer-events: none;
    transition: 300ms left, 300ms top;
  }

  .grid-headings .grid-container {
    overflow: hidden;
  }

  .grid-box {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    pointer-events: none;
  }
  .grid-freeze-corner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 45;
    transform-origin: 0 0;
    overflow: hidden;
    .grid-cell-heading,
    .grid-cell {
      position: relative;
      left: auto;
    }
  }
  .grid-freeze-columns {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 30;
    transform-origin: 0 0;
    overflow: hidden;
    .grid-cell-heading,
    .grid-cell {
      position: relative;
      left: auto;
    }
  }
  .grid-freeze-rows {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 40;
    transform-origin: 0 0;
    overflow: hidden;
    // .grid-cell-heading,
    // .grid-cell {
    //   position: relative;
    //   left: auto;
    // }
  }
  .grid-heading-row {
    height: 40px;
    z-index: 10000;
  }
  .grid-main {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // bottom: 0;
    // right: 0;
    transform-origin: 0 0;
    // transition: 300ms left, 300ms top;
    overflow: auto;
    &.overflow-x {
      overflow-x: hidden !important;
    }
    &.overflow-y {
      overflow-y: hidden !important;
    }
  }

  .grid-selector-wrapper {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform-origin: 0 0;
    pointer-events: none;
    // transition: 300ms left, 300ms top;
    overflow: hidden;
  }

  .grid-selector-container {
    overflow: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    overflow: hidden;

    .grid-selector-position {
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
    }

    &.grid-selector-main {
      right: 0;
      bottom: 0;
    }

    &.grid-selector-common {
      z-index: 40;
    }

    &.grid-selector-rows {
      right: 0;
      z-index: 30;
    }

    &.grid-selector-columns {
      bottom: 0;
      z-index: 20;
    }
  }

  .grid-selector {
    position: absolute;
    left: 0;
    top: 0;
    // background: rgba(0, 0, 0, 0.25);
    z-index: 25;
    display: none;
    pointer-events: none;
    // transition: 100ms all;
    transform-origin: 0 0;

    &::after {
      content: "";
      position: absolute;
      left: -1px;
      top: -1px;
      right: -2px;
      bottom: -2px;
      box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px grey;
      border: 1px solid gray;
      // background: rgba(0, 0, 0, 0.1);
    }
    &.corner {
      z-index: 50;
    }
    &.row {
      z-index: 40;
    }
    &.col {
      z-index: 30;
    }

    input {
      position: absolute;
      z-index: 200;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      outline: 0px;
      background-color: ivory;
      font-size: 11pt;
      color: black;
      padding: 2px;
      border: none;
      margin: 0;
      box-sizing: border-box;
      line-height: 1;
      pointer-events: all;
    }
  }

  .grid-columns {
    display: none;
    position: absolute;
    z-index: 100;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.2);
  }

  .grid-column-split {
    display: none;
    position: absolute;
    z-index: 110;
    bottom: 0;
    top: 0;
    background: black;
    width: 2px;
  }

  &.sorting-columns {
    .grid-columns,
    .grid-column-split {
      display: block;
    }
  }

  &.selector .grid-selector {
    display: block;
  }

  &.editing {
    .grid-selector {
      background: transparent;
    }
    &.touch {
      .grid-edit {
        display: flex;
      }
    }
  }

  &.focus {
    .grid-selector::after {
      box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #217346;
      border: 1px solid #217346;
    }
  }

  &.touch {
    .grid-main {
      overflow-x: scroll;
      overflow-y: scroll;
      // -webkit-overflow-scrolling: touch;
    }
  }

  &.optimised {
    .grid-container {
    }
    .grid-box {
      z-index: -1;
    }
  }

  .grid-scroller {
    position: absolute;
    z-index: 30;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    overflow: auto;
    right: 0;
    bottom: 0;
  }

  .grid-container {
    position: absolute;
    z-index: 50;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transform-origin: 0 0;
    // will-change: unset;
    // translate: translate3d(0, 0, 0);
  }

  // .grid-main {
  //   z-index: 10;
  //   bottom: 0;
  //   right: 0;
  //   overflow-x: scroll;
  //   overflow-y: scroll;
  //   // overflow: hidden;
  // }

  .grid-common {
    z-index: 40;
    overflow: hidden;
  }

  .grid-rows {
    z-index: 30;
    position: absolute;
    // z-index: 10;
    right: 0;
  }

  // .grid-columns {
  //   z-index: 20;
  //   bottom: 0;
  //   position: absolute;
  //   overflow: hidden;
  // }

  .grid-row {
    position: absolute;
    display: flex;
    transform-origin: 0 0;
    // position: absolute;
    z-index: 10;
    left: 0;
    // left: 0;
    top: 0;
    // width: 100%;
    // transition: 300ms transform;
    pointer-events: all;
    &.hover {
      .grid-cell {
        .grid-background {
          &::after {
            @include highlight();
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
        }
      }
    }
    &.sticky {
      position: sticky;
    }
    &.heading {
      height: 20px;
      display: none;
    }
    &.filter {
      display: none;
    }
  }

  &.hover {
    &.hover-row {
      .grid-row:hover {
        .grid-cell {
          .grid-background {
            &::after {
              @include highlight();
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
    }
    &.hover-cell {
      .grid-cell:hover {
        .grid-background {
          &::after {
            @include highlight();
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
          }
        }
      }
    }
  }
  &.structured {
    .grid-resize-handle {
      display: none;
    }
  }
  &.filters {
    .grid-row {
      &.filter {
        display: flex;
      }
    }
  }

  .grid-cells {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
  }

  .grid-cell {
    transform-origin: 0 0;
    position: absolute;
    z-index: 10;
    background-color: white;
    display: flex;
    flex-shrink: 0;
    font-size: 11pt;
    font-family: sans-serif;
    left: 0;
    top: 0;
    bottom: 0;
    // height: 100%;
    // user-select: none;
    // -webkit-backface-visibility: hidden;
    // -webkit-transform: translateZ(0) scale(1, 1);
    // pointer-events: all;
    // transition: 300ms transform;

    .grid-background {
      position: absolute;
      z-index: 10;
      left: -1px;
      top: -1px;
      bottom: -1px;
      right: -1px;
      pointer-events: none;
      // transition: 100ms background-color;
      background-color: white;
      background-position: center;
      background-repeat: no-repeat;
      // background-size: cover;

      .grid-highlight {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: none;

        &.flash {
          opacity: 0.5;
          display: block;

          &.fade {
            opacity: 0;
            transition: 300ms all;
          }
        }
      }

      .grid-background-border {
        position: absolute;
        z-index: -1;
        left: -0.5px;
        top: -0.5px;
        right: -0.5px;
        bottom: -0.5px;
        border-width: 1px;
        border-style: solid;
      }
    }

    .grid-border {
      pointer-events: none;
      position: absolute;
      z-index: 30;
      left: 0px;
      top: 0px;
      right: -1px;
      bottom: -1px;

      // .grid-border-offset {
      //   position: absolute;
      //   z-index: 10;
      //   // border: 1px solid transparent;
      //   left: 0px;
      //   top: 0px;
      //   right: -1px;
      //   bottom: -1px;
      // }
    }

    .grid-status {
      position: absolute;
      z-index: 30;
      left: 0;
      bottom: 0px;
      top: 0;
      display: flex;
      line-height: 1;
      overflow: hidden;
    }

    .grid-text {
      position: absolute;
      z-index: 20;
      left: 0;
      bottom: 1px;
      top: 0;
      right: 0;
      display: flex;
      line-height: 1;
      letter-spacing: -0.2px;
      overflow: hidden;
      pointer-events: none;
      // text-rendering: optimizeSpeed;

      .number {
        display: flex;
        flex: 1;
      }

      .number .symbol {
        flex: 1;
      }

      > div {
        padding: 2px 3px;

        br {
          // display: none;
        }
      }

      &.grid-checkbox {
        // justify-content: center;
        .checkbox {
          height: 16px;
          width: 16px;
          border-radius: 4px;
          cursor: pointer;
          border: 1px solid rgba(0, 0, 0, 0.2);
          font-size: 0;
          padding: 0;
          margin: 0 2px;
          pointer-events: all;
          position: relative;
          display: flex;
          flex-shrink: 0;
        }
        &.checked {
          .checkbox {
            border-color: rgba(255, 255, 255, 0.15);
            background: dodgerblue;
            background-size: 84%;
            background-position: 50% 0%;
            background-repeat: no-repeat;
            background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiAgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LDIwLjQyTDIuNzksMTQuMjFMNS42MiwxMS4zOEw5LDE0Ljc3TDE4Ljg4LDQuODhMMjEuNzEsNy43MUw5LDIwLjQyWiIgLz48L3N2Zz4=");
          }
        }
        .text {
          display: none;
        }
        &.grid-checkbox-value {
          .text {
            display: block;
          }
        }
      }
      &.grid-button > div {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1;
        left: 2px;
        right: 1px;
        bottom: 1px;
        top: 2px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.2);
        transition: all 300ms;
        overflow: hidden;
        pointer-events: all;

        &:hover {
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
          border: 1px solid rgba(0, 0, 0, 0.4);
        }
      }
      &.link {
        pointer-events: all;
        cursor: pointer;
        > div {
          text-decoration: underline;
        }
      }
    }

    &.image {
      .grid-text {
        display: none;
      }
    }

    &.found::after {
      .grid-background {
        background: rgba(30, 144, 255, 0.3) !important;
      }
    }
    &.selected {
      // .grid-background {
      &::after {
        background: rgba(62, 197, 66, 0.2);
        position: absolute;
        content: "";
        z-index: 11;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      // }
      &.selected-start {
        // &::after {
        //   border: 2px solid rgba(62, 197, 66, 1);
        //   position: absolute;
        //   content: '';
        //   z-index: 50;
        //   left: 0;
        //   top: 0;
        //   bottom: 0;
        //   right: 0;
        // }
        // .grid-background {
        &::after {
          // background: white;
          // background: rgba(62, 197, 66, 0.5);
          // border: 2px solid rgba(62, 197, 66, 1);
        }
        // }
        .grid-text {
          // color: black !important;
        }
      }
    }

    &.map {
      // &::after {
      //   content: "";
      //   position: absolute;
      //   z-index: 10;
      //   // left: 1px;
      //   top: 1px;
      //   right: 0px;
      //   // bottom: 0px;
      //   // border: 1px solid deepskyblue;

      // }
      .grid-map {
        z-index: 35;
        min-width: 16px;
        height: 16px;
        position: absolute;
        right: -4px;
        bottom: -4px;
        margin-top: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background-color: limegreen;
        box-shadow: 0 0 0px 2px white, 0 0 4px 2px rgba(0, 0, 0, 0.5);
        font-size: 11px;
        color: white;
        font-weight: bold;
        pointer-events: none;
        > span {
          display: none;
          padding: 0 3px;
        }
        &.red {
          background-color: red;
        }
        &.orange {
          background-color: orange;
        }
        &.yellow {
          background-color: yellow;
          color: black;
          box-shadow: 0 0 0px 2px black, 0 0 4px 2px rgba(0, 0, 0, 0.5);
        }
        &.green {
          background-color: green;
        }
        &.blue {
          background-color: blue;
        }
        &.purple {
          background-color: purple;
        }
        // &::after {
        //   content: "✓";
        // }
        &.grid-map-value {
          &::after {
            content: "✓";
          }
        }
        &.grid-map-error {
          background-color: dodgerblue;
          &::after {
            content: "!";
          }
          &.red {
            background-color: red;
          }
          &.orange {
            background-color: orange;
          }
          &.yellow {
            background-color: yellow;
            color: black;
          }
          &.green {
            background-color: green;
          }
          &.blue {
            background-color: blue;
          }
          &.purple {
            background-color: purple;
          }
        }
        // &.grid-map-missing {
        //   > span::after {
        //     content: '!';
        //   }
        // }
      }
      &:hover {
        .grid-map {
          // background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIwLjQxLDNDMjEuOCw1LjcxIDIyLjM1LDguODQgMjIsMTJDMjEuOCwxNS4xNiAyMC43LDE4LjI5IDE4LjgzLDIxTDE3LjMsMjBDMTguOTEsMTcuNTcgMTkuODUsMTQuOCAyMCwxMkMyMC4zNCw5LjIgMTkuODksNi40MyAxOC43LDRMMjAuNDEsM001LjE3LDNMNi43LDRDNS4wOSw2LjQzIDQuMTUsOS4yIDQsMTJDMy42NiwxNC44IDQuMTIsMTcuNTcgNS4zLDIwTDMuNjEsMjFDMi4yMSwxOC4yOSAxLjY1LDE1LjE3IDIsMTJDMi4yLDguODQgMy4zLDUuNzEgNS4xNywzTTEyLjA4LDEwLjY4TDE0LjQsNy40NUgxNi45M0wxMy4xNSwxMi40NUwxNS4zNSwxNy4zN0gxMy4wOUwxMS43MSwxNEw5LjI4LDE3LjMzSDYuNzZMMTAuNjYsMTIuMjFMOC41Myw3LjQ1SDEwLjhMMTIuMDgsMTAuNjhaIiAvPjwvc3ZnPg==");
          // background-position: center;
          // background-repeat: no-repeat;
          // background-size: 80%;
          &::after {
            content: "";
          }
          > span {
            display: inline;
          }
          &.grid-map-missing {
            > span::after {
              content: "!";
            }
          }

          // &.grid-map-error {
          //   width: auto;
          //   background-image: none;
          //   min-width: 14px;
          //   padding: 0 2px;
          //   font-size: 11px;
          //   background-color: deepskyblue;
          //   > span {
          //     display: inline;
          //   }
          // }
          // &.grid-map-value {

          // }
        }
      }
    }

    &.history {
      &::after {
        content: "";
        position: absolute;
        z-index: 10;
        left: 1px;
        top: 1px;
        right: 0px;
        bottom: 0px;
        border: 1px solid gray;
      }

      .grid-history {
        display: none;
        position: absolute;
        top: 1px;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: gray;
        z-index: 100;
        cursor: pointer;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyLDIwQTgsOCAwIDAsMCAyMCwxMkE4LDggMCAwLDAgMTIsNEE4LDggMCAwLDAgNCwxMkE4LDggMCAwLDAgMTIsMjBNMTIsMkExMCwxMCAwIDAsMSAyMiwxMkExMCwxMCAwIDAsMSAxMiwyMkM2LjQ3LDIyIDIsMTcuNSAyLDEyQTEwLDEwIDAgMCwxIDEyLDJNMTIuNSw3VjEyLjI1TDE3LDE0LjkyTDE2LjI1LDE2LjE1TDExLDEzVjdIMTIuNVoiIC8+PC9zdmc+");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 80%;
        color: white;
      }

      // 'aqua', 'tomato', 'orange', 'yellow', 'limegreen'
      // &.user-0 {
      //     &::after {
      //         border-color: deeppink;
      //     }

      //     .grid-history {
      //         background-color: deeppink;
      //     }
      // }

      @each $id, $color in $userColors {
        &.user-#{$id} {
          &::after {
            border-color: $color;
          }

          .grid-history {
            background-color: $color;
          }
        }
      }

      &:hover .grid-history {
        display: block;
      }
    }
    &.permission-no::after {
      content: "";
      position: absolute;
      z-index: 100;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM5RENGRjgxNjM2MzExRTg4OUQ4OEYwNkI4MjU3NkQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM5RENGRjgyNjM2MzExRTg4OUQ4OEYwNkI4MjU3NkQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzlEQ0ZGN0Y2MzYzMTFFODg5RDg4RjA2QjgyNTc2RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzlEQ0ZGODA2MzYzMTFFODg5RDg4RjA2QjgyNTc2RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Y6xvnAAAAIklEQVR42mJgYGBwAGKG////gzEMOMAFkGTAKtGVOgAEGABZtRjp+304JgAAAABJRU5ErkJggg==");
    }
    &.cell-dark.permission-no::after {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBDRDk5QTUwNjM2MzExRTg5RDA0ODExMkVCNTRBOEE4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBDRDk5QTUxNjM2MzExRTg5RDA0ODExMkVCNTRBOEE4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MENEOTlBNEU2MzYzMTFFODlEMDQ4MTEyRUI1NEE4QTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MENEOTlBNEY2MzYzMTFFODlEMDQ4MTEyRUI1NEE4QTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79VCh4AAAAIElEQVR42mL4//+/AxAzwDCM4YAuABdkBIsigANAgAEAU/Yn27yuc7UAAAAASUVORK5CYII=");
    }
    &.cell-found {
      .grid-background {
        .grid-highlight {
          background: rgba(30, 144, 255, 0.3);
        }
        &::after {
          @include highlight();
          left: 2px;
          top: 2px;
          right: 1px;
          bottom: 1px;
          border: 1px solid dodgerblue;
        }
      }
    }
    &.sticky {
      // position: sticky;
    }
    &.filter {
      align-items: center !important;
      border-bottom: 1px solid;
      input {
        width: 100%;
        border: none;
        font-size: 13px;
        padding: 0px 4px;
        margin: 0 0 0 2px;
        border: none;
        height: 20px;
        pointer-events: all;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
      }
      .text {
        display: none;
      }
      .filters {
        background: white;
        height: 16px;
        width: 16px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.2);
        font-size: 0;
        padding: 0;
        margin: 0 1px;
        pointer-events: all;
        position: relative;
        display: flex;
        flex-shrink: 0;
        // background: dodgerblue;
        background-size: 84%;
        background-position: 50% 30%;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiAgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNCwxMlYxOS44OEMxNC4wNCwyMC4xOCAxMy45NCwyMC41IDEzLjcxLDIwLjcxQzEzLjMyLDIxLjEgMTIuNjksMjEuMSAxMi4zLDIwLjcxTDEwLjI5LDE4LjdDMTAuMDYsMTguNDcgOS45NiwxOC4xNiAxMCwxNy44N1YxMkg5Ljk3TDQuMjEsNC42MkMzLjg3LDQuMTkgMy45NSwzLjU2IDQuMzgsMy4yMkM0LjU3LDMuMDggNC43OCwzIDUsM1YzSDE5VjNDMTkuMjIsMyAxOS40MywzLjA4IDE5LjYyLDMuMjJDMjAuMDUsMy41NiAyMC4xMyw0LjE5IDE5Ljc5LDQuNjJMMTQuMDMsMTJIMTRaIiAvPjwvc3ZnPg==");
      }
      &.grid-filter-noinput {
        .text {
          display: inherit;
        }
        input {
          display: none;
        }
        .filters {
          position: absolute;
          z-index: 10;
          right: 4px;
          top: 4px;
        }
      }
    }
  }

  &.hide-link-underlines {
    .grid-cell {
      .grid-text {
        &.link {
          > div {
            text-decoration: none;
          }
        }
      }
    }
  }

  &.gridlines .grid-cell::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 25;
    left: 0px;
    top: 0px;
    right: -1px;
    bottom: -1px;
    border-right: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
  }

  .grid-cell-heading {
    background: white;
    color: black;
    display: flex;
    align-items: center;
    font-size: 9px;
    justify-content: center;
    transform-origin: 0 0;
    position: absolute;
    z-index: 10;
    display: flex;
    font-family: sans-serif;
    top: 0;
    user-select: none;
    // width: 40px;
    pointer-events: all;
    // transition: 300ms transform;
    // overflow: hidden;
    height: 100%;
    flex-shrink: 0;
    display: none;

    &.grid-cell-heading-corner {
      width: 40px;
      height: 20px;
      // position: sticky;
      // left: 0;
    }
    &.grid-cell-heading-col {
      height: 20px;
      &.selected {
        cursor: w-resize;
      }
    }
    &.grid-cell-heading-row {
      width: 40px;
      // position: sticky;
      // left: 0;
    }

    &.grid-cell-heading-corner::after {
      border-right-width: 1px;
      border-bottom-width: 1px;
      bottom: -1px;
      right: -1px;
    }

    &.selected:hover,
    &:hover {
      background: #9fd5b7;
      color: #1b5d39;
    }

    &.selected {
      background: #dfe5e6;
    }

    &.grid-cell-heading-row.selected::after {
      border-right: 2px solid #217346;
    }

    &.grid-cell-heading-col.selected::after {
      border-bottom: 2px solid #217346;
    }

    &::after {
      content: "";
      border-style: solid;
      border-color: #cccccc;
      border-width: 0;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }

    &.grid-cell-heading-row::after {
      border-bottom-width: 1px;
      border-right-width: 1px;
      right: -1px;
      bottom: -1px;
    }

    &.grid-cell-heading-col::after {
      border-bottom-width: 1px;
      border-right-width: 1px;
      // border-top-color: transparent;
      // border-left-color: transparent;
      bottom: -1px;
      right: -1px;
    }

    .grid-resize-handle {
      position: absolute;
      z-index: 10;
      background: #1e90ff;
      // transition: 150ms all;
      opacity: 0;
    }

    .grid-resize-handle:hover {
      opacity: 1;
    }

    &.grid-cell-heading-col .grid-resize-handle {
      top: 0;
      right: 0px;
      width: 8px;
      bottom: 0;
      cursor: col-resize;
    }

    &.grid-cell-heading-row .grid-resize-handle {
      left: 0;
      right: 0;
      bottom: 0px;
      height: 8px;
      cursor: row-resize;
    }

    &.sticky {
      // position: sticky;
    }
  }

  // &.filters {
  //   .grid-cell-heading {
  //     &.grid-cell-heading-col,
  //     &.grid-cell-heading-corner {
  //       height: 40px;
  //     }
  //   }
  // }

  &.resizing {
    .grid-cell-heading {
      pointer-events: none;
      .grid-resize-handle {
        pointer-events: all;
      }
    }
  }

  // .grid-cell,
  // .grid-cell-heading {

  // }

  .grid-scrollbar {
    position: absolute;
    z-index: 20;
    transition: 300ms all;
    user-select: none;
    opacity: 0;
    &.grid-scrollbar-x {
      bottom: 0;
      left: 0;
      right: 0;
      height: 10px;
      &:hover {
        height: 16px;
      }
    }
    &.grid-scrollbar-y {
      right: 0;
      top: 0;
      bottom: 0;
      width: 10px;
      &:hover {
        width: 16px;
      }
    }
    .grid-scrollbar-handle {
      // dark #656669
      // background: #6e6e6e;
      background: #cccccc;
      border-radius: 4px;
      // box-shadow: inset 0 0 1px white;
      position: absolute;
      z-index: 10;
      transition: 300ms border-radius;
      &.grid-scrollbar-handle-x {
        left: 0;
        top: 2px;
        height: 6px;
        min-width: 8px;
        transition: 300ms height;
      }
      &.grid-scrollbar-handle-y {
        top: 0;
        right: 2px;
        width: 6px;
        min-height: 8px;
        transition: 300ms width;
      }
    }
    &:hover {
      // background: rgba(0, 0, 0, 0.2);
      background-color: rgba(0, 0, 0, 0.05);
      .grid-scrollbar-handle {
        border-radius: 6px;
        &.grid-scrollbar-handle-x {
          height: 12px;
        }
        &.grid-scrollbar-handle-y {
          width: 12px;
        }
      }
    }
    &.disabled {
      display: none;
    }
  }
  &:hover {
    .grid-scrollbar {
      opacity: 1;
    }
  }
  &.scrolling {
    // .grid-text {
    //   display: none;
    // }
  }
  &.scrolling-x {
    .grid-scrollbar {
      &.grid-scrollbar-x {
        height: 16px;
      }
    }
    .grid-scrollbar-handle {
      &.grid-scrollbar-handle-x {
        height: 12px;
      }
    }
  }
  &.scrolling-y {
    .grid-scrollbar {
      &.grid-scrollbar-y {
        width: 16px;
      }
    }
    .grid-scrollbar-handle {
      &.grid-scrollbar-handle-y {
        width: 12px;
      }
    }
  }
  &.dark {
    .grid-cell-heading {
      background: #212529;
      color: rgba(255, 255, 255, 0.6);
      &::after {
        // border-color: rgba(0, 0, 0, 0.4);
        border-color: #141619;
      }
      &.selected {
        background: black;
      }
      &.grid-cell-heading-row.selected::after {
        border-right: 2px solid rgba(0, 255, 58, 0.5);
      }

      &.grid-cell-heading-col.selected::after {
        border-bottom: 2px solid rgba(0, 255, 58, 0.5);
      }
      &.selected:hover,
      &:hover {
        // background: rgba(0, 255, 58, 0.5);
        // rgb(0, 128, 29)
        background: #217346;
        color: white;
      }
    }
    .grid-scrollbar {
      background: rgba(120, 120, 120, 0.12);
      &:hover {
      }
      .grid-scrollbar-handle {
        background: #656669;
      }
    }
  }
}

.grid-popper {
  position: absolute;
  z-index: 1000;
  background: white;
  // display: none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) !important;
  min-width: 60px;
  max-height: calc(100vh - 10px);
  overflow: auto;
  a {
    display: block;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
    color: #495057;
    &.selected,
    &:hover {
      background: #f0f0f0;
    }
  }
}
.ipp-theme-dark {
  .grid-popper {
    background: #2e2e2e;
    color: rgb(204, 204, 204);
    a {
      color: rgb(204, 204, 204);
      &.selected,
      &:hover {
        background: #1a1a1a;
        color: white;
      }
    }
  }
}
