@import '../abstracts/variables';

.data-grid {
    th {
        position: relative;
    }

    .table-cell {
        &.edit-mode-cell {
            //padding: 0 !important;

            .input-control {
                margin: 0 !important;
            }

            .input {
                font-size: inherit;

                &:before {
                    content: none;
                }

                &after {
                    content: none;
                }

                .input-outlined-border {
                    border: none;
                }
            }
        }

        &.filter-header-cell {
            padding: 6px 24px 6px 16px;
            padding-inline-start: 16px;
            padding-inline-end: 24px;
        }

        &.sticky-left {
            left: 0px;
            position: sticky;
            background-color: var(--palette-background-grey);
            z-index: 1;
        }

        &.sticky-right {
            right: 0px;
            position: sticky;
            background-color: var(--palette-background-grey);
            z-index: 1;
        }

        .input-text {
            margin-top: 0 !important;
        }

        .column-header {
            display: flex;
            justify-content: space-between;

            .sortable-column-header {
                width: 100%;
            }

            &:hover {
                .column-options .sort-direction-icon, .column-options .column-options-icon {
                    opacity: 0.8;
                    color: var(--palette-action-default);
                }

                .column-options .menu .icon-button-label {
                    opacity: 1.0;
                    color: var(--palette-action-default);
                }
            }

            .column-options {
                display: inline-flex;
                align-items: center;
                flex-direction: inherit;
                justify-content: flex-start;
            }

            .sort-direction-icon {
                font-size: 18px;
                margin-left: 4px;
                margin-left: 4px;
                margin-inline-start: 4px;
                margin-inline-end: unset;
                user-select: none;
                transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                opacity: 0;

                &.direction-desc {
                    opacity: 1;
                    transform: rotate(180deg);
                }

                &.direction-asc {
                    opacity: 1;
                    transform: rotate(0deg);
                }
            }

            .sort-index {
                transform: scale(0.9) translate(-2px, -2px);
            }

            .column-options .menu .icon-button-label {
                /*font-size: 18px;*/
                user-select: none;
                /*margin-right: 4px;*/
                transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                opacity: 0;
            }
        }

        .resizer {
            position: absolute;
            top: 0;
            right: 0;
            width: 8px;
            cursor: col-resize;
            user-select: none;
        }

        .resizer:hover,
        .resizing {
            border-right: 2px solid var(--palette-primary);
        }
    }
}