import { styled } from '@mui/material';
import { Table, TableRow, TableContainer, TableHead } from '@mui/material';

export const StyledTable = styled(Table)({
  borderCollapse: 'separate',
  borderSpacing: '0 12px',
  '& .MuiTableCell-root': {
    borderBottom: 'none',
  },
});

export const StyledTableContainer = styled(TableContainer)({
  padding: '0 1px',
  maxHeight: 'calc(40rem - 10rem)',
  overflowY: 'auto',
  '& table': {
    marginTop: '-11px',
  },
  '&::-webkit-scrollbar': {
    width: '0.25rem',
  },
  '&::-webkit-scrollbar-track': {
    background: 'var(--GreyLight, rgba(243, 243, 245, 1))',
    borderRadius: '0.25rem',
  },
  '&::-webkit-scrollbar-thumb': {
    background: 'var(--GreyDark, rgba(74, 85, 101, 0.3))',
    borderRadius: '0.25rem',
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: 'var(--GreyDark, rgba(74, 85, 101, 0.5))',
  },
});

export const StyledTableHead = styled(TableHead)({
  position: 'sticky',
  top: '1px',
  zIndex: 2,
  backgroundColor: 'white',
});

export const StyledTableHeadRow = styled(TableRow)({
  background: 'var(--GreyLight, rgba(243, 243, 245, 1))',
  boxShadow: '0 0 0 1px var(--Table-Stroke, #D1D5DC)',
  borderRadius: '0.5rem',
  height: '1.75rem',
  '& th': {
    border: 'none',
    padding: '0.38rem 0.75rem',
    background: 'var(--GreyLight, rgba(243, 243, 245, 1)) !important',
    color: 'var(--Grey, rgba(74, 85, 101, 1))',
    height: '1.75rem',
    '&:first-of-type': {
      borderTopLeftRadius: '0.5rem',
      borderBottomLeftRadius: '0.5rem',
    },
    '&:last-of-type': {
      borderTopRightRadius: '0.5rem',
      borderBottomRightRadius: '0.5rem',
    },
  },
});

export const StyledTableRow = styled(TableRow)({
  background: 'var(--White, rgba(255, 255, 255, 1))',
  minHeight: '3.5rem',
  boxShadow: '0 0 0 1px var(--Stroke, rgba(0, 0, 0, 0.1))',
  borderRadius: '0.5rem',
  '&:hover': {
    boxShadow:
      '0 0 0 1px var(--Stroke, rgba(0, 0, 0, 0.1)), 0 2px 4px rgba(0, 0, 0, 0.1)',
  },
  '& td': {
    border: 'none',
    padding: '0.75rem',
    background: 'var(--White, rgba(255, 255, 255, 1))',
    '&:first-of-type': {
      borderTopLeftRadius: '0.5rem',
      borderBottomLeftRadius: '0.5rem',
    },
    '&:last-of-type': {
      borderTopRightRadius: '0.5rem',
      borderBottomRightRadius: '0.5rem',
    },
  },
});
