import { jsx as _jsx } from "react/jsx-runtime";
import { transparentize } from 'polished';
import {} from 'react';
import styled from '@darajs/styled-components';
import Link, {} from './link';
const StyledLink = styled(Link) `
    cursor: pointer;

    display: flex;
    gap: 0.5rem;
    align-items: center;

    width: auto;
    height: 3rem;
    padding: 0 1rem;

    font-size: 0.875rem;
    font-weight: 700;
    color: ${(props) => props.theme.colors.secondary};
    text-decoration: none;

    border-radius: 1rem;

    :hover {
        background: ${(props) => transparentize(0.9, props.theme.colors.secondary)};
    }

    :active {
        background: ${(props) => transparentize(0.8, props.theme.colors.secondary)};
    }

    svg {
        margin-right: 0.6rem;
        color: ${(props) => props.theme.colors.blue1};
    }

    &[aria-current] {
        color: ${(props) => props.theme.colors.blue1};
        background-color: ${(props) => props.theme.colors.secondary};
    }
`;
export default function MenuLink(props) {
    return _jsx(StyledLink, Object.assign({}, props, { children: props.children }));
}
//# sourceMappingURL=menu-link.js.map