{"size": 686, "ext": "js", "max_stars_repo_path": "src/components/VisualComponents/MainNavBtn/MainNavBtn.js", "max_stars_repo_name": "wmsonic/pizza-master", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/VisualComponents/MainNavBtn/MainNavBtn.js", "max_issues_repo_name": "wmsonic/pizza-master", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/VisualComponents/MainNavBtn/MainNavBtn.js", "max_forks_repo_name": "wmsonic/pizza-master", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.1764705882, "max_line_length": 40, "alphanum_fraction": 0.5510204082}
import styled from 'styled-components'
import { Link } from "react-router-dom";

const darkRed = "rgb(221, 4, 38)";
const activeRed = "rgb(241, 80, 104)";

const MainNavBtn = styled(Link)`
    position: relative;
    color: ${darkRed};
    margin: 0.5em 1em;
    padding: 0.25em 1em;
    text-align: center;
    transition: all ease-in .2s;

    &:after{
        position: absolute;
        display: block;
        height:2px;
        background-color: ${darkRed};
        width: 0%;
        content: "";
        transition: width ease-out .3s;
    }

    &:hover{
        color: ${activeRed};
        &:after{
            width: 80%;
        }
    }
    
`;

export default MainNavBtn;