/**
 * External dependencies
 */
import styled from '@emotion/styled';
import { NavLink } from 'react-router-dom';

export const SolidwpMailRoot = styled.div`
	padding: ${ ( { theme } ) => theme.spacing.root };
	max-width: 1680px;
	margin: 0 auto;
	width: 100%;

	@media ( max-width: ${ ( { theme } ) => `${ theme.breaks.medium }px` } ) {
		padding-left: 0;
		padding-right: 10px;
	}
`;
export const Navigation = styled.nav`
	border-bottom: solid 1px ${ ( { theme } ) => theme.colors.border.normal };
	display: flex;
	margin-top: ${ ( { theme } ) => theme.spacing.section };
`;

export const StyledNavLink = styled( NavLink )`
	text-decoration: none;
	padding: 0.75rem 1.25rem;
	border-bottom: 4px solid transparent;

	&.active,
	&:hover {
		color: ${ ( { theme } ) => theme.colors.solidwp_mail.primary };
		border-bottom: solid 4px
			${ ( { theme } ) => theme.colors.solidwp_mail.primary };
	}
`;