import Breadcrumbs from '@mui/material/Breadcrumbs';
import { buttonBaseClasses } from '@mui/material/ButtonBase';
import { linkClasses } from '@mui/material/Link';
import { styled } from '../styled';
export const StyledBreadcrumbs = styled(Breadcrumbs) `
  .${buttonBaseClasses.root} {
    align-items: end;

    min-height: 20px;

    border-radius: ${({ theme }) => theme.shape.medium};

    &:focus-visible {
      outline: 2px solid ${({ theme }) => theme.palette.components.focused};
    }

    &:hover {
      &::after {
        content: '';

        position: absolute;
        bottom: 3px;
        left: ${({ theme }) => theme.microSpacing(3)};

        width: ${({ theme }) => theme.spacing(3)};
        height: 1px;

        background-color: currentColor;
      }
    }
  }
  
  .MuiTypography-body1 {
    color: ${({ theme }) => theme.palette.primary[800]};
  }

  .${linkClasses.root} {
    color: ${({ theme }) => theme.palette.grey[700]};

    &:visited {
      color: ${({ theme }) => theme.palette.grey[700]};
    }
    
    &:hover {
      color: ${({ theme }) => theme.palette.grey[800]};
    }
  }
`;
