.TableSearch {
    padding: 0 var(--size-100);
    &.large {
        padding: 0 var(--size-200);
    }
}
.TableComponent {
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--foreground-neutral);
    // border-collapse: separate;
    border-spacing: 0px;
    *:focus-visible {
        box-shadow: var(--focus);
        outline: none;
    }
    &.fluid {
        width: 100%;
        flex: 1;
    }
    .TableFooter {
        margin-top: var(--size-200);
        padding: 0 var(--size-100);
    }
    &.large {
        th,
        td {
            padding: var(--size-200);
            line-height: 1.6;
        }
        & + .TableFooter {
            padding: 0 var(--size-200);
        }
    }
    &.align {
        &-center {
            tr td {
                vertical-align: middle;
            }
        }
        &-start {
            tr td {
                vertical-align: top;
            }
        }
        &-end {
            tr td {
                vertical-align: bottom;
            }
        }
    }
    thead {
        font-family: var(--font-body-bold);
        font-size: 14px;
        tr {
            th {
                padding: var(--size-100);
                text-align: left;
                font-size: 12px;
                line-height: 12px;
                color: var(--foreground-neutral-placeholder);
                vertical-align: middle;
                &.hoverable {
                    &:hover {
                        transition: 250ms ease 0s;
                        background-color: var(--background-neutral);
                    }
                }
                svg {
                    vertical-align: middle;
                    color: currentColor;
                }
                &:last-child {
                    // white-space: nowrap;
                    // width: 32px;
                }
                .sortable .sort-indicator {
                    visibility: hidden;
                }

                .sortable:hover .sort-indicator {
                    visibility: visible;
                }
            }
        }
    }
    tbody {
        tr {
            td {
                border-top: 1px solid var(--border-neutral-subtle);
                padding: var(--size-100);
                text-align: left;
                line-height: 1.6;
                width: auto;
                button.icon-button,
                button.button {
                    margin: auto;
                }
                > * {
                    margin: 0;
                }
                &:last-child {
                    // white-space: nowrap;
                    // width: 32px;
                }
            }
        }
    }
    .pagination {
        margin-left: auto;
    }
    &.hoverable {
        tbody {
            tr {
                &:hover {
                    transition: 250ms ease 0s;
                    background-color: var(--background-neutral);
                }
            }
        }
    }
    &.fullBorder {
        tbody {
            tr {
                td {
                    border: 1px solid var(--border-neutral-subtle);
                }

                // &:first-child {
                //     td:first-child {
                //         border-top-left-radius: var(--size-100);
                //     }
                //     td:last-child {
                //         border-top-right-radius: var(--size-100);
                //     }
                // }
                // &:last-child {
                //     td:first-child {
                //         border-bottom-left-radius: var(--size-100);
                //     }
                //     td:last-child {
                //         border-bottom-right-radius: var(--size-100);
                //     }
                // }
            }
        }
    }
}