import { text } from '@planview/pv-utilities'
import styled from 'styled-components'

export const GridContainer = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* This is a safety mechanism so the grid will always virtualize when there are many rows */
    max-height: 15000px;
    contain: layout paint style;
    display: flex;
    flex-direction: column;
`

export const GridStickySignal = styled.div`
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
`

export const ListWrap = styled.div<{ $disableHorizontalScroll: boolean }>`
    overflow: auto;
    ${(props) => props.$disableHorizontalScroll && 'overflow-x: hidden;'}
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    contain: layout style;

    &:focus {
        outline: none;
    }

    padding-top: var(--grid-scroll-head, 0);
    padding-bottom: var(--grid-scroll-tail, 0);
`

export const GridLayout = styled.table`
    ${text.regular};
    display: flex;
    flex-direction: column;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    position: relative;

    * {
        box-sizing: border-box;
    }

    td,
    th {
        text-align: left;
        margin: 0;
        padding: 0;
        min-width: 0;
    }
`