// // ** MUI Imports
// import { styled } from '@mui/material/styles'
// import Box, { BoxProps } from '@mui/material/Box'

// // ** Hook Import
// import { useSettings } from 'src/@core/hooks/useSettings'

// const ReactHotToast = styled(Box)<BoxProps>(({ theme }) => {
//   // ** Hook & Var
//   const { settings } = useSettings()
//   const { layout, navHidden } = settings

//   return {
//     '& > div': {
//       left: `${theme.spacing(6)} !important`,
//       right: `${theme.spacing(6)} !important`,
//       bottom: `${theme.spacing(6)} !important`,
//       zIndex: `${theme.zIndex.drawer - 1} !important`,
//       top: layout === 'horizontal' && !navHidden ? '139px !important' : '75px !important'
//     },
//     '& .react-hot-toast': {
//       fontWeight: 400,
//       fontSize: '1rem',
//       letterSpacing: '0.14px',
//       boxShadow: theme.shadows[4],
//       color: theme.palette.text.primary,
//       borderRadius: theme.shape.borderRadius,
//       background: theme.palette.background.paper,
//       '&>:first-of-type:not([role])>:first-of-type': {
//         width: 14,
//         height: 14
//       }
//     }
//   }
// })

// export default ReactHotToast

// changes sagar //////////////
// ** MUI Imports
import { styled } from '@mui/material/styles'
import Box, { BoxProps } from '@mui/material/Box'

// ** Hook Import
import { useSettings } from 'src/@core/hooks/useSettings'

const ReactHotToast = styled(Box)<BoxProps>(({ theme }) => {
  // ** Hook & Var
  const { settings } = useSettings()
  const { layout, navHidden } = settings

  return {
    '& > div': {
      left: `${theme.spacing(6)} !important`,
      right: `${theme.spacing(6)} !important`,
      bottom: `${theme.spacing(6)} !important`,

      // NOTE: was `${theme.zIndex.drawer - 1}` (≈1199), which sits BELOW
      // theme.zIndex.modal (1300) — the z-index MUI Dialog/Backdrop uses.
      // That's why toasts always rendered behind an open Dialog, and why
      // passing `containerStyle`/inline styles on <Toaster /> never fixed
      // it: `!important` here always wins over an inline style regardless
      // of the value passed in. Using theme.zIndex.tooltip (default 1500,
      // the highest layer MUI defines) guarantees toasts sit above every
      // Dialog, Modal, Drawer, Popover, and Tooltip in the app.
      zIndex: `${theme.zIndex.tooltip + 1} !important`,
      top: layout === 'horizontal' && !navHidden ? '139px !important' : '75px !important'
    },
    '& .react-hot-toast': {
      fontWeight: 400,
      fontSize: '1rem',
      letterSpacing: '0.14px',
      boxShadow: theme.shadows[4],
      color: theme.palette.text.primary,
      borderRadius: theme.shape.borderRadius,
      background: theme.palette.background.paper,
      '&>:first-of-type:not([role])>:first-of-type': {
        width: 14,
        height: 14
      }
    }
  }
})

export default ReactHotToast