import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { Bubble } from "../Bubble";
import { FontStyle } from "../FontStyle";
export const StyledMenu = styled(Bubble).withConfig({
  displayName: "Styles__StyledMenu",
  componentId: "sc-8fhkp-0"
})(["", " ", " ", " color:var(--color-theme-700);a:focus,a:active{outline:none;}", " ", " ", " ", ""], {
  "marginTop": "0.25rem",
  "marginBottom": "0.25rem",
  "overflow": "auto",
  "borderColor": "var(--border-primary)",
  "backgroundColor": "var(--page-paper-main)"
}, FontStyle, BoxSizingStyle, props => props.$mode === "normal" && css(["width:260px;"]), props => props.$mode === "wider" && css(["width:350px;"]), props => props.$mode === "tiny" && css(["width:180px;"]), props => props.$mode === "widest" && css(["width:590px;"]));
StyledMenu.displayName = "StyledMenu";
export const StyledMenuFooter = styled.div.withConfig({
  displayName: "Styles__StyledMenuFooter",
  componentId: "sc-8fhkp-1"
})(["", " display:flex;border-top:1px solid var(--border-primary);height:32px;align-items:center;"], {
  "display": "flex",
  "paddingLeft": "0.5rem",
  "paddingRight": "0.5rem",
  "paddingTop": "0.25rem",
  "paddingBottom": "0.25rem"
});
StyledMenuFooter.displayName = "StyledMenuFooter";
export const StyledMenuHeader = styled.div.withConfig({
  displayName: "Styles__StyledMenuHeader",
  componentId: "sc-8fhkp-2"
})(["", " border-bottom:1px solid var(--border-primary);height:32px;"], {
  "display": "flex",
  "alignItems": "center",
  "justifyContent": "space-between",
  "paddingLeft": "0.5rem",
  "paddingRight": "0.5rem",
  "paddingTop": "0.25rem",
  "paddingBottom": "0.25rem"
});
StyledMenuHeader.displayName = "StyledMenuHeader";
//# sourceMappingURL=Styles.js.map