import { Combobox } from '@planview/pv-uikit'
import type { zindex } from '@planview/pv-utilities'
import styled, { css } from 'styled-components'

export const StyledCombobox = styled(Combobox)<{ $height?: number }>`
    height: 100%;
    ${(props) =>
        props.$height != null &&
        css`
            min-height: ${props.$height}px;
        `}
    flex: 1 1 auto;

    input {
        flex: 1 1 auto;
        border-radius: 0;
        height: 100%;
    }
`

export const Wrapper = styled.div`
    height: 100%;
`

export const AnchoredContainer = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
`

export const AnchoredContainerPortal = styled.div<{
    theme: zindex.ZIndexThemeRecord
}>`
    z-index: ${(props) => props.theme.zindex};
    max-width: 400px;
    width: max-content;
`