import styled from "styled-components";
import TextBase from "../../../text";
import { currentTheme } from "../../../../theme";
import { NavLink as L } from "react-router-dom";
export const RRDLink = styled(L) `
  text-decoration: none !important;
`;
export const Item = styled.li `
  margin: 0px 25px 0px 0px;
  :last-of-type {
    margin: 0;
  }
`;
export const A = styled(TextBase.F1)(({ active, mobile }) => `
  text-decoration: none;
  position: relative;


  :visited {
    text-decoration: none;
  }

  ::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -23px;
    visibility: hidden;
    width: 100%;
    height: 4px;
    background: ${currentTheme.colors.primary};
  }

  :hover::after {
    visibility: unset;
  }

  ${active
    ? `
      color: ${currentTheme.colors.primary};
      ::after {
        visibility: unset;
      }`
    : ""}

  ${mobile
    ? `
  color: ${currentTheme.colors.primary};

  ::after {
    left: -7px;
    right: unset;
    bottom: 5px;
    width: 2px;
    height: 12px;
  }
`
    : ""}
  @media (max-width: 1023px) {
    ::after {
      bottom: -6px;
    }
  }
`);
//# sourceMappingURL=styled.js.map