import styled from "styled-components";
import Text from "../../../text";
import { currentTheme } from "../../../../theme";
export const Item = styled.li ``;
export const A = styled(Text.F1)(({ active, mobile }) => `
  text-decoration: none;
  position: relative;


  :visited {
    text-decoration: none;
  }

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

  :hover::after {
    visibility: unset;
  }

  ${active
    ? `::after {
    visibility: unset;
  }`
    : ""}

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

  ::after {
    left: -7px;
    right: unset;
    bottom: 5px;
    width: 2px;
    height: 12px;
  }
`
    : ""}

`);
//# sourceMappingURL=styled.js.map