@import "./functions/func.scss";

.ui-grid-container {
    position: relative;

    .ui-grid {
        position: relative;
        box-sizing: border-box;
        overflow: auto;

        & {
            --cell-hover-bg-color: lightyellow;
            --header-border-color: #adaba9;
            --header-bg-color: #fafafa;
            --header-fore-color: #000;
            --cell-border-color: #f0f0f0;
            --cell-fore-color: #333;
            --dark-border-color: #666;
            --split-border-color: #b3b3b3;
            --dragger-bg-color: #fff;
            --dragger-cursor-color: #333;
            --row-bg-color: #fff;
            --row-active-bg-color: #fafafa;
            --row-selected-bg-color: #e6f2fb;
            --total-row-bg-color: #b3b3b3;
            --text-disabled-color: gray;

            --filter-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
            --filter-transition: transform .12s ease, opacity .24s ease;

            --row-height: 36px;
            --header-line-height: 20px;
            --text-indent: 8px;

            --loading-size: 40px;
            --loading-border-radius: 20px;

            --arrow-size: 4px;
            --filter-size: 10px;
            --split-width: 10px;
            --dragger-size: 20px;
            --dragger-opacity: .6;
            --dragger-cursor-size: 4px;
            --dragger-cursor-pos: -4px;
            --dragger-cursor-opacity: .3;

            --header-padding: 4px 12px 4px 8px;
            --header-filter-padding: 4px 26px 4px 8px;
            --spacing-s: 4px;
            --spacing-cell: 9px 4px 9px 8px;
            --spacing-drop-cell: 5px 4px 5px 8px;
            --filter-line-height: 30px;
            --filter-item-padding: 0 4px;
        }

        @include outline();
        @include scrollbar();

        &,
        input[type="text"],
        input[type="date"],
        textarea {
            font-size: var(--font-size);
            font-family: var(--font-family);
        }

        >.ui-grid-sizer {
            position: absolute;
            white-space: nowrap;
            font-weight: bold;
            visibility: hidden;
        }

        >.ui-grid-wrapper {
            position: relative;

            >.ui-grid-table {
                position: absolute;
                width: 100%;
                min-width: 100%;
                margin: 0;
                border-collapse: collapse;
                border-spacing: 0;
                table-layout: fixed;

                >thead {
                    color: var(--header-fore-color);

                    tr {

                        >th {
                            background-color: var(--header-bg-color);
                            user-select: none;
                            padding: 0;
                            margin: 0;
                            word-wrap: break-word;
                            white-space: normal;
                            // position: relative;
                            top: 0;
                            position: sticky;
                            z-index: 1;

                            &.sticky {
                                position: sticky;
                                z-index: 2;
                            }

                            >div {
                                line-height: var(--header-line-height);
                                min-height: var(--row-height);
                                display: flex;
                                align-items: center;
                                padding: var(--header-padding);
                                box-sizing: border-box;
                                // overflow-x: hidden;
                                // border-right: 1px solid transparent;
                                // transition: border-color .12s ease;

                                >span {
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;

                                    &.wrap {
                                        @include wrap();
                                    }
                                }

                                >.ui-check-wrapper,
                                >.ui-switch {
                                    height: 20px;
                                    padding: 0 4px 0 0;
                                }

                                >svg {
                                    width: 12px;
                                    min-width: 12px;
                                    height: 12px;
                                    margin-left: 4px;
                                    fill: var(--split-border-color);
                                }
                            }

                            >.arrow {
                                width: 0;
                                height: 0;
                                top: 50%;
                                margin-top: calc(0px - var(--arrow-size) / 2);
                                right: calc(var(--arrow-size) / 2);
                                position: absolute;

                                &.asc {
                                    border-bottom: var(--arrow-size) solid var(--dark-border-color);
                                }

                                &.desc {
                                    border-top: var(--arrow-size) solid var(--dark-border-color);
                                }

                                &.asc,
                                &.desc {
                                    border-left: var(--arrow-size) solid transparent;
                                    border-right: var(--arrow-size) solid transparent;
                                }
                            }

                            >.filter {
                                width: var(--filter-size);
                                height: var(--filter-size);
                                top: 50%;
                                margin-top: calc(0px - var(--filter-size) / 2);
                                right: calc(var(--arrow-size) * 2 + 4px);
                                position: absolute;
                                display: flex;

                                >svg {
                                    width: 100%;
                                    height: 100%;
                                    fill: var(--color);
                                    opacity: .2;
                                    transition: opacity .12s ease;

                                    &:hover {
                                        opacity: .8;
                                    }
                                }

                                &.hover>svg {
                                    opacity: .8;
                                }

                                &.active>svg {
                                    opacity: 1;
                                }
                            }

                            >.spliter {
                                position: absolute;
                                height: 100%;
                                top: 0;
                                right: calc(1px - var(--split-width) /2);
                                width: var(--split-width);
                                cursor: ew-resize;
                                z-index: 2;

                                &::after {
                                    content: '';
                                    height: 100%;
                                    width: 1px;
                                    display: block;
                                    margin: 0 auto;
                                    transition: background-color .12s ease;
                                }

                                // &:hover::after {
                                //     background-color: var(--split-border-color);
                                // }
                            }

                            >.bottom-border {
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                height: 1px;
                                z-index: 2;
                                background-color: var(--header-border-color);
                            }

                            >.dragger {
                                position: absolute;
                                left: 0;
                                top: 0;
                                min-width: var(--dragger-size);
                                height: 100%;
                                background-color: var(--dragger-bg-color);
                                opacity: var(--dragger-opacity);
                                display: none;
                            }

                            >.dragger-cursor {
                                position: absolute;
                                top: 0;
                                height: 100%;
                                border: 1px solid var(--dragger-cursor-color);
                                box-sizing: border-box;
                                margin-left: 0;
                                opacity: var(--dragger-cursor-opacity);
                                display: none;
                                transition: left .12s ease;

                                &::before {
                                    top: -1px;
                                    border-top: var(--dragger-cursor-size) solid;
                                }

                                &::after {
                                    bottom: -1px;
                                    border-bottom: var(--dragger-cursor-size) solid;
                                }

                                &::before,
                                &::after {
                                    content: '';
                                    position: absolute;
                                    left: var(--dragger-cursor-pos);
                                    border-left: var(--dragger-cursor-size) solid transparent;
                                    border-right: var(--dragger-cursor-size) solid transparent;
                                }
                            }

                            &.header-filter>div {
                                padding: var(--header-filter-padding);
                            }
                        }

                        // &:hover>th>div {
                        //     border-color: var(--split-border-color);
                        // }
                        &:hover>th>.spliter::after {
                            background-color: var(--split-border-color);
                        }
                    }
                }

                >tbody,
                >tfoot {

                    >.ui-grid-row {
                        line-height: var(--line-height);
                        white-space: nowrap;
                        box-sizing: border-box;

                        >td {
                            padding: 0;

                            &.sticky {
                                position: sticky;
                                z-index: 1;
                            }

                            >span {
                                margin: var(--spacing-cell);
                                display: block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: pre;

                                &.wrap {
                                    @include wrap();
                                }
                            }
                        }

                        &.ui-grid-row-level.level-1>td:first-child {
                            padding-left: 20px;
                        }
                    }
                }

                >tfoot {
                    color: var(--header-fore-color);
                    position: absolute;
                    width: 100%;
                    background-color: var(--total-row-bg-color);

                    >.ui-grid-row>td {
                        font-weight: bold;

                        &.sticky {
                            background-color: var(--total-row-bg-color);
                        }
                    }
                }

                >tbody {
                    color: var(--cell-fore-color);

                    >.ui-grid-row {
                        background-color: var(--row-bg-color);
                        border-bottom: 1px solid var(--cell-border-color);

                        &:hover {
                            background-color: var(--row-active-bg-color);

                            >td {
                                &.sticky {
                                    background-color: var(--row-active-bg-color);
                                }

                                .col-hover {
                                    display: block;
                                }
                            }
                        }

                        &.selected {
                            background-color: var(--row-selected-bg-color);

                            >td.sticky {
                                background-color: var(--row-selected-bg-color);
                            }
                        }

                        >td {

                            &.sticky {
                                background-color: var(--row-bg-color);
                            }

                            &.ui-expandable {
                                &>svg {
                                    width: 24px;
                                    height: 34px;
                                    padding: 8px 3px;
                                    box-sizing: border-box;
                                    display: block;
                                    cursor: pointer;
                                    transition: opacity .12s ease;

                                    &:hover {
                                        opacity: .4;
                                    }
                                }
                            }

                            >input[type="text"],
                            >input[type="date"],
                            >textarea {
                                border: none;
                                box-sizing: border-box;
                                width: 100%;
                                padding: 0;
                                max-height: none !important;

                                @include outline();

                                &:disabled {
                                    color: var(--text-disabled-color);
                                }
                            }

                            >input[type="text"] {
                                height: var(--row-height);
                                text-indent: var(--text-indent);
                            }

                            >textarea {
                                resize: none;
                                line-height: var(--line-height);
                                display: block;
                                padding: var(--spacing-cell);
                                white-space: nowrap;
                                @include scrollbar();
                            }

                            .ui-check-wrapper,
                            .ui-switch {
                                display: inline-flex;
                                justify-content: center;
                                height: var(--row-height);
                                padding: 0 8px;

                                .ui-check-inner {

                                    &,
                                    >svg {
                                        transition: none;
                                    }
                                }

                                >span:first-of-type {

                                    &:before,
                                    &:after {
                                        transition: none;
                                    }
                                }
                            }

                            .ui-drop-span {
                                margin: 0;

                                >span {
                                    margin: var(--spacing-cell);
                                    display: block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: pre;
                                }

                                &.wrap>span {
                                    @include wrap();
                                }
                            }

                            .ui-drop-wrapper {
                                height: var(--row-height);
                                width: 100%;
                                display: flex;
                                flex-direction: column;

                                >.ui-drop-header {
                                    border: none;
                                    height: 100%;

                                    >.ui-drop-text {
                                        padding: var(--spacing-drop-cell);
                                    }
                                }
                            }

                            .ui-date-cell {
                                height: var(--row-height);
                                text-indent: 4px;

                                &:invalid {
                                    color: rgba(0, 0, 0, .3);
                                }
                            }

                            .col-icon {
                                display: flex;
                                cursor: pointer;
                                justify-content: center;
                                align-items: center;
                                position: relative;
                                // padding: var(--spacing-s);

                                >svg {
                                    width: 16px;
                                    height: 16px;
                                    fill: var(--primary-color);
                                    transition: opacity .12s ease;
                                }

                                &:hover>svg {
                                    opacity: .4;
                                }

                                &.disabled {
                                    cursor: unset;

                                    >svg {
                                        fill: var(--header-border-color);
                                        opacity: unset;
                                    }
                                }
                            }

                            .col-hover {
                                display: none;
                            }
                        }
                    }
                }
            }

            .ui-grid-hover-holder {
                box-sizing: border-box;
                position: absolute;
                // line-height: var(--line-height);
                // padding: var(--spacing-cell);
                // background-color: var(--cell-hover-bg-color);
                // white-space: pre;
                display: flex;
                align-items: center;
                // overflow: hidden;
                visibility: hidden;
                opacity: 0;
                transition: visibility 0s linear .12s, opacity .12s ease;
                z-index: 2;
                border-radius: 2px;
                box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .13), 0 0.6px 1.8px 0 rgba(0, 0, 0, .11);
                margin-top: -40px;

                &.active {
                    visibility: visible;
                    opacity: 1;
                }

                >.ui-grid-hover-pointer {
                    box-sizing: border-box;
                    box-shadow: 0 5px 15px 2px rgba(0, 0, 0, .3);
                    border: 1px solid #fff;
                    z-index: -1;
                    width: 16px;
                    height: 16px;
                    position: absolute;
                    left: var(--pointer-left, calc(50% - 8px));
                    bottom: -8px;
                    transform: rotate(-45deg);
                    transform-origin: center;
                }

                >.ui-grid-hover-curtain {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                }

                >.ui-grid-hover-content {
                    font-size: var(--font-smaller-size);
                    line-height: 1rem;
                    white-space: normal;
                    overflow: hidden;
                    margin: 8px;
                    height: calc(100% - 16px);
                    user-select: none;
                }

                &.ui-grid-hover-down {
                    margin-top: 40px;

                    >.ui-grid-hover-pointer {
                        bottom: unset;
                        top: -8px;
                    }
                }

                &.ui-grid-hover-no>.ui-grid-hover-pointer {
                    display: none;
                }
            }
        }

        ~.ui-drop-box {
            max-width: 300px;
        }

        >.filter-panel {
            position: absolute;
            width: 200px;
            height: 300px;
            box-shadow: var(--filter-shadow);
            transition: var(--filter-transition);
            background-color: var(--bg-color);
            transform: scaleY(0);
            transform-origin: top;
            opacity: 0;
            display: flex;
            flex-direction: column;
            z-index: 2;

            &.active {
                transform: scaleY(1);
                opacity: 1;
            }

            >.filter-search-holder {
                position: relative;
                margin: 8px 8px 4px;

                >.filter-search-box {
                    box-sizing: border-box;
                    text-indent: 16px;
                    width: 100%;
                    font-size: var(--font-smaller-size);
                    height: var(--line-height);
                    line-height: var(--line-height);
                }

                >svg {
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    top: calc(50% - 6px);
                    left: 4px;
                    fill: var(--color);
                    cursor: text;
                }
            }

            >.filter-item-list {
                flex: 1 1 auto;
                overflow-y: auto;
                overflow-x: hidden;
                position: relative;
                user-select: none;
                @include scrollbar();

                >.filter-content {
                    position: absolute;
                    width: 100%;
                }

                .filter-item {
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    box-sizing: border-box;
                    padding: var(--filter-item-padding);

                    &:hover {
                        background-color: var(--hover-bg-color);
                    }

                    .ui-check-wrapper {
                        height: var(--filter-line-height);
                        line-height: var(--filter-line-height);
                        display: flex;

                        .ui-check-inner+* {
                            font-size: var(--font-smaller-size);
                        }
                    }
                }
            }

            >.filter-function {
                display: flex;
                justify-content: flex-end;
                padding: 4px;

                >.button {
                    box-sizing: border-box;
                    padding-inline: 6px;
                    text-align: center;
                    margin-right: 10px;
                    min-width: 40px;
                    height: var(--filter-line-height);
                    line-height: var(--filter-line-height);
                    border: none;
                    background-color: transparent;
                    cursor: pointer;
                    border-radius: 0;
                    transition: background-color .12s ease;

                    @include outline();

                    &:hover {
                        background-color: var(--hover-bg-color);
                    }
                }
            }
        }

        .ui-sort-panel-content {
            height: 100%;
            display: flex;
            flex-direction: column;

            >.ui-sort-panel-buttons {
                flex: 0 0 auto;
                white-space: nowrap;
                overflow: hidden;

                >.button {
                    margin-right: 6px;
                    padding-inline: 6px;
                    text-align: center;
                    border: none;
                    line-height: 28px;
                    color: var(--title-color);
                    border-radius: var(--corner-radius);
                    padding: 0 10px;
                    box-sizing: border-box;
                    height: 28px;
                    line-height: 28px;
                    cursor: pointer;
                    user-select: none;
                    background-color: var(--title-bg-color);
                    transition: opacity .12s ease;
                    display: inline-flex;
                    align-items: center;

                    &:hover {
                        opacity: .8;
                    }

                    &:disabled {
                        opacity: .6;
                        cursor: default;
                    }

                    >svg {
                        flex: 0 0 auto;
                        width: 16px;
                        height: 16px;
                        fill: var(--title-color);
                    }

                    >span {
                        flex: 1 1 auto;
                        margin-left: 4px;
                    }
                }
            }

            >.ui-sort-panel-grid {
                flex: 1 1 auto;
                position: relative;
                height: calc(100% - 30px);
            }
        }
    }
}

.ui-popup-mask .ui-popup-container .ui-popup-footer {
    >.ui-sort-layout {
        flex: 1 1 auto;
        margin-left: 8px;
    }
}

/*@media (prefers-color-scheme: dark) {
    .ui-grid {
        --cell-hover-bg-color: yellow;
        --header-border-color: #525456;
        --header-bg-color: #050505;
        --header-fore-color: #fff;
        --cell-border-color: #0f0f0f;
        --cell-fore-color: #ccc;
        --dark-border-color: #999;
        --split-border-color: #4c4c4c;
        --dragger-bg-color: #000;
        --dragger-cursor-color: #ccc;
        --row-bg-color: #000;
        --row-active-bg-color: #050505;
        --row-selected-bg-color: #190d04;
        --text-disabled-color: gray;
    }
}*/