@use "sass:math";
@use '../variables.scss' as var;
@use '../utils/mediaQueries.scss' as media;

@mixin SnTable {
    .#{var.$classPrefix}Table-wrapper {
        overflow-y: auto;
    }

    .#{var.$classPrefix}Table {
        width: 100%;
        border: 1px solid var(--border-color);
        border-radius: var.$borderRadiusBase;
        border-collapse: separate;
        border-spacing: 0;

        thead,
        tbody,
        tfoot {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }

        td,
        th {
            border-bottom: 1px solid var(--border-color);
        }

        tfoot td,
        th {
            padding: 6px 4px 4px;
        }

        td {
            padding: 4px 4px;
            text-align: left;
            line-height: 1em;
        }

        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;

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

            &:last-child {
                td {
                    border-bottom: 0;
                }
            }
        }

        tfoot {
            font-weight: bold;

            tr:first-child td {
                border-top: 1px solid var(--border-color);
            }
        }

        &-action {
            display: flex;
            align-items: center;

            &>* {
                margin-right: 4px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    // ===================================================================
    // D A T A   T A B L E
    .#{var.$classPrefix}DataTable {
        &-toolbar {
            // margin-bottom: .5rem;

            @include media.from(l) {
                display: flex;
                justify-content: space-between;
            }

            .#{var.$classPrefix}Tag {
                padding: .2rem;
                background: var(--border-color);
                cursor: pointer;

                .#{var.$classPrefix}Btn {
                    line-height: math.div(var.$controlHeightSm, 1.2);
                    height: math.div(var.$controlHeightSm, 1.2);
                    width: math.div(var.$controlHeightSm, 1.2);
                    border-radius: math.div(var.$controlHeightSm, 1.2);
                    padding: 0;
                }
            }

            &-right {
                display: flex;
                justify-content: flex-end;
            }
        }

        &-pagination {
            display: flex;
            flex-direction: column;
            align-items: center;

            @include media.from(m) {
                flex-direction: row;
                justify-content: space-between;
            }

            &-center {
                margin-top: 6px;

                @include media.from(m) {
                    margin-top: 0;

                    .SnPagination {
                        margin-top: 0;
                        margin-bottom: 0;

                        &-link {
                            margin-bottom: 0;
                        }
                    }
                }
            }

            &-right,
            &-left {
                span {
                    color: var(--color1-7);
                }
            }
        }
    }

    .#{var.$classPrefix}DataTableCaption {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-left {
            white-space: nowrap;
        }

        &-right {
            margin-left: 4px;
            opacity: .3;
            cursor: pointer;

            &.sort {
                opacity: 1;
            }
        }
    }

    .#{var.$classPrefix}DataTableFilter {
        padding: .5rem !important;

        &-list {
            max-height: 250px;
            overflow: auto;

            li {
                padding: .15rem 0;
            }
        }

        &-footer {
            display: flex;
            margin-top: .5rem;
        }
    }
}