/*!
    *
    * Wijmo Library 5.20251.40
    * 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
    *
    */

// 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: .9; // pinned
            &:not(.wj-state-pinned) { // un-pinned
                opacity: .4;
                .wj-glyph-pin {
                    transform: rotate(-45deg);  
                }
            }
        }
        &.wj-state-multi-selected { // selected column headers
            border-bottom: 2px solid $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: $wj-cell-bdr-vrt;
            content: '';
        }
    }

    .wj-rowheaders .wj-header {
        &.wj-state-multi-selected { // selected row headers
            border-right: 2px solid $wj-sel-bkg;
        }
        &.wj-big-header:after { // headers before zero-height rows
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            border-bottom: $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: $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 $wj-sel-bkg, inset 0 0 0 1px $wj-sel-bkg; // TFS 379342
        pointer-events: none;
    }

    .wj-marker { // resize row/col marker
        position: absolute;
        background: $wj-accent-bkg;
        opacity: 0.5;
        pointer-events: none;
        z-index: 1000;
    }

    .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 $wj-sel-bkg, inset 0px 0px 0px 1px $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: .4;

            &:hover, &:focus {
                opacity: 1;
                transition-duration: $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: .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: $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: $wj-cell-frz-bdr-vrt;
            border-right: none;
        }

        .wj-frozen-col-right-edge { 
            border-right: $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 .2em 0 0;
            }
        }

        .wj-rowheaders .wj-header {
            &.wj-state-multi-selected { // selected row headers
                border-left: 2px solid $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: $wj-cell-pdg;
    border-right: $wj-cell-bdr-vrt;
    border-bottom: $wj-cell-bdr-hrz;
    background: $wj-cell;
    outline: none;

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

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

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

        &.wj-state-multi-selected { // selected headers
            background: $wj-hdr-hvr;
            color: $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: $wj-sort-index-txt;
            padding: 0 0 0 .2em;
            opacity: 1;
        }
    }

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

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

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

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

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

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

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

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

    &.wj-state-invalid {
        border: 1.2px solid $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: $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: $wj-sel-bkg;
        color: $wj-sel-txt;
    }

    &.wj-state-multi-selected {
        background: $wj-msel-bkg;
        color: $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;
        }
    }
}