@use '@koobiq/components/core/styles/common/tokens';

@mixin core() {
    .ic-table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        border-spacing: 0;

        &.ic-table_layout-fixed {
            table-layout: fixed;
        }

        > thead {
            > tr {
                > th {
                    @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

                    padding-top: 7px;
                    padding-bottom: 7px;
                    color: var(--kbq-foreground-contrast-secondary);
                    font-weight: normal;
                    border-bottom: 1px solid var(--kbq-line-contrast-less);
                }
            }
        }

        > tbody {
            > tr {
                &:hover {
                    background: var(--kbq-states-background-transparent-hover);
                }

                > th {
                    @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

                    color: var(--kbq-foreground-contrast-secondary);
                }
            }
        }

        > thead,
        > tbody,
        > tfoot {
            /* stylelint-disable-next-line no-descending-specificity */
            > tr {
                > th,
                > td {
                    padding: 3px 8px;
                    font-weight: normal;
                    text-align: left;
                    vertical-align: baseline;
                }

                > th:first-child,
                > td:first-child {
                    padding-left: 16px !important;
                }

                > th:last-child,
                > td:last-child {
                    padding-right: 16px !important;
                }
            }
        }

        &.ic-table_bordered {
            > tbody > tr:not(:first-child) {
                & th,
                & td {
                    border-top: 1px solid var(--kbq-line-contrast-less);
                    border-bottom: 1px solid transparent;
                }
            }
        }
    }
}