import {
  Button
} from "./chunk-ZANLDY2W.js";
import {
  overflowAutoWithoutScrollbars
} from "./chunk-FCZJILMW.js";
import {
  standardContentInset
} from "./chunk-JK4BP73A.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) => button === "divider" ? /* @__PURE__ */ jsx(ButtonRowDivider, {}, 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: -${standardContentInset.smPx}px;
            width: calc(100% + ${standardContentInset.smPx * 2}px);
            max-width: calc(100% + ${standardContentInset.smPx * 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 ButtonRowDivider = styled.div`
  border-left: 1px #d9d9d9 solid;
  margin-left: 16px;
  padding-left: 16px;
`;
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;
  }

  & ${ButtonRowDivider} + button,
  & ${ButtonRowDivider} + a {
    margin-left: 0;
  }

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

export {
  ButtonRow,
  ButtonRowContainer,
  StyledButtonRow
};
