import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import Icons from "../icons";
import Text from "../text";
import { t } from "ttag";
import { currentTheme } from "../../theme";
export const Wrapper = styled.div `
  background: ${currentTheme.colors.pageBackground};
  box-shadow: ${currentTheme.sidebar?.hoverBoxShadow};

  height: 32px;
  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  cursor: pointer;
  transition: 0.2s;

  > .arrow {
    transform: rotate(90deg) translate(-1px, 4px);
  }

  :hover {
    background: ${currentTheme.colors?.pale};
  }
`;
const BackBtn = ({ onClose }) => {
    return (_jsxs(Wrapper, { className: "back-button", onClick: onClose, children: [_jsx("div", { className: "arrow", children: _jsx(Icons.Arrow, {}) }), _jsx(Text.F2, { children: t `Back` })] }));
};
export default BackBtn;
//# sourceMappingURL=back.js.map