desktop/src/@batch-flask/ui/table/table.scss

@import "app/styles/variables";

bl-table {
    $padding-first-and-last: 10px;
    $table-heading-height: 34px;
    $table-row-height: 28px;

    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    outline: none;
    -webkit-user-drag: none;

    bl-thead {
        display: flex;
        align-items: center;
    }

    > .table-head {
        color: $secondary-text;
        height: $table-heading-height;
        > bl-thead {
            height: $table-heading-height;
        }

        &.no-scroll {
            border-bottom: 1px solid $border-color;
        }
    }

    > .table-body {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        height: 100%;

        &:focus {
            outline: none;
        }

        > bl-virtual-scroll {
            flex: 1;
            min-height: 0;
            height: 100%;
        }
    }

    .checkbox-cell {
        width: 30px;
        height: $table-row-height;
        padding: 4px 5px;

        > .checkbox {
            border: 1px solid $border-color;
            width: 20px;
            height: 20px;
            padding: 1px;
            display: inline-block;
            position: relative;
            margin-right: 5px;
            cursor: pointer;

            > .fa-check {
                display: block;
                color: $secondary-text;
                font-size: 16px;
            }
        }

        &:hover {
            > .checkbox {
                border-color: $primary-color;
            }
        }
    }

    &.activable {
        bl-row-render {
            cursor: pointer;
        }
    }

    bl-row-render {
        display: flex;
        align-items: stretch;
        color: $primary-text;
        height: $table-row-height;

        &:not(:last-child) {
            border-bottom: 1px solid $border-color;
        }

        &.selected {
            background-color: $primary-color;
            color: $card-background;

            .checkbox {
                border-color: $secondary-text;
            }
        }

        &.focused {
            outline: 1px dashed $primary-color;
            outline-offset: -2px;
        }

        &.focused.selected {
            outline: 1px dashed $primary-contrast-color;
            outline-offset: -2px;
        }

        &.drop-target {
            background: $hover-bg-color;
        }

        &:hover:not(.selected) {
            background-color: $hover-bg-color;
        }

        &:last-child {
            border-bottom: 1px $border-color solid;
        }
    }

    .bl-table-cell,
    bl-table-head-cell {
        position: relative;
        vertical-align: middle;
        padding: 0 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        word-wrap: break-word;

        &.focused {
            outline: 2px dashed $primary-color;
            outline-offset: -2px;
        }

        &.fixed-size {
            flex-grow: 0;
        }

        &:first-child {
            padding: 0 5px 0 $padding-first-and-last;
        }

        &:last-child {
            padding: 0 $padding-first-and-last 0 5px;
        }

        // If only one cell
        &:only-child {
            padding: 0 $padding-first-and-last;
        }

        &[numericField] {
            text-align: right;
        }
    }

    bl-table-head-cell {
        font-size: 0.9em;
        font-weight: bold;
        white-space: nowrap;
        user-select: none;

        > * {
            display: inline;
        }

        outline: none;

        &.sortable {
            cursor: pointer;

            .sort-icon {
                margin-left: 3px;
            }
        }

        &.sorting {
            color: $primary-color;

            > .sort-icon {
                color: $primary-color;
            }
        }
    }

    .bl-table-cell {
        font-size: 13px;
        position: relative;
        white-space: nowrap;
        line-height: $table-row-height;

        .cell-value {
            width: 98%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    bl-thead {
        position: relative;
        .column-separator {
            opacity: 0;
            display: block;
            cursor: e-resize;
            background: $border-color;
            flex: 0 0 1px;
            height: 100%;
            position: relative;
            > .column-separator-hitbox {
                position: absolute;
                width: 5px;
                left: -2px;
                height: 100%;
                z-index: 100;

                &:hover {
                }
            }

            &.resizing {
                > .column-separator-hitbox {
                    background: $border-color;
                }
            }
        }

        &:hover, &.resizing {
            .column-separator {
                opacity: 1;
            }
        }

    }
}

.cell-spinner {
    color: $primary-color;
}