
// Table Search Bar
.table-search-group {

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 450px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    overflow: hidden;


    .table-search-label {

        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        padding-right: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: inherit;
        background-color: inherit;
        border: none;
        text-align: center;
        white-space: nowrap;

    }

    .table-search-input {

        position: relative;
        flex: 1 1 auto;
        padding: 0.375rem 0.75rem;
        appearance: none;
        width: 1%;
        min-width: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        border: none;
        border-radius: 0;
        color: inherit;
        background-color: inherit;
        background-clip: padding-box;

        // Disable bootstrap's focus highlights
        &:focus {

            outline: 0;
            box-shadow: none;

        }

    }

}

// Badge popover
.table-badge-popover .popover-body {

    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0.5rem 0.5rem 1rem;
    max-width: 200px;

}

// Table Button Controls

.table-button-controls > div {

    margin-left: 1rem;

    &:first-of-type { margin-left: 0 !important; }

    @include media-breakpoint-down(md) { margin-left: 0.25rem; }

}
    

// Table
.table {

    td, th { vertical-align: middle; }
    th { text-wrap: nowrap; }

    // Top & bottom border colours
    border-color: var(--bs-border-color);
    tr:first-child > *,
    tr:last-child > * {
        border-color: inherit !important;
    }

    // Selected rows
    tr.selected {

        > * {

            color: var(--bs-body-color) !important;
            box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;

        }

        a {

            color: var(--bs-link-color) !important;

        }


    }

    thead { }
    tbody { }
    tfoot { }

    // Custom column sizes
    @mixin col-styles($min-width: null, $max-width: null) {

        $max-width: if($max-width == null, $min-width, $max-width);

        min-width: $min-width;
        max-width: $max-width;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        overflow: hidden;

    }

    $col-check: 53px;
    $col-label: 350px;
    $col-url: 500px;
    $col-date: 150px;
    $col-switch: 100px;
    $col-icon: 120px;

    .col {

        &-name { @include col-styles($col-label); }
        &-url { @include col-styles($col-url, $col-url * 2); }
        &-date { @include col-styles($col-date); }
        &-checkbox { @include col-styles($col-check); }
        &-switch { @include col-styles($col-switch); }
        &-icon { text-align: center; @include col-styles($col-icon); }
        &-icon-wide { text-align: center; @include col-styles($col-icon, $col-icon + 30px) }
        &-hex {
            text-align: center;
            @include col-styles($col-icon);

            .col-hex-icon {
                margin: 0 auto;
                width: 25px;
                height: 25px;
                border-radius: 0.25rem;
            }
        }

    }

}


// .table {

//     // color: var(--bs-body-color);

//     // // Empty table
//     // .dt-empty {

//     //     padding: 2rem 0;
//     //     border-bottom: none;

//     // } 

//     // Top & bottom border colour
//     &.dataTable > thead > tr > th,
//     &.dataTable > thead > tr > td {

//         border-bottom: 1px solid var(--bs-border-color);

//     }

//     .dt-container.dt-empty-footer tbody > tr:last-child > * {

//         border-bottom: 1px solid var(--bs-border-color);

//     }

//     // tr:hover > .dt-empty {

//     //     box-shadow: none !important;

//     // }

//     // tbody {

//     //     tr.selected > * {

//     //         color: var(--bs-body-color);
//     //         box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9);

//     //     }

//     // }

// }

