import styled, { css } from 'styled-components';
import { Link as RouterLink } from 'react-router-dom';
import theme from 'styles/theme';

const Item = css`
    font-size: 14px;
    text-decoration: none;
`;

export const Wrapper = styled.div``;

export const Link = styled(RouterLink)<{ to: string }>`
    cursor: pointer;
    margin-right: 22px;
    color: #747a8c;
    :hover,
    :active {
        color: ${p => p.theme.brandHover};
    }
    ::after {
        content: '/';
        color: #747a8c;
        margin-left: 8px;
        position: absolute;
    }
    svg {
        line-height: 0;
        margin-right: 6px;

        vertical-align: -0.125em;
    }
    &&& path:first-child {
        fill: #747a8c !important;
    }
    ${Item}
`;
Link.defaultProps = { theme };
export const LastItem = styled.span`
    color: #101934;
    svg {
        line-height: 0;
        margin-right: 6px;

        vertical-align: -0.125em;
    }
    &&& path:first-child {
        fill: #101934 !important;
    }
    ${Item}
`;