import styled from "styled-components";
import { composeStyle as comp } from "../../util";
export const Wrapper = styled.div(({ theme: { mediaMobile, mediaTablet, wrapperMargin, wrapperMarginMobile }, }) => `
  display: flex;
  ${wrapperMargin ? `margin: ${wrapperMargin};` : ""}

  @media(${mediaTablet}) {
    flex-direction: column;
    align-items: center;
    ${wrapperMarginMobile ? `margin: ${wrapperMarginMobile};` : ""}
  }
`);
export const Link = styled.a(({ active, inverted, theme: { mediaTablet, mediaLaptop, linkFontFamily, linkFontSize, linkColor, linkInvertedColor, linkPadding, linkMargin, linkActiveBorder, linkMarginMobile, }, }) => `
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    width: fit-content;
    display: block;
    :visited {
      text-decoration: none;
    }
    ${comp("font-family", linkFontFamily)}
    ${comp("font-size", linkFontSize)}
    ${comp("line-height", linkFontSize)}
    ${comp("color", inverted ? linkInvertedColor : linkColor)}
    ${comp("padding", linkPadding)}
    ${comp("margin", linkMargin)}
    ${active && comp("border", linkActiveBorder)}

    @media(${mediaLaptop}) {
      margin: 0;
      ${linkFontSize ? `font-size: 12px;` : ""}
    }

    @media(${mediaTablet}) {
      ${linkMarginMobile ? `margin: ${linkMarginMobile};` : ""}
      ${linkFontSize ? `font-size: ${linkFontSize};` : ""}
    }
  `);
//# sourceMappingURL=styled.js.map