import o, { keyframes as r, css as t } from "styled-components";
import { getFontSize as n, getColorAlias as e, getSpacing as a, convertToTransientProps as d } from "../../utils/index.js";
const s = r`
    from {
        opacity: 0;
    }
    to {
        opacity: 0.85;
    }
`, c = r`
    from {
        opacity: 0.85;
    }
    to {
        opacity: 0;
    }
`, p = o.div`
  font-family: ${(i) => i.theme.font.familyPrimary};
  cursor: default;
  span {
    cursor: pointer;
  }
`, h = o.div`
  font-weight: ${(i) => i.theme.font.weightBold};
`, u = o.div.withConfig({
  shouldForwardProp: d([
    "isVisible",
    "isManual",
    "nonStaticWidth"
  ])
})`
  display: flex;
  position: relative;
  flex-direction: column;
  ${(i) => i.variant === "icon" ? n("size12") : n("size14")};
  background-color: ${e("containerInverse")};
  opacity: 0.85;
  color: ${e("contentInverse")};
  width: ${(i) => i.nonStaticWidth ? "100%" : "auto"};
  border-radius: ${(i) => i.variant === "icon" ? `${i.theme.radius.roundedE} ${i.theme.radius.roundedE}` : i.theme.radius.roundedB};
  ${(i) => i.width && i.variant === "definition" && !i.nonStaticWidth && t`
      width: ${i.width};
      max-width: 280px;
      min-width: 160px;
    `};
  padding: ${(i) => i.variant === "icon" ? t`
          ${a("s01", "s03")}
        ` : t`
          ${a("s02", "s03")}
        `};
  ${(i) => i.isManual && t`
      padding-right: 40px;
    `}

  @media(max-width: 600px) {
    ${(i) => i.variant === "icon" && t`
        padding: 6px 12px;
        ${n("size14")};
      `}
  }

  z-index: 999;
  animation: ${(i) => i.isVisible ? s : c}
    ${(i) => i.theme.motion.speed.defaultM} ease-in-out;
`, f = o.span`
  position: absolute;
  top: 0px;
  right: 4px;
  cursor: pointer;
  svg {
    fill: ${e("contentInverse")};
  }
`;
export {
  f as CloseIconContainer,
  u as PopoverContainer,
  h as TooltipTitle,
  p as Wrapper
};
