﻿.custom-grid {
    border: 1px solid;

    .container {
        overflow: auto;
    }

    .flag {
        vertical-align: middle;
    }

    ::deep {
        table {
            border-spacing: 0;
        }

        tr {
            height: 42px;

            &:nth-child(even) {
                background: var(--bit-clr-bg-sec);
            }

            &:nth-child(odd) {
                background: var(--bit-clr-bg-pri);
            }
        }

        th {
            border-bottom: 1px solid;
            background-color: var(--bit-clr-bg-sec);
            border-bottom-color: var(--bit-clr-brd-sec);

            &:not(:last-child) {
                border-right: 1px solid;
                border-right-color: var(--bit-clr-brd-sec);
            }
        }

        td {
            border-bottom: 1px solid var(--bit-clr-brd-sec);

            &:not(:last-child) {
                border-right: 1px solid var(--bit-clr-brd-sec);
            }
        }

        .bit-dtg-drg::after {
            border-left: unset;
        }

        .wide {
            width: 220px;
        }
    }
}

.grid {
    height: 15rem;
    overflow-y: auto;

    ::deep {
        thead {
            top: 0;
            z-index: 1;
            position: sticky;
            background-color: var(--bit-clr-bg-sec);
        }

        tr {
            height: 2rem;
        }

        td {
            max-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.search-panel {
    max-width: 15rem;
    margin-top: 2rem;
}

.responsive-grid {
    ::deep {
        table {
            border-collapse: collapse;
        }

        tr {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid var(--bit-clr-brd-sec);
        }

        @media (max-width: 600px) {
            table {
                width: 100%;
            }

            table, thead, tbody, th, td, tr, td {
                display: block;
            }

            thead tr {
                display: none;
            }

            td::before {
                font-weight: bold;
                content: attr(data-title) " : ";
            }
        }
    }
}
