import r, { css as e } from "styled-components";
import { getFontSize as n, getColorAlias as o, getSpacing as t, convertToTransientProps as c } from "../../utils/index.js";
import { getLinkColor as s } from "./utils.js";
const $ = r.a`
  display: ${({ type: i }) => i === "inline" ? "inline-block" : "block"};
  color: ${({ variant: i }) => i && s(i)};
  width: fit-content;
  ${({ size: i }) => i === "small" ? n("size14") : n("size16")};
  font-weight: ${({ bold: i, theme: l }) => i && l.font.weightBold};
  text-decoration: ${({ underlined: i }) => i ? "underline" : "none"};

  &:hover,
  &:active {
    text-decoration: ${({ underlined: i }) => i ? "none" : "underline"};
  }

  &:focus-within,
  &:focus,
  &:focus-visible,
  &:active {
    outline: none;
    border-color: ${o("focusOuter")};
    box-shadow: 0 0 0 2px ${o("contentLinkDistinct")};
    border-radius: ${(i) => i.theme.radius.roundedA};
  }

  &:visited {
    color: ${o("contentLinkVisited")};

    svg {
      fill: ${o("contentLinkVisited")};
    }
  }
`, g = r.div.withConfig({
  shouldForwardProp: c([
    "iconModifiers"
  ])
})`
  display: flex;
  align-items: center;
  flex-direction: ${({ iconModifiers: i }) => i === "leading" && "row-reverse"};

  svg {
    fill: ${({ variant: i }) => i && s(i)};

    ${({ iconModifiers: i }) => i === "trailing" ? e`
            margin: 0 0 0 ${t("s01")};
          ` : e`
            margin: 0 ${t("s01")} 0 0;
          `}
  }
`;
export {
  g as LinkContent,
  $ as LinkWrapper
};
