personal-website/components/MDXButton/styles.tsx

import Link from 'next/link';
import styled, { css } from 'styled-components';
import { Props } from './types';

export const sharedStyles = css<Props>`
	cursor: pointer;
	display: ${({ variant }) =>
		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
	width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
	background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
	color: ${({ variant, mode }) =>
		variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
	border: ${({ variant, mode }) =>
		variant === 'outline' ? `2px solid ${mode === 'dark' ? 'white' : 'black'}` : 'none'};
	font-weight: bold;
	font-size: ${({ variant }) =>
		['action', 'outline'].includes(variant as string) ? '1.05rem' : 'inherit'};
	text-transform: ${({ variant }) =>
		['action', 'outline'].includes(variant as string) ? 'uppercase' : 'inherit'};
	padding: ${({ variant }) =>
		['action', 'outline'].includes(variant as string) ? '.5rem 1rem' : '0rem'};
	text-align: ${({ variant }) =>
		['action', 'outline'].includes(variant as string) ? 'center' : 'left'};
	text-decoration: none;
	transition: color 250ms ease-in-out;

	${({ disabled }) => disabled && `
		background: gray;
		cursor: default;
	`}

	@media (max-width: 768px) {
		padding: ${({ variant }) =>
			['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
	}
`;

export const StyledLink = styled(Link)<Props>`
	${sharedStyles}
`;

export const StyledButton = styled.button<Omit<Props, 'href'>>`
	${sharedStyles}
`;