import r, { css as e } from "styled-components";
import { getSpacing as s, getColorAlias as o, convertToTransientProps as l, getFontSize as a } from "../../utils/index.js";
const g = r.div`
  display: flex;
  align-items: center;
  justify-content: center;
`, p = r(g).withConfig({
  shouldForwardProp: l(["isSubtle"])
})`
  svg {
    height: ${s("s04")};
    width: ${s("s04")};
    margin-right: ${s("s01")};
    fill: ${o("contentLight")};
  }
`, c = r(g).withConfig({
  shouldForwardProp: l(["isSubtle"])
})`
  border-radius: ${({ size: t, theme: n }) => t === "large" ? n.radius.roundedB : n.radius.roundedA};
  width: fit-content;
  height: fit-content;
  padding: ${({ size: t, theme: n }) => t === "large" ? ` 2px ${n.spacing.s01}` : ` ${n.spacing.s00} ${n.spacing.s01}`};
  color: ${o("contentLight")};
  text-align: center;
  font-family: ${(t) => t.theme.font.familyPrimary};
  font-weight: ${(t) => t.theme.font.weightRegular};
  letter-spacing: ${s("s00")};
  ${({ size: t }) => t === "small" ? e`
          ${a("size12")};
        ` : e`
          ${a("size14")};
        `}
`, i = r(c)`
  color: ${o("contentDefault")};
  svg {
    fill: ${o("contentDefault")};
  }
`, d = r(c)(
  (t) => t.isSubtle ? e`
        background-color: ${o("containerStrong")};
        color: ${o("contentDefault")};
        svg {
          fill: ${o("contentDefault")};
        }
      ` : e`
        background-color: ${o("containerInverse")};
        color: ${o("contentInverse")};
        svg {
          fill: ${o("contentInverse")};
        }
      `
), f = r(c)`
  background-color: ${({ isSubtle: t }) => t ? e`
          ${o("supportPositive02")}
        ` : e`
          ${o("supportPositive")}
        `};
  ${({ theme: t, isSubtle: n }) => n && t.mode === "light" && e`
      color: ${o("supportPositive")};
      svg {
        fill: ${o("supportPositive")};
      }
    `};
`, v = r(c)`
  background-color: ${({ isSubtle: t }) => t ? e`
          ${o("supportError02")}
        ` : e`
          ${o("supportError")}
        `};
  ${({ theme: t, isSubtle: n }) => n && t.mode === "light" && e`
      color: ${o("supportError")};
      svg {
        fill: ${o("supportError")};
      }
    `};
`, b = r(i)`
  background-color: ${o("supportInfo02")};
`, h = r(i)`
  background-color: ${o("supportWarning02")};
`, T = r(i)`
  background-color: ${o("supportBrand02")};
`, m = r(i)`
  background: none;
`, k = r(i)`
  background-color: ${o("containerDefault")};
`, P = r(i)`
  background: none;
  border: 1px solid ${o("borderStrong")};
`;
export {
  g as FlexDiv,
  p as IconWrapper,
  c as Tag,
  T as TagBrand,
  v as TagError,
  m as TagGhost,
  b as TagInfo,
  d as TagNeutral,
  k as TagNeutralAlternative,
  P as TagOutline,
  f as TagPositive,
  i as TagSubtle,
  h as TagWarning
};
