import Link from '@mui/material/Link';
import { svgIconClassnames } from '../SvgIcon';
import { styled } from '../styled';
export const StyledLink = styled(Link) `
  display: inline-flex;
  gap: ${({ theme }) => theme.spacing(1)};
  align-items: baseline;
  justify-content: flex-start;

  font-size: ${({ theme }) => theme.typography.fontSize};
  color: ${({ theme }) => theme.palette.components.link.main};
  text-decoration: none;

  &:active {
    color: ${({ theme }) => theme.palette.components.link.active};
  }

  &:visited {
    color: ${({ theme }) => theme.palette.components.link.visited};
  }

  &:hover {
    color: ${({ theme }) => theme.palette.components.link.hover};
    text-decoration: underline;
  }

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

  .${svgIconClassnames.root} {
    align-self: center;

    width: 16px;
    height: 16px;
  }
`;
