import { Box,styled } from "@mui/material";

export const ProductList = styled(Box)({
    "@media (max-width: 1200px)": {
        height:'100%', 
    },
    "@media (max-width: 900px)": {
        display:'flex',
        width:'100%', 
        height:'108px',
        overflowY:'auto', 
        paddingRight:'12px', 
    },
   '& .MuiStack-root':{
        paddingRight:'16px',
        borderRight:'1px solid #DCDCDC',
        minHeight:'285px',
        "@media (max-width: 1200px)": {
            minHeight:'auto',
            height:'100%', 
            width:'100%',
        },
        "@media (max-width: 899px)": {
            padding:'0',
            borderRight:'0',
        },
        
    '& .MuiPaper-root':{
        boxShadow:'none',
        fontSize:'14px',
        cursor:'pointer',
        position:'relative',
        borderRadius:'6px',
        transition:'all ease .3s',
        marginBottom:'1px',
        whiteSpace:'nowrap',
        '&:after':{
            content:'" "',
            width:'0',
            height: '0', 
            borderTop: '8px solid transparent',
            borderBottom: '8px solid transparent',  
            borderLeft: '8px solid #D7282F',
            display:'inline-block',
            position:'absolute',
            left:'100%',    
            top:'50%',
            transform:'translate(0px, -50%)',
            opacity:'0',
            transition:'all ease .3s',
            "@media (max-width:900px)": {
                display:'none', 
            },
        },
        '&:hover':{
            backgroundColor:'#D7282F',
            color:'white',
            '&:after':{
                opacity:'1',
            },
        },
        '&.active':{
            backgroundColor:'#D7282F',
            color:'white',
            position:'sticky',
            top:'0',
            zIndex:'4',
           
            '&:after':{
                opacity:'1',
            },
        },
    },
   },
});
export const SubListing = styled(Box)({
    padding:'16px',
    borderRadius:'12px',
    border:'1px solid transparent',
    cursor:'pointer',
    height:'100%',
    '&:hover':{
        borderColor:'#FFBFC2',
    },
    '&.active':{
        borderColor:'#FFBFC2',
    },
    '& img':{
        maxWidth:'44px',
        height:'auto',
        "@media (max-width: 1050px)": {
            maxWidth:'100%',
        },
        "@media (max-width: 900px)": {
            maxWidth:'38px',
        },
    },
    '& .MuiTypography-h6':{
        fontSize:'16px',
        color:'#D7282F',
        fontWeight:'600',
        "@media (min-width: 1200px) and (max-width: 1800px)": {
            padding:'0 0 0 10px',
        },
    },
    '& .MuiTypography-body2':{
        fontSize:'12px',
        color:'#4A4A4A', 
        paddingRight:'0%',
        "@media (min-width: 1200px) and (max-width: 1800px)": {
            padding:'0 0 0 10px',
        },
    },

});
export const SubDescription = styled(Box)({
    '& .MuiTypography-h6':{
        fontSize:'16px',
        fontWeight:'500',
        marginTop:'12px',
        cursor:'pointer',
        '&:hover':{
            color:'#D7282F',
        },
    },
    '& .MuiTypography-body2':{
        fontSize:'12px',
        lineHeight:'20px',
        color:'#4A4A4A',
    },
});
export const ThumbImg = styled(Box)({
    borderRadius:'8px',
    overflow:'hidden',
    height:'105px',
    '& img':{
        height:'105px',
        objectFit:'cover',
        width:'100%',
    },
});