import {
  z
} from "./chunk-CLU2FRJZ.js";
import {
  colors,
  darkGradient,
  themeOr
} from "./chunk-2VBDEO6M.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";

// src/styles/common.tsx
import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { Tooltip } from "react-tooltip";
var rootFontSizePx = 12;
var rootFontSizeRems = rootFontSizePx / 16;
var standardLineHeightEms = 1.21;
var headingContentMarginPx = 30;
var standardContentInsetPx = 32;
var standardContentInsetMdPx = 24;
var standardContentInsetSmPx = 16;
var cardBorderRadiusPx = 16;
var smContentInset = css`
  ${bp.sm(`
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - ${standardContentInsetSmPx * 2}px);
  `)}
`;
var minSmMaxLgContentInset = css`
  ${bp.minSmMaxLg(`
    width: calc(100% - ${standardContentInsetMdPx * 2}px);
  `)}
`;
var standardContentInset = css`
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - ${standardContentInsetPx * 2}px);
  max-width: 1280px;

  ${smContentInset}
  ${minSmMaxLgContentInset}
`;
var standardCardShadow = css`
  box-shadow:
    0px 4px 10px 0px rgba(0, 0, 0, 0.08),
    0px 8px 24px 0px rgba(0, 0, 0, 0.04);
`;
var pageBorderRadiusPx = 16;
var pageBorderRadius = `
  border-radius: ${pageBorderRadiusPx}px;
`;
var getFocusOutline = ({
  theme,
  onBgHex
}) => `${onBgHex ? theme.hcNeutralFromBg(onBgHex) : theme.hcNeutral} dashed 1px`;
var outlineOffset = "-2px";
var standardFocusOutline = ({ theme }) => css`
  &,
  & a,
  & button {
    &:focus-visible {
      outline: ${getFocusOutline({ theme })};
      outline-offset: ${outlineOffset};
    }
  }
`;
var delta = ({
  theme,
  delta: delta2 = 0,
  invertSuccessColor = false
}) => css`
  color: ${delta2 >= 0 ? invertSuccessColor ? theme.danger : theme.success : invertSuccessColor ? theme.success : theme.danger};
  border-color: ${delta2 >= 0 ? invertSuccessColor ? theme.danger : theme.success : invertSuccessColor ? theme.success : theme.danger};
`;
var subtext = ({ theme }) => css`
  color: ${theme.c6Neutral};
  font-weight: 600;
`;
var Subtext = styled.div`
  ${subtext}
`;
var darkGradientBg = css`
  background: ${darkGradient};
`;
var StyledTooltip = styled(Tooltip)`
  z-index: ${z.modalOverlay};
`;
var overlaySurface = ({ theme }) => css`
  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })};
  border: 0.5px solid ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })};
  ${themeOr(
  "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);",
  ""
)({ theme })}
`;
var mcBold = (theme) => css`
  font-weight: 600;
  color: ${theme.mcNeutral};
`;
var mcBoldStyled = ({ theme }) => mcBold(theme);

export {
  rootFontSizePx,
  rootFontSizeRems,
  standardLineHeightEms,
  headingContentMarginPx,
  standardContentInsetPx,
  standardContentInsetMdPx,
  standardContentInsetSmPx,
  cardBorderRadiusPx,
  smContentInset,
  minSmMaxLgContentInset,
  standardContentInset,
  standardCardShadow,
  pageBorderRadiusPx,
  pageBorderRadius,
  getFocusOutline,
  outlineOffset,
  standardFocusOutline,
  delta,
  subtext,
  Subtext,
  darkGradientBg,
  StyledTooltip,
  overlaySurface,
  mcBold,
  mcBoldStyled
};
