import MuiMenu from '@mui/material/Menu';
import MuiMenuItem from '@mui/material/MenuItem';
import { styled } from '@mui/material/styles';

import { Button } from '../../button';
import { Link } from '../link';

export const StyledLearnMoreItem = styled(MuiMenuItem)(({ theme }) => ({
  padding: 0,
  height: 'auto',
  color: theme.palette.secondary[500],
  '&:not(:last-of-type)': {
    marginBottom: theme.spacing(2)
  },
  '&:last-of-type': {
    marginBottom: 0
  },
  '&:hover': {
    backgroundColor: 'unset'
  }
}));

export const StyledLearnMoreLink = styled(Link)(({ theme }) => ({
  ...theme.typography.subtitle1,
  width: '100%'
}));

export const StyledButton = styled(Button)(({ theme }) => ({
  '& .MuiButton-endIcon': {
    marginLeft: theme.spacing(0.5),
    color: theme.palette.secondary[500],
    '& > div': {
      color: 'inherit'
    }
  }
}));

export const StyledMenu = styled(MuiMenu)(({ theme }) => ({
  '& .MuiMenu-list': {
    margin: 0,
    padding: theme.spacing(2)
  }
}));