import { styled as muiStyled } from '@mui/material'
import styled from 'styled-components'

export const headerHeight = '96px'
export const sideNavWidth = '220px'

export const StyledLayoutContainer = styled.div`
  & > div {
  }
`

export const StyledHeaderContainer = styled.header`
  z-index: 300;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  min-height: ${headerHeight};
  background: #fff;
  box-shadow: 0px 0px 3px #0000001a;
  & > div {
    height: ${headerHeight};
  }
`

export const StyledLeftNavContainer = muiStyled('aside')(({ theme }) => ({
  width: sideNavWidth,
  background: theme.palette.secondary.main,
  color: 'white',
  borderRadius: '8px 0px 0px 8px',
  overflowY: 'scroll',
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(255, 255, 255, 0.3)',
    borderRadius: '3px',

    '&:hover': {
      background: 'rgba(255, 255, 255, 0.4)',
    },
  },
}))

export const StyledMainContentContainer = muiStyled('main')(() => ({
  width: '100%',
  overflowY: 'scroll',
  '&::-webkit-scrollbar': {
    width: '0.4em',
    height: '0.4em',
  },

  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    borderRadius: '3px',
    '&:hover': {
      background: 'rgba(0,0,0, 0.4)',
    },
  },
}))
