import {
  Button
} from "./chunk-FKETYVPP.js";
import {
  overflowAutoWithoutScrollbars
} from "./chunk-UO6U7AYM.js";
import {
  standardContentInsetSmPx
} from "./chunk-RFGKH3R6.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";
import {
  __spreadValues
} from "./chunk-CIGAQ47A.js";

// src/components/ButtonRow.tsx
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
function ButtonRow({
  buttons,
  className,
  smSticky = true,
  headerHeight = 0
}) {
  return /* @__PURE__ */ jsx(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map((button, idx) => /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)) }) });
}
var ButtonRowContainer = styled.div`
  max-width: 100%;
  ${({ theme }) => bp.sm(`background: ${theme.bg}`)}
  ${({ headerHeight, smSticky }) => bp.sm(
  `
        ${smSticky ? `
            display: block;
            position: sticky;
            top: ${headerHeight}px;
            margin-top: 24px;
            margin-left: -${standardContentInsetSmPx}px;
            width: calc(100% + ${standardContentInsetSmPx * 2}px);
            max-width: calc(100% + ${standardContentInsetSmPx * 2}px);
            z-index: 2;` : `position: relative;`}
        z-index: 2;
        &:before {
          content: "";
          box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.09);
          height: 1px;
          position: absolute;
          background: black;
          bottom: 1px;
          width: 100%;
          z-index: 0;
        }
      `
)}
`;
var StyledButtonRow = styled.div`
  ${overflowAutoWithoutScrollbars}
  background: ${({ theme }) => theme.bg};
  display: flex;
  position: relative;
  z-index: 1;

  & button:not(:first-of-type),
  & a:not(:first-of-type) {
    margin-left: 8px;
  }

  ${bp.sm(`
    padding: 12px;
  `)}
`;

export {
  ButtonRow,
  ButtonRowContainer
};
