/*!
    *
    * Wijmo Library 5.20261.50
    * https://developer.mescius.com/wijmo
    *
    * Copyright(c) MESCIUS inc. All rights reserved.
    *
    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
    * us.sales@mescius.com
    * https://developer.mescius.com/wijmo/licensing
    *
    */

@use "../misc/mixins";
@use "../misc/variables";

// wijmo.grid
.wj-flexgrid {
  width: 100%;
  cursor: default;
  overflow: hidden;

  .wj-row {
    position: absolute; // avoid flicker in Chrome: TFS 261344
    top: 0;
  }

  .wj-colheaders .wj-header {
    .wj-btn.wj-btn-glyph.wj-elem-pin {
      opacity: 0.9; // pinned
      &:not(.wj-state-pinned) {
        // un-pinned
        opacity: 0.4;
        .wj-glyph-pin {
          transform: rotate(-45deg);
        }
      }
    }
    &.wj-state-multi-selected {
      // selected column headers
      border-bottom: 2px solid variables.$wj-sel-bkg;
    }
    &.wj-colgroup {
      // merged column headers
      display: flex;
      align-items: center; // vertical alignment
      &.wj-align-right {
        justify-content: flex-end;
      }
      &.wj-align-center {
        justify-content: center;
      }
    }
    &.wj-big-header:after {
      // headers before zero-width columns
      position: absolute;
      top: 0;
      bottom: 0;
      right: 2px;
      border-right: variables.$wj-cell-bdr-vrt;
      content: "";
    }
  }

  .wj-rowheaders .wj-header {
    &.wj-state-multi-selected {
      // selected row headers
      border-right: 2px solid variables.$wj-sel-bkg;
    }
    &.wj-big-header:after {
      // headers before zero-height rows
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      border-bottom: variables.$wj-cell-bdr-hrz;
      content: "";
    }
  }

  .wj-topleft .wj-header {
    &.wj-big-header:after {
      // headers before zero-width columns
      position: absolute;
      top: 0;
      bottom: 0;
      right: 2px;
      border-right: variables.$wj-cell-bdr-vrt;
      content: "";
    }
  }

  .wj-frozen-clone .wj-cell {
    // frozen cell clones (in container with pointer-events:none)
    pointer-events: auto; // TFS 367568
    a {
      //pointer-events: auto;
      display: inline-block; // TFS 352484: https://coderwall.com/p/s8pjpg/reseting-pointer-events-on-ie11
      // NOTE: position: relative; also works
    }
  }

  .wj-marquee {
    // selection marquee
    position: absolute;
    //border: 2px solid $wj-sel-bkg; // affects scrollbars (TFS 269673)
    //outline: 3px solid $wj-sel-bkg; // no effect on scrollbars
    //outline-offset: -1px; // not supported in IE (TFS 380448)
    box-shadow:
      0 0 0 1px variables.$wj-sel-bkg,
      inset 0 0 0 1px variables.$wj-sel-bkg; // TFS 379342
    pointer-events: none;
  }

  .wj-marker {
    // resize row/col marker
    position: absolute;
    background: variables.$wj-accent-bkg;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1000;
    @if variables.$wj-highlight-cell-maker {
      & {
        background: variables.$wj-highlight-cell-maker;
      }
    }
    @media (forced-colors: active) {
      background: Highlight;
    }
  }

  .wj-state-sticky .wj-header {
    opacity: 0.8;
  }

  .wj-grid-editor {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    background: inherit;
    color: inherit;
    overflow: hidden;
    resize: none;
  }

  &:focus-within .wj-header.wj-focus-header-cell {
    // @extend .wj-marquee;
    // pointer-events: auto;
    box-shadow:
      0px 0px 0px 0px variables.$wj-sel-bkg,
      inset 0px 0px 0px 1px variables.$wj-sel-bkg;
    //border-right: 1px solid $wj-sel-bkg;
    //border-bottom: 1px solid $wj-sel-bkg;
  }
  @media (forced-colors: active) {
    &:focus-within .wj-header.wj-focus-header-cell:focus {
      outline: 2px solid Highlight;
      outline-offset: -1px;
      color: ActiveText;
    }
    .wj-marquee {
      outline: 2px solid Highlight;
      outline-offset: -1px;
    }
  }

  .wj-cell {
    .wj-btn.wj-btn-glyph {
      // dataMap drop-downs, filters, details
      padding: 0 4px;
      min-width: 1.5em;
      color: inherit;
      background: transparent;
      opacity: 0.4;

      &:hover,
      &:focus {
        opacity: 1;
        transition-duration: variables.$wj-tdn-focus;
      }

      &.wj-right {
        float: right;
        order: 2; // TFS 438977
        &:nth-child(1) {
          order: 5;
        }
        &:nth-child(2) {
          order: 4;
        }
        &:nth-child(3) {
          order: 3;
        }
      }

      &.wj-elem-detail {
        min-width: 1em; // TFS 352604
        padding: 0;
      }

      > span {
        opacity: 1;
      }
    }
    &.wj-hasdropdown {
      // TFS 430002
      display: flex; // WJM-19430
      & > div {
        //WJM-234003
        flex-grow: 1;
      }
      .wj-btn.wj-btn-glyph.wj-right {
        height: 100%;
      }
    }

    &.wj-radio-map label {
      // dataMap radio buttons
      display: inline-block;
      font-weight: inherit;
      margin: 0 1em 0 0; // space to click the cell between labels
      input[type="radio"] {
        margin: 0 4px 0 0;
        outline: none;
        &:not(:checked) {
          opacity: 0.4;
        }
      }
    }

    // fix for 461333 (https://stackoverflow.com/questions/27536428/inline-block-element-height-issue)
    &.wj-detail .wj-content.wj-flexgrid {
      vertical-align: top;
    }
    &.wj-frozen-row.wj-detail {
      z-index: 2;
    }
    &.wj-detail {
      z-index: 0;
    }

    // fix for C1WEB-27716 (auto-size rows and boolean cells)
    label {
      display: inline-block;
      max-width: 100%;
      margin: 0;
      font-weight: inherit;
      line-height: 1em; // WJM-19514
      input[type="checkbox"] {
        margin: 0px 6px 0px 0px;
      }
    }

    // Set display none for label with hidden attributes except when hidden is set to "until-found".
    label[hidden]:not([hidden="until-found"]) {
      display: none; // WJM-34503
    }
  }

  &.wj-rtl {
    .wj-cell {
      border-left: variables.$wj-cell-bdr-vrt;
      border-right: none;

      .wj-btn.wj-btn-glyph.wj-right {
        float: left;
      }

      &.wj-last-visible-col {
        border-left: none;
      }
    }

    .wj-frozen-col {
      border-left: variables.$wj-cell-frz-bdr-vrt;
      border-right: none;
    }

    .wj-frozen-col-right-edge {
      border-right: variables.$wj-cell-frz-bdr-vrt;
    }

    .wj-colheaders .wj-header {
      &.wj-filter-on,
      &.wj-filter-off {
        // workaround for IE11 bug: TFS 408397
        white-space: normal;
        word-break: break-all;
      }

      &.wj-big-header:after {
        // headers before zero-width columns
        left: 2px;
        right: unset;
      }

      .wj-sort-index {
        padding: 0 0.2em 0 0;
      }
    }

    .wj-rowheaders .wj-header {
      &.wj-state-multi-selected {
        // selected row headers
        border-left: 2px solid variables.$wj-sel-bkg;
        border-right: none;
      }
    }

    .wj-topleft .wj-header {
      &.wj-big-header:after {
        // headers before zero-width columns
        left: 2px;
        right: unset;
      }
    }
  }

  // honor preserveWhiteSpace property (TFS 403505)
  &.wj-whitespace-pre {
    .wj-cell {
      white-space: pre;
    }
    .wj-cell.wj-wrap {
      white-space: pre-wrap;
    }
    .wj-cell.wj-multiline {
      white-space: pre-wrap; //pre-line; // TFS 440414
    }
  }

  // don't float buttons while measuring (TFS 418083)
  [wj-state-measuring].wj-cell .wj-btn.wj-btn-glyph.wj-right {
    float: none;
  }
}

// moved to top level for backward compatibility
.wj-cell {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  padding: variables.$wj-cell-pdg;
  border-right: variables.$wj-cell-bdr-vrt;
  border-bottom: variables.$wj-cell-bdr-hrz;
  background: variables.$wj-cell;
  outline: none;

  &:not(.wj-hasdropdown) {
    text-overflow: ellipsis;
  }

  &.wj-alt {
    background: variables.$wj-cell-alt; // alternate cell background
    &.wj-frozen {
      // frozen cell fore and backgrounds
      @include mixins.backgradient(variables.$wj-cell-frz-alt, false);
    }
  }

  &.wj-header {
    @include mixins.backgradient(variables.$wj-hdr-bkg, variables.$wj-hdr-grd);
    color: variables.$wj-hdr-txt;
    font-weight: bold;

    &.wj-state-multi-selected {
      // selected headers
      background: variables.$wj-hdr-hvr;
      color: variables.$wj-hdr-txt;
      font-weight: bold;
    }

    .wj-sort-index {
      // sort index in multi-column sorts
      display: inline-block; // TFS 400500
      font-weight: normal;
      font-size: 80%;
      vertical-align: top;
      color: variables.$wj-sort-index-txt;
      padding: 0 0 0 0.2em;
      opacity: 1;
    }
  }

  &.wj-frozen {
    // frozen cell fore and backgrounds
    @include mixins.backgradient(variables.$wj-cell-frz, false);

    @if variables.$wj-cell-frz-txt != variables.$wj-txt {
      // TFS 359692
      color: variables.$wj-cell-frz-txt;
    }
  }

  &.wj-last-frozen-row {
    // frozen row bottom edge
    border-bottom: variables.$wj-cell-frz-bdr-hrz;
  }

  &.wj-last-frozen-row-bottom {
    // frozen row bottom edge
    border-top: variables.$wj-cell-frz-bdr-hrz;
  }

  &.wj-frozen-col {
    // frozen column left edge
    border-right: variables.$wj-cell-frz-bdr-vrt;
  }

  &.wj-frozen-col-right-edge {
    // frozen column right edge
    border-left: variables.$wj-cell-frz-bdr-vrt;
  }

  &.wj-group {
    background: variables.$wj-cell-grp-bkg;
    color: variables.$wj-cell-grp-txt;

    .wj-elem-collapse-space::before {
      content: "\0020"; // Space Unicode
    }
  }

  &.wj-state-invalid {
    border: 1.2px solid variables.$wj-invalid;

    &.wj-header {
      background: rgba(255, 180, 180, 1); // TFS 306815
    }

    &:not(.wj-header):after {
      position: absolute;
      content: "";
      width: 0;
      right: 0;
      top: -6px;
      border: 6px solid transparent;
      border-right-color: variables.$wj-invalid;
    }
  }

  &.wj-header.wj-state-dragsrc {
    opacity: 0.5; // header cell being dragged
  }

  &.wj-wrap {
    // soft breaks
    white-space: normal;
    text-overflow: clip;
    word-wrap: break-word; // TFS 407942
  }

  &.wj-multiline {
    // hard breaks
    white-space: pre; // or pre-line?
    text-overflow: clip;
    word-wrap: break-word; // TFS 407942
  }

  &.wj-wrap.wj-multiline {
    // soft and hard breaks
    white-space: pre-wrap;
    text-overflow: clip;
  }

  &.wj-align-left {
    text-align: left;
  }

  &.wj-align-right {
    text-align: right;
  }

  &.wj-align-center {
    text-align: center;
  }

  &.wj-align-justify {
    text-align: justify;
  }

  &.wj-align-justify-all {
    text-align: justify;
    text-align-last: justify;
    text-justify: distribute; // required for IE11
  }

  &.wj-last-visible-col {
    border-right: none;
  }

  &.wj-last-visible-row {
    border-bottom: none;
  }
}

.wj-cells .wj-cell {
  // selection selector is stronger
  &.wj-state-selected {
    background: variables.$wj-sel-bkg;
    color: variables.$wj-sel-txt;
  }

  &.wj-state-multi-selected {
    background: variables.$wj-msel-bkg;
    color: variables.$wj-msel-txt;
  }

  @media (forced-colors: active) {
    &.wj-state-selected {
      background-color: Highlight;
      color: ActiveText;
      .wj-glyph-down,
      .wj-glyph-right,
      .wj-glyph-down-right {
        background-color: Highlight;
      }
    }

    &.wj-state-multi-selected {
      background-color: Canvas;
      color: ActiveText;
    }
  }
}