import { bp } from "./breakpoints.js";
import { darkGradient } from "./colors.js";
import { themeOr } from "./themes.js";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
//#region src/styles/common.tsx
const rootFontSizePx = 12;
const rootFontSizeRems = 12 / 16;
const standardLineHeightEms = 1.21;
const headingContentMarginPx = 30;
function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx, smDontAdjustWidth = false) {
	const smCSS = css`
    ${bp.sm(`
      margin-left: auto;
      margin-right: auto;
      width: ${smDontAdjustWidth ? "100%" : `calc(100% - ${smPx * 2}px)`};
    `)}
  `;
	const minSmMaxLgCSS = css`
    ${bp.minSmMaxLg(`
      margin-left: auto;
      margin-right: auto;
      width: calc(100% - ${minSmMaxLgPx * 2}px);
    `)}
  `;
	const lgCSS = css`
    ${bp.lg(`
      margin-left: auto;
      margin-right: auto;
      width: calc(100% - ${lgPx * 2}px);
      max-width: 1280px;
    `)}
  `;
	return {
		smPx,
		minSmMaxLgPx,
		lgPx,
		smCSS,
		minSmMaxLgCSS,
		lgCSS,
		css: css`
      ${lgCSS}
      ${smCSS}
      ${minSmMaxLgCSS}
    `
	};
}
const standardContentInset = buildStandardContentInset(16, 24, 32);
const cardBorderRadiusPx = 16;
const standardBorderRadius = (radius) => {
	return `
    border-radius: ${Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`};
  `;
};
const standardCardShadow = css`
  box-shadow:
    0px 4px 10px 0px rgba(0, 0, 0, 0.08),
    0px 8px 24px 0px rgba(0, 0, 0, 0.04);
`;
const standardCardShadowHard = css`
  box-shadow:
    0px 24px 24px -12px rgba(0, 0, 0, 0.06),
    0px 12px 12px -6px rgba(0, 0, 0, 0.06),
    0px 6px 6px -3px rgba(0, 0, 0, 0.06),
    0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
    0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
    0px 0px 0px 1px rgba(0, 0, 0, 0.06);
`;
const pageBorderRadiusPx = 16;
const pageBorderRadius = `
  border-radius: 16px;
`;
const getFocusOutline = ({ theme, onBgHex }) => `${onBgHex ? theme.hcNeutralFromBg(onBgHex) : theme.hcNeutral} dashed 1px`;
const outlineOffset = "-2px";
const standardFocusOutline = ({ theme }) => css`
  &,
  & a,
  & button {
    &:focus-visible {
      outline: ${getFocusOutline({ theme })};
      outline-offset: ${outlineOffset};
    }
  }
`;
const delta = ({ theme, delta = 0, invertSuccessColor = false }) => css`
  color: ${delta >= 0 ? invertSuccessColor ? theme.danger : theme.success : invertSuccessColor ? theme.success : theme.danger};
  border-color: ${delta >= 0 ? invertSuccessColor ? theme.danger : theme.success : invertSuccessColor ? theme.success : theme.danger};
`;
const subtext = ({ theme }) => css`
  color: ${theme.c6Neutral};
  font-weight: 600;
`;
const Subtext = styled.div`
  ${subtext}
`;
const darkGradientBg = css`
  background: ${darkGradient};
`;
const overlaySurfaceBorderColor = ({ theme, important = false }) => css`
  border-color: ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })}
    ${important ? "!important" : ""};
`;
const overlaySurface = ({ theme, important = false, border = true }) => css`
  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
    ${important ? "!important" : ""};
  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
  ${overlaySurfaceBorderColor({
	theme,
	important
})};
  ${themeOr(`box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`, "")({ theme })}
`;
const mcBold = (theme) => css`
  font-weight: 600;
  color: ${theme.mcNeutral};
`;
const mcBoldStyled = ({ theme }) => mcBold(theme);
//#endregion
export { Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, standardBorderRadius, standardCardShadow, standardCardShadowHard, standardContentInset, standardFocusOutline, standardLineHeightEms, subtext };
