@use "../../../bulma/sass/utilities" as bulma-utilities;
@use "../../../bulma/sass/elements/table" as bulma-table;
@use "../utilities/functions";

$table-sticky-header-height: 300px !default;

// Map Local variables
$-css-vars-map: (
    "table-sticky-header-height": $table-sticky-header-height,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("b-table", $-css-vars-map);

@mixin table-cards {
    .table {
        background-color: transparent;
    }

    thead {
        tr {
            border-width: 0;
            box-shadow: none;

            th {
                display: none;
            }

            .checkbox-cell {
                display: block;
                width: 100%;
                margin-bottom: 1rem;
                text-align: right;
                border: 0;
            }
        }
    }

    tfoot {
        th {
            display: inherit;
            border: 0; // Disable is-bordered
        }
    }

    tr {
        position: relative;
        display: block;
        max-width: 100%;

        // Card style — Cannot extend inside media query
        box-shadow: 0 2px 3px rgb(var(--scheme-invert-rgb) 0.1), 0 0 0 1px rgb(var(--scheme-invert-rgb) 0.1);

        td {
            display: inherit;
            border: 0; // Disable is-bordered
            &:last-child {
                border-bottom: 0;
            }
        }

        &:not(:last-child) {
            margin-bottom: 1rem;
        }

        // Disables is-*
        &:not([class*="is-"]) {
            background: var(--table-background-color);

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

        &.detail {
            margin-top: -1rem;
        }
    }

    tr:not(.detail, .is-empty, .table-footer) {
        td {
            display: flex;
            justify-content: space-between;
            width: auto;
            text-align: right;
            border-bottom: 1px solid var(--background);

            &::before {
                padding-right: 0.5em;
                font-weight: var(--weight-semibold);
                text-align: left;
                content: attr(data-label);
            }
        }
    }
}

.table-wrapper {
    .table {
        margin-bottom: 0;
    }

    &:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    @include bulma-utilities.touch {
        overflow-x: auto;
    }
}

.b-table {
    transition: opacity var(--speed) var(--easing);

    .table-mobile-sort {
        @include bulma-utilities.tablet {
            display: none;
        }
    }

    .icon {
        transition: transform calc(var(--speed) * 2) var(--easing), opacity var(--speed) var(--easing);

        &.is-desc {
            transform: rotate(180deg);
        }

        &.is-expanded {
            transform: rotate(90deg);
        }
    }

    .sort-icon.icon.is-desc {
        transform: rotate(180deg) translateY(-50%) !important;
    }

    .table {
        width: 100%;
        border-collapse: separate;
        border: 1px solid transparent;
        border-radius: var(--radius);

        th {
            font-weight: var(--weight-semibold);

            .th-wrap {
                display: flex;
                align-items: center;

                .icon {
                    margin-right: 0;
                    margin-left: 0.5rem;
                    font-size: 1rem;
                }

                &.is-numeric {
                    flex-direction: row-reverse;
                    width: 95%;
                    text-align: right;

                    .icon {
                        margin-right: 0.5rem;
                        margin-left: 0;
                    }
                }

                &.is-centered {
                    justify-content: center;
                    text-align: center;
                }
            }

            &.is-current-sort {
                font-weight: var(--weight-bold);
                border-color: var(--grey);
            }

            &.is-sortable:hover {
                border-color: var(--grey);
            }

            &.is-sortable,
            &.is-sortable .th-wrap {
                cursor: pointer;

                .is-relative {
                    position: absolute;
                }
            }

            .sort-icon, .multi-sort-cancel-icon {
                position: absolute;
                bottom: 50%;
                left: 100%;
                transform: translateY(50%);
            }

            .multi-sort-cancel-icon {
                margin-left: 10px;
            }

            &.is-sticky {
                position: sticky;
                left: 0;
                z-index: 3 !important;
                background: var(--table-head-background-color);
            }
        }

        tr {
            &.is-selected {
                .checkbox input {
                    &:checked + .check {
                        color: bulma-table.$table-row-active-background-color;
                        background: var(--table-row-active-color); // url(functions.checkmark(bulma-table.$table-row-active-background-color)) no-repeat center center;

                        &::after {
                            position: absolute;
                            top: 0;
                            content: "✓"
                        }
                    }

                    + .check {
                        border-color: var(--table-row-active-color);
                    }
                }
            }

            &.is-empty:hover {
                background-color: transparent;
            }
        }

        .chevron-cell {
            vertical-align: middle;

            > a {
                color: var(--input-arrow-color) !important;
            }
        }

        .checkbox-cell {
            width: 40px;

            .checkbox {
                vertical-align: middle;

                .check {
                    transition: none;
                }
            }
        }

        tr.detail {
            background: var(--scheme-main-bis);
            box-shadow: inset 0 1px 3px var(--grey-lighter);

            .detail-container {
                padding: 1rem;
            }
        }

        &:focus {
            --focus-box-shadow-color: #{bulma-utilities.bulmaVarOpacity(link, 0.25)};

            border-color: var(--link);
            box-shadow: 0 0 0 0.125em var(--focus-box-shadow-color);
        }

        // Modifiers
        &.is-bordered {
            th.is-current-sort,
            th.is-sortable:hover {
                background: var(--background);
                border-color: var(--grey-lighter);
            }
        }

        td {
            &.is-sticky {
                position: sticky;
                left: 0;
                z-index: 1;
                background: var(--table-background-color);
            }
        }

        &.is-striped {
            tbody {
                tr:not(.is-selected) {
                    &:nth-child(even) {
                        td {
                            &.is-sticky {
                                background: var(--table-striped-row-even-background-color);
                            }
                        }
                    }
                }
            }
        }
    }

    .level:not(.top) {
        padding-bottom: 1.5rem;
    }

    .table-wrapper {
        position: relative;

        &.has-sticky-header {
            height: var(--table-sticky-header-height);
            overflow-y: auto;

            &.has-mobile-cards {
                @include bulma-utilities.mobile {
                    height: initial !important;
                    overflow-y: initial !important;
                }
            }

            tr:first-child {
                th {
                    position: sticky;
                    top: 0;
                    z-index: 2;
                    background: var(--table-background-color);
                }
            }
        }

        &.has-mobile-cards {
            @include bulma-utilities.mobile {
                @include table-cards
            }
        }

        &.is-card-list {
            @include table-cards
        }
    }
}